{"id":9188,"date":"2026-09-20T19:46:15","date_gmt":"2026-09-20T15:46:15","guid":{"rendered":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/?page_id=9188"},"modified":"2026-09-30T17:01:09","modified_gmt":"2026-09-30T13:01:09","slug":"cmt-redesigned-homepage-new_draft_ai_designing_gp","status":"publish","type":"page","link":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/","title":{"rendered":"CMT_Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9188\" class=\"elementor elementor-9188\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76af2d4 e-con e-atomic-element e-flexbox-base e-default-div e-c35f924 \" data-id=\"76af2d4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"76af2d4\">\n    \t\t<div class=\"elementor-element elementor-element-5c22f02 elementor-widget elementor-widget-html\" data-id=\"5c22f02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap');\r\n\r\n\/* =====================================================\r\n   CMT LAB HERO SECTION\r\n===================================================== *\/\r\n\r\n.cmt-hero {\r\n    position: relative;\r\n    isolation: isolate;\r\n    overflow: hidden;\r\n    width: 100%;\r\n    min-height: 610px;\r\n    padding: 70px 5.5%;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    background:\r\n        radial-gradient(ellipse at 78% 18%, rgba(180, 219, 240, 0.42), transparent 38%),\r\n        radial-gradient(ellipse at 12% 88%, rgba(207, 229, 242, 0.6), transparent 40%),\r\n        linear-gradient(120deg, #f3f8fc 0%, #e9f3fa 48%, #dcebf5 100%);\r\n    font-family: 'Noto Sans', sans-serif;\r\n    color: #203d55;\r\n}\r\n\r\n\/* Background grid *\/\r\n\r\n.cmt-hero::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: -1;\r\n    pointer-events: none;\r\n    background-image:\r\n        linear-gradient(rgba(67, 111, 145, 0.045) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(67, 111, 145, 0.045) 1px, transparent 1px);\r\n    background-size: 42px 42px;\r\n    mask-image: linear-gradient(to right, transparent, black 20%, black 85%, transparent);\r\n}\r\n\r\n\/* Decorative circles *\/\r\n\r\n.cmt-hero-decoration {\r\n    position: absolute;\r\n    z-index: -1;\r\n    width: 420px;\r\n    height: 420px;\r\n    right: 16%;\r\n    top: -230px;\r\n    border: 1px solid rgba(72, 124, 163, 0.13);\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n}\r\n\r\n.cmt-hero-decoration::before,\r\n.cmt-hero-decoration::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    border: 1px solid rgba(72, 124, 163, 0.12);\r\n    border-radius: 50%;\r\n}\r\n\r\n.cmt-hero-decoration::before {\r\n    inset: 35px;\r\n}\r\n\r\n.cmt-hero-decoration::after {\r\n    inset: 75px;\r\n}\r\n\r\n\/* Main layout *\/\r\n\r\n.cmt-hero-inner {\r\n    width: 100%;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);\r\n    align-items: center;\r\n    gap: 65px;\r\n}\r\n\r\n\/* =====================================================\r\n   LEFT: TEXT CONTENT\r\n===================================================== *\/\r\n\r\n.cmt-hero-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 650px;\r\n    animation: cmtHeroFadeUp 0.9s ease both;\r\n}\r\n\r\n.cmt-hero-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-bottom: 23px;\r\n    color: #416f91;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 2.4px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.cmt-hero-eyebrow::before {\r\n    content: \"\";\r\n    display: inline-block;\r\n    width: 30px;\r\n    height: 2px;\r\n    background: #6596b8;\r\n}\r\n\r\n.cmt-hero-title {\r\n    margin: 0 0 24px !important;\r\n    color: #1c3b54 !important;\r\n    font-family: 'Noto Serif', serif !important;\r\n    font-size: clamp(36px, 4.2vw, 59px) !important;\r\n    font-weight: 500 !important;\r\n    line-height: 1.16 !important;\r\n    letter-spacing: -1.5px;\r\n}\r\n\r\n.cmt-hero-title span {\r\n    display: block;\r\n}\r\n\r\n.cmt-hero-description {\r\n    max-width: 570px;\r\n    margin: 0 0 30px !important;\r\n    color: #506b80 !important;\r\n    font-size: 16px !important;\r\n    line-height: 1.9 !important;\r\n    font-weight: 400;\r\n}\r\n\r\n\/* Buttons *\/\r\n\r\n.cmt-hero-buttons {\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 14px;\r\n    margin-top: 32px;\r\n}\r\n\r\n.cmt-hero-button {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 10px;\r\n    min-height: 48px;\r\n    padding: 13px 23px;\r\n    box-sizing: border-box;\r\n    border: 1px solid transparent;\r\n    border-radius: 6px;\r\n    font-family: 'Noto Sans', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    text-decoration: none !important;\r\n    transition:\r\n        background 0.25s ease,\r\n        color 0.25s ease,\r\n        border-color 0.25s ease,\r\n        transform 0.25s ease,\r\n        box-shadow 0.25s ease;\r\n}\r\n\r\n.cmt-hero-button:hover {\r\n    transform: translateY(-2px);\r\n}\r\n\r\n.cmt-hero-button-primary {\r\n    background: #315e7c;\r\n    color: #ffffff !important;\r\n    box-shadow: 0 7px 18px rgba(38, 79, 108, 0.13);\r\n}\r\n\r\n.cmt-hero-button-primary:hover {\r\n    background: #234a66;\r\n    box-shadow: 0 10px 22px rgba(38, 79, 108, 0.2);\r\n}\r\n\r\n.cmt-hero-button-secondary {\r\n    background: rgba(255, 255, 255, 0.48);\r\n    color: #315e7c !important;\r\n    border-color: rgba(49, 94, 124, 0.35);\r\n}\r\n\r\n.cmt-hero-button-secondary:hover {\r\n    background: #ffffff;\r\n    border-color: #315e7c;\r\n}\r\n\r\n.cmt-button-arrow {\r\n    display: inline-block;\r\n    font-size: 17px;\r\n    line-height: 1;\r\n    transition: transform 0.25s ease;\r\n}\r\n\r\n.cmt-hero-button:hover .cmt-button-arrow {\r\n    transform: translateX(3px);\r\n}\r\n\r\n\/* =====================================================\r\n   ECG DECORATION\r\n===================================================== *\/\r\n\r\n.cmt-hero-ecg {\r\n    width: 100%;\r\n    max-width: 400px;\r\n    height: 44px;\r\n    margin-top: 40px;\r\n    opacity: 0.7;\r\n    overflow: visible;\r\n}\r\n\r\n.cmt-hero-ecg path {\r\n    fill: none;\r\n    stroke: #78a9c9;\r\n    stroke-width: 1.5;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n    stroke-dasharray: 700;\r\n    stroke-dashoffset: 700;\r\n    animation: cmtEcgDraw 4s ease-in-out infinite;\r\n}\r\n\r\n\/* =====================================================\r\n   RIGHT: PHOTO SLIDESHOW\r\n===================================================== *\/\r\n\r\n.cmt-hero-photo-column {\r\n    position: relative;\r\n    width: 100%;\r\n    min-width: 0;\r\n    animation: cmtHeroFadeIn 1.1s ease both;\r\n}\r\n\r\n.cmt-hero-photo-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    aspect-ratio: 1.04 \/ 1;\r\n    min-height: 370px;\r\n    max-height: 550px;\r\n    border-radius: 14px;\r\n    background: #dceaf3;\r\n    box-shadow:\r\n        0 22px 60px rgba(37, 74, 102, 0.15),\r\n        0 3px 10px rgba(37, 74, 102, 0.07);\r\n}\r\n\r\n\/* Offset decorative frame *\/\r\n\r\n.cmt-hero-photo-wrap::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 15px -15px -15px 15px;\r\n    border: 1px solid rgba(70, 119, 153, 0.38);\r\n    border-radius: 14px;\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n\/* Slideshow container *\/\r\n\r\n.cmt-slideshow {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    border-radius: 14px;\r\n    background: #dceaf3;\r\n}\r\n\r\n\/* Individual slides *\/\r\n\r\n.cmt-slide {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition:\r\n        opacity 1s ease-in-out,\r\n        visibility 1s ease-in-out;\r\n}\r\n\r\n.cmt-slide.is-active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    z-index: 1;\r\n}\r\n\r\n.cmt-slide img {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: center;\r\n    border-radius: 14px;\r\n}\r\n\r\n\/* Subtle photo overlay *\/\r\n\r\n.cmt-slideshow::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 45% 0 0;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n    border-radius: 0 0 14px 14px;\r\n    background: linear-gradient(\r\n        to bottom,\r\n        rgba(22, 48, 67, 0),\r\n        rgba(22, 48, 67, 0.12)\r\n    );\r\n}\r\n\r\n\/* =====================================================\r\n   SLIDESHOW ARROWS\r\n===================================================== *\/\r\n\r\n.cmt-slideshow-arrow {\r\n    position: absolute;\r\n    top: 50%;\r\n    z-index: 6;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 40px;\r\n    height: 40px;\r\n    padding: 0;\r\n\r\n    transform: translateY(-50%);\r\n\r\n    border: 1px solid rgba(255, 255, 255, 0.75);\r\n    border-radius: 50%;\r\n\r\n    background: rgba(255, 255, 255, 0.72);\r\n\r\n    -webkit-backdrop-filter: blur(6px);\r\n    backdrop-filter: blur(6px);\r\n\r\n    box-shadow: 0 4px 14px rgba(22, 48, 67, 0.14);\r\n\r\n    color: #1c3b54;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        background 0.25s ease,\r\n        box-shadow 0.25s ease,\r\n        transform 0.25s ease,\r\n        opacity 0.25s ease;\r\n}\r\n\r\n.cmt-slideshow-arrow svg {\r\n    width: 17px;\r\n    height: 17px;\r\n    display: block;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.cmt-slideshow-arrow-prev {\r\n    left: 12px;\r\n}\r\n\r\n.cmt-slideshow-arrow-next {\r\n    right: 12px;\r\n}\r\n\r\n.cmt-slideshow-arrow:hover {\r\n    background: #ffffff;\r\n    box-shadow: 0 7px 20px rgba(22, 48, 67, 0.2);\r\n}\r\n\r\n.cmt-slideshow-arrow-prev:hover {\r\n    transform: translateY(-50%) translateX(-2px);\r\n}\r\n\r\n.cmt-slideshow-arrow-next:hover {\r\n    transform: translateY(-50%) translateX(2px);\r\n}\r\n\r\n.cmt-slideshow-arrow:active {\r\n    background: #f3f8fc;\r\n}\r\n\r\n.cmt-slideshow-arrow:focus-visible {\r\n    outline: 2px solid #ffffff;\r\n    outline-offset: 3px;\r\n}\r\n\r\n\/* Slideshow navigation dots *\/\r\n\r\n.cmt-slideshow-dots {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 20px;\r\n    z-index: 5;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 9px;\r\n}\r\n\r\n.cmt-slideshow-dot {\r\n    display: block;\r\n    width: 8px;\r\n    height: 8px;\r\n    padding: 0;\r\n    border: 1px solid rgba(255, 255, 255, 0.9);\r\n    border-radius: 20px;\r\n    background: rgba(255, 255, 255, 0.55);\r\n    cursor: pointer;\r\n    transition:\r\n        width 0.3s ease,\r\n        background 0.3s ease;\r\n}\r\n\r\n.cmt-slideshow-dot.is-active {\r\n    width: 25px;\r\n    background: #ffffff;\r\n}\r\n\r\n.cmt-slideshow-dot:focus-visible {\r\n    outline: 2px solid #ffffff;\r\n    outline-offset: 4px;\r\n}\r\n\r\n\/* Small label below photo *\/\r\n\r\n.cmt-hero-photo-caption {\r\n    margin: 27px 0 0;\r\n    padding-left: 2px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 11px;\r\n    color: #54748b;\r\n    font-size: 12px;\r\n    letter-spacing: 0.7px;\r\n}\r\n\r\n.cmt-hero-photo-caption::before {\r\n    content: \"\";\r\n    width: 23px;\r\n    height: 1px;\r\n    background: #7099b6;\r\n    flex-shrink: 0;\r\n}\r\n\r\n\/* =====================================================\r\n   FLOATING BACKGROUND PARTICLES\r\n===================================================== *\/\r\n\r\n.cmt-hero-particle {\r\n    position: absolute;\r\n    z-index: -1;\r\n    width: 7px;\r\n    height: 7px;\r\n    border-radius: 50%;\r\n    background: rgba(84, 141, 180, 0.35);\r\n    pointer-events: none;\r\n    animation: cmtParticleFloat 7s ease-in-out infinite;\r\n}\r\n\r\n.cmt-hero-particle-1 {\r\n    top: 17%;\r\n    left: 45%;\r\n}\r\n\r\n.cmt-hero-particle-2 {\r\n    top: 76%;\r\n    left: 48%;\r\n    width: 5px;\r\n    height: 5px;\r\n    animation-delay: 1.8s;\r\n}\r\n\r\n.cmt-hero-particle-3 {\r\n    top: 27%;\r\n    right: 4%;\r\n    width: 6px;\r\n    height: 6px;\r\n    animation-delay: 3s;\r\n}\r\n\r\n\/* =====================================================\r\n   ANIMATIONS\r\n===================================================== *\/\r\n\r\n@keyframes cmtHeroFadeUp {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(18px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes cmtHeroFadeIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(15px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n@keyframes cmtEcgDraw {\r\n    0% {\r\n        stroke-dashoffset: 700;\r\n    }\r\n    45%, 75% {\r\n        stroke-dashoffset: 0;\r\n    }\r\n    100% {\r\n        stroke-dashoffset: -700;\r\n    }\r\n}\r\n\r\n@keyframes cmtParticleFloat {\r\n    0%, 100% {\r\n        transform: translateY(0);\r\n        opacity: 0.35;\r\n    }\r\n    50% {\r\n        transform: translateY(-14px);\r\n        opacity: 0.8;\r\n    }\r\n}\r\n\r\n\/* =====================================================\r\n   RESPONSIVE LAYOUT\r\n===================================================== *\/\r\n\r\n@media (max-width: 1000px) {\r\n    .cmt-hero {\r\n        padding: 60px 5%;\r\n    }\r\n\r\n    .cmt-hero-inner {\r\n        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);\r\n        gap: 38px;\r\n    }\r\n\r\n    .cmt-hero-title {\r\n        font-size: clamp(34px, 4.5vw, 48px) !important;\r\n    }\r\n\r\n    .cmt-hero-description {\r\n        font-size: 15px !important;\r\n        line-height: 1.8 !important;\r\n    }\r\n\r\n    .cmt-hero-photo-wrap {\r\n        min-height: 320px;\r\n    }\r\n\r\n    .cmt-slideshow-arrow {\r\n        width: 36px;\r\n        height: 36px;\r\n    }\r\n\r\n    .cmt-slideshow-arrow svg {\r\n        width: 15px;\r\n        height: 15px;\r\n    }\r\n}\r\n\r\n@media (max-width: 760px) {\r\n    .cmt-hero {\r\n        min-height: auto;\r\n        padding: 55px 6% 65px;\r\n    }\r\n\r\n    .cmt-hero-inner {\r\n        grid-template-columns: 1fr;\r\n        gap: 43px;\r\n    }\r\n\r\n    .cmt-hero-content {\r\n        max-width: 100%;\r\n    }\r\n\r\n    .cmt-hero-title {\r\n        font-size: clamp(36px, 8vw, 49px) !important;\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .cmt-hero-description {\r\n        max-width: 100%;\r\n        font-size: 15px !important;\r\n    }\r\n\r\n    .cmt-hero-ecg {\r\n        margin-top: 30px;\r\n        max-width: 330px;\r\n    }\r\n\r\n    .cmt-hero-photo-column {\r\n        width: calc(100% - 12px);\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .cmt-hero-photo-wrap {\r\n        aspect-ratio: 1.12 \/ 1;\r\n        min-height: 290px;\r\n        max-height: 470px;\r\n    }\r\n\r\n    .cmt-hero-photo-caption {\r\n        margin-top: 24px;\r\n    }\r\n\r\n    .cmt-hero-particle-1 {\r\n        left: 80%;\r\n    }\r\n\r\n    .cmt-hero-particle-2 {\r\n        left: 10%;\r\n    }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n    .cmt-hero {\r\n        padding: 42px 5% 52px;\r\n    }\r\n\r\n    .cmt-hero-title {\r\n        font-size: 34px !important;\r\n        line-height: 1.2 !important;\r\n    }\r\n\r\n    .cmt-hero-eyebrow {\r\n        font-size: 10px;\r\n        letter-spacing: 1.8px;\r\n    }\r\n\r\n    .cmt-hero-description {\r\n        font-size: 14px !important;\r\n        line-height: 1.8 !important;\r\n    }\r\n\r\n    .cmt-hero-buttons {\r\n        align-items: stretch;\r\n        flex-direction: column;\r\n        gap: 11px;\r\n    }\r\n\r\n    .cmt-hero-button {\r\n        width: 100%;\r\n    }\r\n\r\n    .cmt-hero-photo-wrap {\r\n        min-height: 245px;\r\n    }\r\n\r\n    .cmt-hero-photo-wrap::before {\r\n        inset: 9px -8px -9px 8px;\r\n    }\r\n\r\n    .cmt-hero-photo-caption {\r\n        font-size: 11px;\r\n    }\r\n\r\n    .cmt-slideshow-arrow {\r\n        width: 34px;\r\n        height: 34px;\r\n    }\r\n\r\n    .cmt-slideshow-arrow-prev {\r\n        left: 9px;\r\n    }\r\n\r\n    .cmt-slideshow-arrow-next {\r\n        right: 9px;\r\n    }\r\n}\r\n\r\n\/* Respect reduced-motion preferences *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .cmt-hero-content,\r\n    .cmt-hero-photo-column,\r\n    .cmt-hero-particle,\r\n    .cmt-hero-ecg path {\r\n        animation: none !important;\r\n    }\r\n\r\n    .cmt-slide,\r\n    .cmt-hero-button,\r\n    .cmt-slideshow-dot,\r\n    .cmt-slideshow-arrow {\r\n        transition: none !important;\r\n    }\r\n\r\n    .cmt-slideshow-arrow-prev:hover,\r\n    .cmt-slideshow-arrow-next:hover {\r\n        transform: translateY(-50%);\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"cmt-hero\" aria-label=\"CMT Lab introduction\">\r\n\r\n    <div class=\"cmt-hero-decoration\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"cmt-hero-particle cmt-hero-particle-1\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"cmt-hero-particle cmt-hero-particle-2\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"cmt-hero-particle cmt-hero-particle-3\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"cmt-hero-inner\">\r\n\r\n        <!-- LEFT: INTRODUCTION -->\r\n\r\n        <div class=\"cmt-hero-content\">\r\n\r\n            <div class=\"cmt-hero-eyebrow\">\r\n                Computational Medicine and Technology Lab\r\n            <\/div>\r\n\r\n            <h1 class=\"cmt-hero-title\">\r\n                <span>Computational<\/span>\r\n                <span>Medicine and<\/span>\r\n                <span>Technology<\/span>\r\n            <\/h1>\r\n\r\n            <p class=\"cmt-hero-description\">\r\n                At CMT Lab, we bring together engineering, biology, and\r\n                medicine to explore how the human body works. We work on research problems that connect\r\n                scientific ideas with real-world healthcare.\r\n            <\/p>\r\n\r\n            <div class=\"cmt-hero-buttons\">\r\n                <a\r\n                    class=\"cmt-hero-button cmt-hero-button-primary\"\r\n                    href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/cmt-research-new_draft\/\"\r\n                >\r\n                    Explore our research\r\n                    <span class=\"cmt-button-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n                <\/a>\r\n\r\n                <a\r\n                    class=\"cmt-hero-button cmt-hero-button-secondary\"\r\n                    href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/positions_draft\/\"\r\n                >\r\n                    Join the lab\r\n                    <span class=\"cmt-button-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- Decorative ECG waveform -->\r\n\r\n            <svg\r\n                class=\"cmt-hero-ecg\"\r\n                viewBox=\"0 0 400 44\"\r\n                preserveAspectRatio=\"none\"\r\n                role=\"img\"\r\n                aria-label=\"Decorative ECG waveform\"\r\n            >\r\n                <path d=\"\r\n                    M0,23\r\n                    L45,23\r\n                    L55,21\r\n                    L65,23\r\n                    L78,23\r\n                    L87,15\r\n                    L95,31\r\n                    L107,3\r\n                    L120,38\r\n                    L133,23\r\n                    L151,23\r\n                    L163,20\r\n                    L175,23\r\n                    L190,23\r\n                    L203,16\r\n                    L215,28\r\n                    L227,23\r\n                    L247,23\r\n                    L260,22\r\n                    L270,23\r\n                    L283,23\r\n                    L294,12\r\n                    L304,33\r\n                    L316,6\r\n                    L328,37\r\n                    L340,23\r\n                    L365,23\r\n                    L378,21\r\n                    L390,23\r\n                    L400,23\r\n                \" \/>\r\n            <\/svg>\r\n\r\n        <\/div>\r\n\r\n        <!-- RIGHT: AUTOMATIC IMAGE SLIDESHOW -->\r\n\r\n        <div class=\"cmt-hero-photo-column\">\r\n\r\n            <div\r\n                class=\"cmt-hero-photo-wrap\"\r\n                id=\"cmt-hero-photo-wrap\"\r\n            >\r\n\r\n                <div\r\n                    class=\"cmt-slideshow\"\r\n                    id=\"cmt-lab-slideshow\"\r\n                    aria-label=\"Photos of the CMT Lab\"\r\n                    aria-live=\"off\"\r\n                >\r\n\r\n                    <figure class=\"cmt-slide is-active\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/TMP01279-2.webp\"\r\n                            alt=\"CMT Lab group photograph\"\r\n                            loading=\"eager\"\r\n                            fetchpriority=\"high\"\r\n                        \/>\r\n                    <\/figure>\r\n\r\n                    <figure class=\"cmt-slide\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/04\/lab.jpeg\"\r\n                            alt=\"CMT Lab workspace\"\r\n                            loading=\"lazy\"\r\n                        \/>\r\n                    <\/figure>\r\n\r\n                    <figure class=\"cmt-slide\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/TMP01304-2_2x.webp\"\r\n                            alt=\"CMT Lab team photograph\"\r\n                            loading=\"lazy\"\r\n                        \/>\r\n                    <\/figure>\r\n\r\n                    <figure class=\"cmt-slide\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/TMP01298-2_2x.webp\"\r\n                            alt=\"CMT Lab activities\"\r\n                            loading=\"lazy\"\r\n                        \/>\r\n                    <\/figure>\r\n\r\n                    <figure class=\"cmt-slide\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/TMP01305-2_2x.webp\"\r\n                            alt=\"CMT Lab activities\"\r\n                            loading=\"lazy\"\r\n                        \/>\r\n                    <\/figure>\r\n\r\n\r\n                    <figure class=\"cmt-slide\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/04\/lab_2-e1775048273861.jpeg\"\r\n                            alt=\"Research work in the CMT Lab\"\r\n                            loading=\"lazy\"\r\n                        \/>\r\n                    <\/figure>\r\n\r\n                <\/div>\r\n\r\n                <!-- Previous \/ next arrows -->\r\n\r\n                <button\r\n                    class=\"cmt-slideshow-arrow cmt-slideshow-arrow-prev\"\r\n                    id=\"cmt-slideshow-prev\"\r\n                    type=\"button\"\r\n                    aria-label=\"Previous photo\"\r\n                >\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                        <polyline points=\"15,5 8,12 15,19\" \/>\r\n                    <\/svg>\r\n                <\/button>\r\n\r\n                <button\r\n                    class=\"cmt-slideshow-arrow cmt-slideshow-arrow-next\"\r\n                    id=\"cmt-slideshow-next\"\r\n                    type=\"button\"\r\n                    aria-label=\"Next photo\"\r\n                >\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                        <polyline points=\"9,5 16,12 9,19\" \/>\r\n                    <\/svg>\r\n                <\/button>\r\n\r\n                <!-- Navigation dots are generated by JavaScript -->\r\n\r\n                <div\r\n                    class=\"cmt-slideshow-dots\"\r\n                    id=\"cmt-slideshow-dots\"\r\n                    aria-label=\"Choose a lab photo\"\r\n                ><\/div>\r\n\r\n            <\/div>\r\n\r\n            <p class=\"cmt-hero-photo-caption\">\r\n                The people, ideas, and research behind our work\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function initCMTSlideshow() {\r\n        const slideshow = document.getElementById(\"cmt-lab-slideshow\");\r\n        const dotsContainer = document.getElementById(\"cmt-slideshow-dots\");\r\n        const photoWrap = document.getElementById(\"cmt-hero-photo-wrap\");\r\n        const prevButton = document.getElementById(\"cmt-slideshow-prev\");\r\n        const nextButton = document.getElementById(\"cmt-slideshow-next\");\r\n\r\n        if (!slideshow || !dotsContainer || !photoWrap) {\r\n            return;\r\n        }\r\n\r\n        \/* Prevent duplicate initialization if the page builder reruns scripts *\/\r\n\r\n        if (slideshow.dataset.initialized === \"true\") {\r\n            return;\r\n        }\r\n\r\n        slideshow.dataset.initialized = \"true\";\r\n\r\n        const slides = Array.from(\r\n            slideshow.querySelectorAll(\".cmt-slide\")\r\n        );\r\n\r\n        if (slides.length === 0) {\r\n            return;\r\n        }\r\n\r\n        let currentIndex = 0;\r\n        let slideshowTimer = null;\r\n        const intervalDuration = 4000;\r\n        const dots = [];\r\n\r\n        \/* Create one navigation dot for each image *\/\r\n\r\n        slides.forEach(function (slide, index) {\r\n            const dot = document.createElement(\"button\");\r\n\r\n            dot.type = \"button\";\r\n            dot.className = \"cmt-slideshow-dot\";\r\n            dot.setAttribute(\"aria-label\", \"Show lab photo \" + (index + 1));\r\n            dot.setAttribute(\"aria-pressed\", index === 0 ? \"true\" : \"false\");\r\n\r\n            if (index === 0) {\r\n                dot.classList.add(\"is-active\");\r\n            }\r\n\r\n            dot.addEventListener(\"click\", function () {\r\n                showSlide(index);\r\n                restartSlideshow();\r\n            });\r\n\r\n            dotsContainer.appendChild(dot);\r\n            dots.push(dot);\r\n        });\r\n\r\n        \/* Display the selected slide *\/\r\n\r\n        function showSlide(index) {\r\n            currentIndex = (index + slides.length) % slides.length;\r\n\r\n            slides.forEach(function (slide, slideIndex) {\r\n                const isActive = slideIndex === currentIndex;\r\n\r\n                slide.classList.toggle(\"is-active\", isActive);\r\n\r\n                if (isActive) {\r\n                    slide.setAttribute(\"aria-current\", \"true\");\r\n                } else {\r\n                    slide.removeAttribute(\"aria-current\");\r\n                }\r\n            });\r\n\r\n            dots.forEach(function (dot, dotIndex) {\r\n                const isActive = dotIndex === currentIndex;\r\n\r\n                dot.classList.toggle(\"is-active\", isActive);\r\n                dot.setAttribute(\"aria-pressed\", isActive ? \"true\" : \"false\");\r\n            });\r\n        }\r\n\r\n        function nextSlide() {\r\n            showSlide(currentIndex + 1);\r\n        }\r\n\r\n        function previousSlide() {\r\n            showSlide(currentIndex - 1);\r\n        }\r\n\r\n        \/* Stop and restart the timer when needed *\/\r\n\r\n        function stopSlideshow() {\r\n            if (slideshowTimer !== null) {\r\n                window.clearInterval(slideshowTimer);\r\n                slideshowTimer = null;\r\n            }\r\n        }\r\n\r\n        function startSlideshow() {\r\n            stopSlideshow();\r\n\r\n            if (\r\n                document.hidden ||\r\n                window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\r\n                slides.length < 2\r\n            ) {\r\n                return;\r\n            }\r\n\r\n            slideshowTimer = window.setInterval(\r\n                nextSlide,\r\n                intervalDuration\r\n            );\r\n        }\r\n\r\n        function restartSlideshow() {\r\n            startSlideshow();\r\n        }\r\n\r\n        \/* Arrow buttons *\/\r\n\r\n        if (slides.length < 2) {\r\n\r\n            \/* A single photo needs no arrows *\/\r\n\r\n            if (prevButton) {\r\n                prevButton.style.display = \"none\";\r\n            }\r\n\r\n            if (nextButton) {\r\n                nextButton.style.display = \"none\";\r\n            }\r\n\r\n        } else {\r\n\r\n            if (prevButton) {\r\n                prevButton.addEventListener(\"click\", function () {\r\n                    previousSlide();\r\n                    restartSlideshow();\r\n                });\r\n            }\r\n\r\n            if (nextButton) {\r\n                nextButton.addEventListener(\"click\", function () {\r\n                    nextSlide();\r\n                    restartSlideshow();\r\n                });\r\n            }\r\n\r\n        }\r\n\r\n        \/* Left and right keys move through the photos once the\r\n           slideshow has keyboard focus *\/\r\n\r\n        photoWrap.addEventListener(\"keydown\", function (event) {\r\n            if (event.key === \"ArrowLeft\") {\r\n                event.preventDefault();\r\n                previousSlide();\r\n                restartSlideshow();\r\n            } else if (event.key === \"ArrowRight\") {\r\n                event.preventDefault();\r\n                nextSlide();\r\n                restartSlideshow();\r\n            }\r\n        });\r\n\r\n        \/* Pause while the user is viewing the photo or the tab is hidden *\/\r\n\r\n        photoWrap.addEventListener(\"mouseenter\", stopSlideshow);\r\n        photoWrap.addEventListener(\"mouseleave\", startSlideshow);\r\n\r\n        photoWrap.addEventListener(\"focusin\", stopSlideshow);\r\n        photoWrap.addEventListener(\"focusout\", function (event) {\r\n            if (!photoWrap.contains(event.relatedTarget)) {\r\n                startSlideshow();\r\n            }\r\n        });\r\n\r\n        document.addEventListener(\"visibilitychange\", function () {\r\n            if (document.hidden) {\r\n                stopSlideshow();\r\n            } else {\r\n                startSlideshow();\r\n            }\r\n        });\r\n\r\n        \/* Start with the first photo *\/\r\n\r\n        showSlide(0);\r\n        startSlideshow();\r\n    }\r\n\r\n    \/* Support normal page loading and delayed WordPress page-builder loading *\/\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", initCMTSlideshow);\r\n    } else {\r\n        initCMTSlideshow();\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-00000015 e-flex e-con-boxed e-con e-parent\" data-id=\"00000015\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0000000e e-con-full e-flex e-con e-child\" data-id=\"0000000e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b029cb9 cmt-section-title elementor-widget elementor-widget-heading\" data-id=\"b029cb9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Research<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0000000d elementor-widget elementor-widget-text-editor\" data-id=\"0000000d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #50646b; font-size: 18px;\">Our work begins with a healthcare question and follows a visible path from measurement to modelling, validation and translation. Four connected pillars define the laboratory.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d1bd49f e-flex e-con-boxed e-con e-parent\" data-id=\"d1bd49f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ae595a elementor-widget elementor-widget-html\" data-id=\"5ae595a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif&display=swap');\r\n\r\n.lab-focus-grid,\r\n.lab-focus-card,\r\n.lab-focus-title {\r\n    font-family: 'Noto Serif', serif;\r\n}\r\n<\/style>\r\n<style>\r\n.lab-focus-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 28px;\r\n    width: 100%;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.lab-focus-card {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 22px;\r\n    padding: 24px 20px;\r\n    text-decoration: none !important;\r\n    background: #ffffff;\r\n    border-radius: 18px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n}\r\n\r\n.lab-focus-card:hover {\r\n    background: #f2f8fc;\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 8px 24px rgba(45, 100, 130, 0.12);\r\n}\r\n\r\n.lab-focus-icon {\r\n    flex: 0 0 105px;\r\n    width: 105px;\r\n    height: 105px;\r\n    border-radius: 50%;\r\n    background: #eef8fc;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.lab-focus-icon img {\r\n    width: 78px;\r\n    height: 78px;\r\n    object-fit: contain;\r\n}\r\n\r\n.lab-focus-title {\r\n    font-size: 21px;\r\n    line-height: 1.55;\r\n    font-weight: 400;\r\n    color: #28576A;\r\n    margin: 0;\r\n}\r\n\r\n\/* Tablet *\/\r\n@media (max-width: 1100px) {\r\n    .lab-focus-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 600px) {\r\n    .lab-focus-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .lab-focus-card {\r\n        padding: 20px;\r\n    }\r\n\r\n    .lab-focus-icon {\r\n        flex-basis: 85px;\r\n        width: 85px;\r\n        height: 85px;\r\n    }\r\n\r\n    .lab-focus-icon img {\r\n        width: 62px;\r\n        height: 62px;\r\n    }\r\n\r\n    .lab-focus-title {\r\n        font-size: 18px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"lab-focus-grid\">\r\n\r\n    <!-- 1. AI and Physiological Signals -->\r\n    <a href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/cmt-ai-and-physiological-data-new_draft-copy\/\" class=\"lab-focus-card\">\r\n\r\n        <div class=\"lab-focus-icon\">\r\n            <img decoding=\"async\" src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/ai_ml_health_care.png\" alt=\"AI and Physiological Signals\">\r\n        <\/div>\r\n\r\n        <p class=\"lab-focus-title\">\r\n            AI and<br>\r\n            Physiological<br>\r\n            Signals\r\n        <\/p>\r\n\r\n    <\/a>\r\n\r\n\r\n    <!-- 2. Disease Progression -->\r\n    <a href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/cmt-disease-modelling-new\/\" class=\"lab-focus-card\">\r\n\r\n        <div class=\"lab-focus-icon\">\r\n            <img decoding=\"async\" src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/disease_modelling.png\" alt=\"Disease Progression and Prediction\">\r\n        <\/div>\r\n\r\n        <p class=\"lab-focus-title\">\r\n            Disease<br>\r\n            Progression<br>\r\n            and Prediction\r\n        <\/p>\r\n\r\n    <\/a>\r\n\r\n\r\n    <!-- 3. Medical Devices -->\r\n    <a href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/medical-devices-new\/\" class=\"lab-focus-card\">\r\n\r\n        <div class=\"lab-focus-icon\">\r\n            <img decoding=\"async\" src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/medical_devices.png\" alt=\"Medical Devices and Respiratory Sensing\">\r\n        <\/div>\r\n\r\n        <p class=\"lab-focus-title\">\r\n            Medical<br>\r\n            Devices and<br>\r\n            Respiratory<br>\r\n            Sensing\r\n        <\/p>\r\n\r\n    <\/a>\r\n\r\n\r\n    <!-- 4. Mechanistic and Synthetic Biology -->\r\n    <a href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/?page_id=9232\" class=\"lab-focus-card\">\r\n\r\n        <div class=\"lab-focus-icon\">\r\n            <img decoding=\"async\" src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/synthetic_biology.png\" alt=\"Mechanistic and Synthetic Biology\">\r\n        <\/div>\r\n\r\n        <p class=\"lab-focus-title\">\r\n            Mechanistic<br>\r\n            and Synthetic<br>\r\n            Biology\r\n        <\/p>\r\n\r\n    <\/a>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\nhtml {\r\n    scroll-behavior: smooth;\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0000003d e-flex e-con-boxed e-con e-parent\" data-id=\"0000003d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0000003b cmt-section-title elementor-widget elementor-widget-heading\" data-id=\"0000003b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Current flagship projects<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0c96b85 e-con-full e-flex e-con e-child\" data-id=\"0c96b85\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d7100f7 e-con-full e-flex e-con e-child\" data-id=\"d7100f7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d3001c0 e-con-full e-flex e-con e-child\" data-id=\"d3001c0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-061de40 elementor-widget elementor-widget-html\" data-id=\"061de40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif:wght@400;500;600;700&display=swap');\r\n\r\n\r\n\/* =====================================================\r\n   FLAGSHIP PROJECTS\r\n===================================================== *\/\r\n\r\n.project-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 28px;\r\n    width: 100%;\r\n    align-items: start;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROJECT CARD\r\n===================================================== *\/\r\n\r\n.project-card {\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n\r\n    padding: 15px;\r\n    background: #ffffff;\r\n\r\n    text-decoration: none !important;\r\n    color: inherit;\r\n\r\n    border-radius: 8px;\r\n\r\n    transition:\r\n        transform 0.4s ease,\r\n        box-shadow 0.4s ease,\r\n        background 0.4s ease;\r\n\r\n    cursor: pointer;\r\n\r\n    height: auto;\r\n    min-height: 0;\r\n    align-self: start;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    \/* Entrance animation *\/\r\n    opacity: 0;\r\n    transform: translateY(25px);\r\n\r\n    animation: projectReveal 0.8s ease forwards;\r\n}\r\n\r\n\r\n\/* Staggered animation *\/\r\n\r\n.project-card:nth-child(1) {\r\n    animation-delay: 0.15s;\r\n}\r\n\r\n.project-card:nth-child(2) {\r\n    animation-delay: 0.30s;\r\n}\r\n\r\n.project-card:nth-child(3) {\r\n    animation-delay: 0.45s;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   HOVER EFFECT\r\n===================================================== *\/\r\n\r\n.project-card:hover {\r\n    transform: translateY(-6px);\r\n\r\n    box-shadow:\r\n        0 12px 28px rgba(45, 100, 130, 0.14);\r\n\r\n    background: #f8fbfd;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROJECT IMAGE\r\n===================================================== *\/\r\n\r\n.project-image {\r\n    flex: 0 0 45%;\r\n    width: 45%;\r\n\r\n    overflow: hidden;\r\n    border-radius: 6px;\r\n}\r\n\r\n\r\n.project-image img {\r\n    width: 100%;\r\n    height: 250px;\r\n\r\n    object-fit: cover;\r\n    display: block;\r\n\r\n    transition:\r\n        transform 0.6s ease,\r\n        filter 0.6s ease;\r\n}\r\n\r\n\r\n\/* Image zoom *\/\r\n\r\n.project-card:hover .project-image img {\r\n    transform: scale(1.05);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROJECT CONTENT\r\n===================================================== *\/\r\n\r\n.project-content {\r\n    flex: 1;\r\n    padding: 5px 5px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROJECT TITLE\r\n===================================================== *\/\r\n\r\n.project-title {\r\n    margin: 0 0 18px 0;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    font-size: 21px;\r\n    line-height: 1.2;\r\n\r\n    font-weight: 700;\r\n\r\n    \/* SAME DARK SEA-BLUE AS MAIN HEADER *\/\r\n    color: #123B4A;\r\n\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n\r\n\/* Slight colour change on hover *\/\r\n\r\n.project-card:hover .project-title {\r\n    color: #28576A;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROJECT DESCRIPTION\r\n===================================================== *\/\r\n\r\n.project-description {\r\n    margin: 0;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n\r\n    color: #596D85;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ANIMATION\r\n===================================================== *\/\r\n\r\n@keyframes projectReveal {\r\n\r\n    0% {\r\n        opacity: 0;\r\n        transform: translateY(25px);\r\n    }\r\n\r\n    100% {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .project-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .project-card {\r\n        max-width: 850px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .project-card {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .project-image {\r\n        width: 100%;\r\n        flex-basis: auto;\r\n    }\r\n\r\n    .project-image img {\r\n        height: 220px;\r\n    }\r\n\r\n    .project-title {\r\n        font-size: 22px;\r\n    }\r\n\r\n    .project-description {\r\n        font-size: 15px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SMOOTH SCROLL\r\n===================================================== *\/\r\n\r\nhtml {\r\n    scroll-behavior: smooth;\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"project-grid\">\r\n\r\n\r\n    <!-- =================================================\r\n         PROJECT 1\r\n    ================================================== -->\r\n\r\n    <a href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/cmt-ai-and-physiological-data-new_draft-copy\/\" class=\"project-card\">\r\n\r\n        <div class=\"project-image\">\r\n\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/real-time-ventilator.jpeg\"\r\n                alt=\"Real-time ventilator dyssynchrony detection\"\r\n            >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"project-content\">\r\n\r\n            <h3 class=\"project-title\">\r\n                Real-time<br>\r\n                ventilator<br>\r\n                dyssynchrony<br>\r\n                detection\r\n            <\/h3>\r\n\r\n\r\n            <p class=\"project-description\">\r\n                A clinical waveform platform for detecting and quantifying\r\n                patient\u2013ventilator mismatch using interpretable signal\r\n                analysis and ML.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/a>\r\n\r\n\r\n\r\n    <!-- =================================================\r\n         PROJECT 2\r\n    ================================================== -->\r\n\r\n    <a href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/cmt-ai-and-physiological-data-new_draft-copy\/\" class=\"project-card\">\r\n\r\n        <div class=\"project-image\">\r\n\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/longitudinal-t2d.jpeg\"\r\n                alt=\"Longitudinal prediction of type 2 diabetes\"\r\n            >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"project-content\">\r\n\r\n            <h3 class=\"project-title\">\r\n                Longitudinal<br>\r\n                prediction of type<br>\r\n                2 diabetes\r\n            <\/h3>\r\n\r\n\r\n            <p class=\"project-description\">\r\n                Models that use repeated metabolic, lifestyle and\r\n                demographic measurements to forecast future progression\r\n                rather than only describe current phenotypes.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/a>\r\n\r\n\r\n\r\n    <!-- =================================================\r\n         PROJECT 3\r\n    ================================================== -->\r\n\r\n    <a href=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/medical-devices-new\/\" class=\"project-card\">\r\n\r\n        <div class=\"project-image\">\r\n\r\n            <img decoding=\"async\"\r\n                src=\"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-content\/uploads\/2026\/09\/low-cost-respiratory.jpeg\"\r\n                alt=\"Low-cost respiratory assessment and support\"\r\n            >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"project-content\">\r\n\r\n            <h3 class=\"project-title\">\r\n                Low-cost<br>\r\n                respiratory<br>\r\n                assessment and<br>\r\n                support\r\n            <\/h3>\r\n\r\n\r\n            <p class=\"project-description\">\r\n                Respiratory impedance, lung-sound and neonatal\r\n                pressure-support technologies intended for practical\r\n                use in resource-constrained settings.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n    <\/a>\r\n\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1da9509 e-flex e-con-boxed e-con e-parent\" data-id=\"1da9509\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ca8ba5 elementor-widget elementor-widget-html\" data-id=\"5ca8ba5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\n     SELECTED PUBLICATIONS + CLINICAL \/ ACADEMIC COLLABORATION\r\n     ========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   MAIN SECTION\r\n   ========================================================= *\/\r\n\r\n.research-publications-section {\r\n    width: 100%;\r\n    max-width: 1180px;\r\n\r\n    margin: 0 auto;\r\n\r\n    padding: 40px 4%;\r\n\r\n    box-sizing: border-box;\r\n\r\n    font-family: \"Noto Serif\", Georgia, serif;\r\n\r\n    color: #35566a;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TWO COLUMN LAYOUT\r\n   ========================================================= *\/\r\n\r\n.research-publications-layout {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0, 1fr)\r\n        minmax(0, 1fr);\r\n\r\n    gap: 50px;\r\n\r\n    align-items: start;\r\n\r\n    width: 100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN CLICKABLE SECTIONS\r\n   ========================================================= *\/\r\n\r\n.main-section-link {\r\n    display: block;\r\n\r\n    width: 100%;\r\n\r\n    box-sizing: border-box;\r\n\r\n    color: inherit !important;\r\n\r\n    text-decoration: none !important;\r\n\r\n    cursor: pointer;\r\n\r\n    border-radius: 10px;\r\n\r\n    transition:\r\n        background-color 0.25s ease,\r\n        transform 0.25s ease;\r\n}\r\n\r\n\r\n.main-section-link:hover {\r\n    background-color: rgba(240, 246, 248, 0.45);\r\n\r\n    transform: translateY(-1px);\r\n}\r\n\r\n\r\n.main-section-link,\r\n.main-section-link:hover,\r\n.main-section-link:visited,\r\n.main-section-link:active {\r\n    color: inherit !important;\r\n\r\n    text-decoration: none !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN HEADINGS\r\n   ========================================================= *\/\r\n\r\n.research-publications-section h2 {\r\n    font-family: \"Noto Serif\", Georgia, serif !important;\r\n\r\n    font-size: 27px !important;\r\n\r\n    line-height: 1.15 !important;\r\n\r\n    font-weight: 500 !important;\r\n\r\n    letter-spacing: -0.02em;\r\n\r\n    color: #294454 !important;\r\n\r\n    margin: 0 0 10px !important;\r\n\r\n    padding: 0 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INTRO TEXT\r\n   ========================================================= *\/\r\n\r\n.research-section-intro {\r\n    font-family: \"Noto Serif\", Georgia, serif !important;\r\n\r\n    font-size: 14px !important;\r\n\r\n    line-height: 1.55 !important;\r\n\r\n    color: #718294 !important;\r\n\r\n    margin: 0 0 28px !important;\r\n\r\n    padding: 0 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION ARROW\r\n   ========================================================= *\/\r\n\r\n.section-arrow {\r\n    display: inline-block;\r\n\r\n    margin-left: 5px;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    color: #416d82;\r\n\r\n    transition:\r\n        transform 0.2s ease;\r\n}\r\n\r\n\r\n.main-section-link:hover .section-arrow {\r\n    transform: translateX(4px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PUBLICATIONS COLUMN\r\n   ========================================================= *\/\r\n\r\n.publications-column {\r\n    width: 100%;\r\n\r\n    min-width: 0;\r\n}\r\n\r\n\r\n.publications-list {\r\n    width: 100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INDIVIDUAL PUBLICATION\r\n   ========================================================= *\/\r\n\r\n.publication-item {\r\n    width: 100%;\r\n\r\n    padding: 0 0 20px;\r\n\r\n    margin: 0 0 20px;\r\n\r\n    border-bottom: 1px solid #dfe7eb;\r\n\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n.publication-item:last-child {\r\n    border-bottom: none;\r\n\r\n    margin-bottom: 0;\r\n\r\n    padding-bottom: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PUBLICATION TITLE\r\n   ========================================================= *\/\r\n\r\n.publication-title {\r\n    font-family: \"Noto Serif\", Georgia, serif !important;\r\n\r\n    font-size: 15px !important;\r\n\r\n    line-height: 1.45 !important;\r\n\r\n    font-weight: 600 !important;\r\n\r\n    letter-spacing: -0.005em;\r\n\r\n    color: #35566a !important;\r\n\r\n    margin: 0 0 7px !important;\r\n\r\n    padding: 0 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PUBLICATION METADATA\r\n   ========================================================= *\/\r\n\r\n.publication-meta {\r\n    font-family: \"Noto Serif\", Georgia, serif !important;\r\n\r\n    font-size: 13px !important;\r\n\r\n    line-height: 1.55 !important;\r\n\r\n    color: #7a8998 !important;\r\n\r\n    margin: 0 !important;\r\n\r\n    padding: 0 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PUBLICATION LINK\r\n   ========================================================= *\/\r\n\r\n.publication-link {\r\n    display: inline-block;\r\n\r\n    margin-top: 3px;\r\n\r\n    font-family: \"Noto Serif\", Georgia, serif;\r\n\r\n    font-size: 13px;\r\n\r\n    color: #416d82;\r\n\r\n    transition:\r\n        color 0.2s ease,\r\n        transform 0.2s ease;\r\n}\r\n\r\n\r\n.main-section-link:hover .publication-link {\r\n    color: #203f50;\r\n\r\n    transform: translateX(3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COLLABORATION SECTION\r\n   ========================================================= *\/\r\n\r\n.collaboration-section {\r\n    width: 100%;\r\n\r\n    min-width: 0;\r\n\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COLLABORATION GRID\r\n   ========================================================= *\/\r\n\r\n.collaboration-grid {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0, 1fr)\r\n        minmax(0, 1fr);\r\n\r\n    gap: 16px;\r\n\r\n    width: 100%;\r\n\r\n    margin-top: 28px;\r\n\r\n    align-items: stretch;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COLLABORATION CARD\r\n   ========================================================= *\/\r\n\r\n.collaboration-card {\r\n    width: 100%;\r\n\r\n    min-width: 0;\r\n\r\n    min-height: 190px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    background: #ffffff;\r\n\r\n    border: 1px solid #dfe7eb;\r\n\r\n    border-radius: 9px;\r\n\r\n    padding: 20px;\r\n\r\n    margin: 0;\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    align-items: flex-start;\r\n\r\n    justify-content: flex-start;\r\n\r\n    box-shadow: none;\r\n\r\n    overflow: hidden;\r\n\r\n    transition:\r\n        border-color 0.2s ease,\r\n        box-shadow 0.2s ease,\r\n        transform 0.2s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD HOVER\r\n   ========================================================= *\/\r\n\r\n.main-section-link:hover .collaboration-card {\r\n    border-color: #cbd9df;\r\n\r\n    box-shadow:\r\n        0 6px 18px rgba(40, 65, 80, 0.06);\r\n\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD LABEL\r\n   ========================================================= *\/\r\n\r\n.collaboration-label {\r\n    font-family: \"Noto Serif\", Georgia, serif !important;\r\n\r\n    font-size: 12px !important;\r\n\r\n    line-height: 1.4 !important;\r\n\r\n    letter-spacing: 0.15em !important;\r\n\r\n    text-transform: uppercase !important;\r\n\r\n    color: #71879a !important;\r\n\r\n    margin: 0 0 18px !important;\r\n\r\n    padding: 0 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD TITLE\r\n   ========================================================= *\/\r\n\r\n.collaboration-card h3 {\r\n    font-family: \"Noto Serif\", Georgia, serif !important;\r\n\r\n    font-size: 19px !important;\r\n\r\n    line-height: 1.25 !important;\r\n\r\n    font-weight: 600 !important;\r\n\r\n    letter-spacing: -0.01em;\r\n\r\n    color: #38566a !important;\r\n\r\n    margin: 0 0 14px !important;\r\n\r\n    padding: 0 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD DESCRIPTION\r\n   ========================================================= *\/\r\n\r\n.collaboration-card p:not(.collaboration-label) {\r\n    font-family: \"Noto Serif\", Georgia, serif !important;\r\n\r\n    font-size: 13px !important;\r\n\r\n    line-height: 1.55 !important;\r\n\r\n    color: #7a8998 !important;\r\n\r\n    margin: 0 !important;\r\n\r\n    padding: 0 !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD ARROW\r\n   ========================================================= *\/\r\n\r\n.collaboration-card::after {\r\n    content: \"\u2192\";\r\n\r\n    margin-top: auto;\r\n\r\n    padding-top: 15px;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    color: #416d82;\r\n\r\n    transition:\r\n        transform 0.2s ease;\r\n}\r\n\r\n\r\n.main-section-link:hover .collaboration-card::after {\r\n    transform: translateX(4px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WORDPRESS \/ ELEMENTOR OVERRIDES\r\n   ========================================================= *\/\r\n\r\n.research-publications-section .elementor-widget-container {\r\n    padding: 0 !important;\r\n\r\n    margin: 0 !important;\r\n}\r\n\r\n\r\n.research-publications-section .elementor-element {\r\n    box-shadow: none !important;\r\n}\r\n\r\n\r\n.research-publications-section p {\r\n    margin-top: 0;\r\n}\r\n\r\n\r\n.research-publications-section a {\r\n    text-decoration: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .research-publications-section {\r\n        padding: 35px 5%;\r\n    }\r\n\r\n\r\n    .research-publications-layout {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 50px;\r\n    }\r\n\r\n\r\n    .collaboration-grid {\r\n        grid-template-columns:\r\n            minmax(0, 1fr)\r\n            minmax(0, 1fr);\r\n\r\n        gap: 16px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .research-publications-section {\r\n        padding: 30px 5%;\r\n    }\r\n\r\n\r\n    .research-publications-layout {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 40px;\r\n    }\r\n\r\n\r\n    .research-publications-section h2 {\r\n        font-size: 25px !important;\r\n    }\r\n\r\n\r\n    .research-section-intro {\r\n        font-size: 13px !important;\r\n\r\n        margin-bottom: 24px !important;\r\n    }\r\n\r\n\r\n    .publication-title {\r\n        font-size: 14px !important;\r\n    }\r\n\r\n\r\n    .publication-meta {\r\n        font-size: 12px !important;\r\n    }\r\n\r\n\r\n    .publication-link {\r\n        font-size: 12px;\r\n    }\r\n\r\n\r\n    .collaboration-grid {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 14px;\r\n\r\n        margin-top: 24px;\r\n    }\r\n\r\n\r\n    .collaboration-card {\r\n        min-height: auto;\r\n\r\n        padding: 18px;\r\n    }\r\n\r\n\r\n    .collaboration-label {\r\n        font-size: 11px !important;\r\n    }\r\n\r\n\r\n    .collaboration-card h3 {\r\n        font-size: 18px !important;\r\n    }\r\n\r\n\r\n    .collaboration-card p:not(.collaboration-label) {\r\n        font-size: 12px !important;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     SECTION\r\n     ========================================================= -->\r\n\r\n<section class=\"research-publications-section\">\r\n\r\n    <div class=\"research-publications-layout\">\r\n\r\n\r\n        <!-- =================================================\r\n             SELECTED PUBLICATIONS\r\n             ENTIRE SECTION IS CLICKABLE\r\n             ================================================= -->\r\n\r\n        <a\r\n            class=\"main-section-link\"\r\n            href=\"\/publications\/\"\r\n            aria-label=\"View selected publications\"\r\n        >\r\n\r\n            <div class=\"publications-column\">\r\n\r\n                <h2>\r\n                    Selected publications\r\n                <\/h2>\r\n\r\n\r\n                <p class=\"research-section-intro\">\r\n\r\n                    Recent peer-reviewed publications\r\n\r\n                    <span class=\"section-arrow\">\r\n                        \u2192\r\n                    <\/span>\r\n\r\n                <\/p>\r\n\r\n\r\n                <div class=\"publications-list\">\r\n\r\n\r\n                    <!-- PUBLICATION 1 -->\r\n\r\n                    <article class=\"publication-item\">\r\n\r\n                        <h3 class=\"publication-title\">\r\n\r\n                            Synthesis of ventilator dyssynchrony\r\n                            waveforms using a hybrid generative\r\n                            model and a lung model.\r\n\r\n                        <\/h3>\r\n\r\n\r\n                        <p class=\"publication-meta\">\r\n\r\n                            Biomedical Signal Processing and Control, 2026.\r\n\r\n                            <br>\r\n\r\n                            <span class=\"publication-link\">\r\n                                View publication \u2192\r\n                            <\/span>\r\n\r\n                        <\/p>\r\n\r\n                    <\/article>\r\n\r\n\r\n                    <!-- PUBLICATION 2 -->\r\n\r\n                    <article class=\"publication-item\">\r\n\r\n                        <h3 class=\"publication-title\">\r\n\r\n                            Quantifiable identification of flow-limited\r\n                            ventilator dyssynchrony with the deformed\r\n                            lung ventilator model.\r\n\r\n                        <\/h3>\r\n\r\n\r\n                        <p class=\"publication-meta\">\r\n\r\n                            Computers in Biology and Medicine, 2024.\r\n\r\n                            <br>\r\n\r\n                            <span class=\"publication-link\">\r\n                                View publication \u2192\r\n                            <\/span>\r\n\r\n                        <\/p>\r\n\r\n                    <\/article>\r\n\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/a>\r\n\r\n\r\n        <!-- =================================================\r\n             CLINICAL + ACADEMIC COLLABORATION\r\n             ENTIRE SECTION IS CLICKABLE\r\n             ================================================= -->\r\n\r\n        <a\r\n            class=\"main-section-link\"\r\n            href=\"\/collaboration\/\"\r\n            aria-label=\"View clinical and academic collaboration\"\r\n        >\r\n\r\n            <div class=\"collaboration-section\">\r\n\r\n\r\n                <h2>\r\n\r\n                    Clinical and academic\r\n                    collaboration\r\n\r\n                <\/h2>\r\n\r\n\r\n                <p class=\"research-section-intro\">\r\n\r\n                    We work with hospitals and academic groups to formulate\r\n                    clinically relevant questions, develop reliable methods\r\n                    and evaluate translational potential.\r\n\r\n                    <span class=\"section-arrow\">\r\n                        \u2192\r\n                    <\/span>\r\n\r\n                <\/p>\r\n\r\n\r\n                <div class=\"collaboration-grid\">\r\n\r\n\r\n                    <!-- =================================================\r\n                         CLINICAL PARTNERS\r\n                         ================================================= -->\r\n\r\n                    <div class=\"collaboration-card\">\r\n\r\n                        <p class=\"collaboration-label\">\r\n                            Clinical partners\r\n                        <\/p>\r\n\r\n\r\n                        <h3>\r\n\r\n                            AIIMS and\r\n                            partner hospitals\r\n\r\n                        <\/h3>\r\n\r\n\r\n                        <p>\r\n\r\n                            Collaborations connecting research\r\n                            methods with clinically relevant\r\n                            problems and real-world biomedical data.\r\n\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- =================================================\r\n                         ACADEMIC PARTNERS\r\n                         ================================================= -->\r\n\r\n                    <div class=\"collaboration-card\">\r\n\r\n                        <p class=\"collaboration-label\">\r\n                            Academic partners\r\n                        <\/p>\r\n\r\n\r\n                        <h3>\r\n\r\n                            Interdisciplinary\r\n                            research\r\n\r\n                        <\/h3>\r\n\r\n\r\n                        <p>\r\n\r\n                            Partnerships connecting biomedical\r\n                            engineering, clinical medicine,\r\n                            data science and biology.\r\n\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/a>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e3c2a6 e-con e-atomic-element e-flexbox-base e-default-div e-68dc9e6 \" data-id=\"3e3c2a6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3e3c2a6\">\n    \t\t<div class=\"elementor-element elementor-element-279fc39 elementor-widget elementor-widget-html\" data-id=\"279fc39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif:wght@400;500;600;700&display=swap');\r\n\r\n\r\n\/* =====================================================\r\n   WORK WITH US\r\n===================================================== *\/\r\n\r\n.work-section {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 1400px;\r\n    min-height: 300px;\r\n\r\n    margin: 0 auto;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 18px;\r\n\r\n    background:\r\n        radial-gradient(circle at 85% 20%, rgba(94, 198, 218, 0.18), transparent 30%),\r\n        radial-gradient(circle at 15% 90%, rgba(105, 210, 220, 0.14), transparent 32%),\r\n        linear-gradient(135deg, #f2fafd 0%, #e6f5fa 50%, #f8fcfd 100%);\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    box-shadow: 0 8px 30px rgba(45, 100, 130, 0.08);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ABSTRACT BACKGROUND\r\n===================================================== *\/\r\n\r\n.work-background {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    pointer-events: none;\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* Large circles *\/\r\n\r\n.work-background::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 420px;\r\n    height: 420px;\r\n\r\n    right: -140px;\r\n    top: -180px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(40, 112, 132, 0.12);\r\n\r\n    box-shadow:\r\n        0 0 0 35px rgba(40, 112, 132, 0.035),\r\n        0 0 0 75px rgba(40, 112, 132, 0.025);\r\n\r\n    animation: orbitFloat 12s ease-in-out infinite;\r\n}\r\n\r\n\r\n.work-background::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 300px;\r\n    height: 300px;\r\n\r\n    left: -130px;\r\n    bottom: -170px;\r\n\r\n    border-radius: 50%;\r\n\r\n    border: 1px solid rgba(40, 112, 132, 0.10);\r\n\r\n    box-shadow:\r\n        0 0 0 30px rgba(40, 112, 132, 0.03),\r\n        0 0 0 65px rgba(40, 112, 132, 0.02);\r\n\r\n    animation: orbitFloatReverse 10s ease-in-out infinite;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOLECULAR NETWORK\r\n===================================================== *\/\r\n\r\n.work-network {\r\n    position: absolute;\r\n\r\n    right: 7%;\r\n    top: 25%;\r\n\r\n    width: 350px;\r\n    height: 200px;\r\n\r\n    opacity: 0.45;\r\n}\r\n\r\n\r\n\/* Connecting lines *\/\r\n\r\n.work-network::before,\r\n.work-network::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    background: rgba(40, 112, 132, 0.22);\r\n\r\n    transform-origin: left center;\r\n}\r\n\r\n\r\n.work-network::before {\r\n    width: 220px;\r\n    height: 1px;\r\n\r\n    left: 25px;\r\n    top: 75px;\r\n\r\n    transform: rotate(18deg);\r\n}\r\n\r\n\r\n.work-network::after {\r\n    width: 190px;\r\n    height: 1px;\r\n\r\n    left: 90px;\r\n    top: 120px;\r\n\r\n    transform: rotate(-25deg);\r\n}\r\n\r\n\r\n\/* Nodes *\/\r\n\r\n.work-node {\r\n    position: absolute;\r\n\r\n    width: 13px;\r\n    height: 13px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #65c9d8;\r\n\r\n    box-shadow:\r\n        0 0 0 6px rgba(101, 201, 216, 0.10);\r\n\r\n    animation: nodePulse 4s ease-in-out infinite;\r\n}\r\n\r\n\r\n.work-node:nth-child(1) {\r\n    left: 20px;\r\n    top: 65px;\r\n}\r\n\r\n.work-node:nth-child(2) {\r\n    left: 125px;\r\n    top: 100px;\r\n    animation-delay: 0.8s;\r\n}\r\n\r\n.work-node:nth-child(3) {\r\n    left: 220px;\r\n    top: 55px;\r\n    animation-delay: 1.5s;\r\n}\r\n\r\n.work-node:nth-child(4) {\r\n    left: 285px;\r\n    top: 135px;\r\n    animation-delay: 2.2s;\r\n}\r\n\r\n.work-node:nth-child(5) {\r\n    left: 175px;\r\n    top: 160px;\r\n    animation-delay: 1.1s;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   DNA-LIKE DECORATIVE CURVE\r\n===================================================== *\/\r\n\r\n.work-dna {\r\n    position: absolute;\r\n\r\n    right: 15%;\r\n    top: 15%;\r\n\r\n    width: 100px;\r\n    height: 250px;\r\n\r\n    opacity: 0.12;\r\n\r\n    transform: rotate(15deg);\r\n}\r\n\r\n\r\n.work-dna::before,\r\n.work-dna::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    border: 2px solid #287084;\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n\r\n.work-dna::before {\r\n    left: -20px;\r\n}\r\n\r\n\r\n.work-dna::after {\r\n    left: 20px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENT\r\n===================================================== *\/\r\n\r\n.work-content {\r\n    position: relative;\r\n\r\n    z-index: 5;\r\n\r\n    max-width: 900px;\r\n\r\n    padding: 48px 55px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LABEL\r\n===================================================== *\/\r\n\r\n.work-label {\r\n    margin: 0 0 10px 0;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 3px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    color: #287084;\r\n\r\n    opacity: 0;\r\n\r\n    animation: workFadeUp 0.8s ease forwards;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MAIN HEADING\r\n===================================================== *\/\r\n\r\n.work-title {\r\n    margin: 0 0 18px 0;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    font-size: 48px;\r\n\r\n    line-height: 1.15;\r\n\r\n    font-weight: 600;\r\n\r\n    color: #003B5C;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(25px);\r\n\r\n    animation: workFadeUp 0.9s ease forwards;\r\n\r\n    animation-delay: 0.15s;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   DESCRIPTION\r\n===================================================== *\/\r\n\r\n.work-description {\r\n    max-width: 820px;\r\n\r\n    margin: 0;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    font-size: 18px;\r\n\r\n    line-height: 1.7;\r\n\r\n    color: #596D85;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(20px);\r\n\r\n    animation: workFadeUp 0.9s ease forwards;\r\n\r\n    animation-delay: 0.35s;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BUTTON\r\n===================================================== *\/\r\n\r\n.work-button {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    margin-top: 28px;\r\n\r\n    padding: 13px 27px;\r\n\r\n    border-radius: 30px;\r\n\r\n    background: #69D2DC;\r\n\r\n    color: #073B4C;\r\n\r\n    font-family: 'Noto Serif', serif;\r\n\r\n    font-size: 15px;\r\n\r\n    font-weight: 700;\r\n\r\n    text-decoration: none !important;\r\n\r\n    transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        background 0.3s ease;\r\n\r\n    opacity: 0;\r\n\r\n    animation: workFadeUp 0.9s ease forwards;\r\n\r\n    animation-delay: 0.55s;\r\n}\r\n\r\n\r\n.work-button:hover {\r\n    transform: translateY(-4px);\r\n\r\n    background: #58C7D7;\r\n\r\n    box-shadow:\r\n        0 10px 25px rgba(57, 163, 181, 0.25);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ANIMATIONS\r\n===================================================== *\/\r\n\r\n@keyframes workFadeUp {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(25px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes nodePulse {\r\n\r\n    0%, 100% {\r\n        transform: scale(1);\r\n        opacity: 0.7;\r\n    }\r\n\r\n    50% {\r\n        transform: scale(1.4);\r\n        opacity: 1;\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes orbitFloat {\r\n\r\n    0%, 100% {\r\n        transform: translate(0, 0) rotate(0deg);\r\n    }\r\n\r\n    50% {\r\n        transform: translate(-15px, 15px) rotate(8deg);\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes orbitFloatReverse {\r\n\r\n    0%, 100% {\r\n        transform: translate(0, 0);\r\n    }\r\n\r\n    50% {\r\n        transform: translate(15px, -10px);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .work-content {\r\n        padding: 42px;\r\n    }\r\n\r\n    .work-title {\r\n        font-size: 40px;\r\n    }\r\n\r\n    .work-network {\r\n        right: -40px;\r\n        opacity: 0.25;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .work-section {\r\n        min-height: 360px;\r\n\r\n        border-radius: 14px;\r\n    }\r\n\r\n    .work-content {\r\n        padding: 38px 25px;\r\n    }\r\n\r\n    .work-label {\r\n        font-size: 11px;\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    .work-title {\r\n        font-size: 34px;\r\n    }\r\n\r\n    .work-description {\r\n        font-size: 16px;\r\n        line-height: 1.65;\r\n    }\r\n\r\n    .work-network {\r\n        right: -100px;\r\n        top: 10px;\r\n        opacity: 0.15;\r\n    }\r\n\r\n    .work-dna {\r\n        right: -10px;\r\n        opacity: 0.08;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =====================================================\r\n     WORK WITH US SECTION\r\n===================================================== -->\r\n\r\n<section class=\"work-section\">\r\n\r\n    <!-- Abstract background -->\r\n    <div class=\"work-background\"><\/div>\r\n\r\n\r\n    <!-- Molecular network -->\r\n    <div class=\"work-network\">\r\n\r\n        <span class=\"work-node\"><\/span>\r\n        <span class=\"work-node\"><\/span>\r\n        <span class=\"work-node\"><\/span>\r\n        <span class=\"work-node\"><\/span>\r\n        <span class=\"work-node\"><\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- DNA-like graphic -->\r\n    <div class=\"work-dna\"><\/div>\r\n\r\n\r\n    <!-- Content -->\r\n    <div class=\"work-content\">\r\n\r\n        <p class=\"work-label\">\r\n            Opportunities\r\n        <\/p>\r\n\r\n        <h2 class=\"work-title\">\r\n            Work with us\r\n        <\/h2>\r\n\r\n        <p class=\"work-description\">\r\n            We welcome motivated researchers who want to solve\r\n            healthcare problems through computation, engineering\r\n            and biology.\r\n        <\/p>\r\n\r\n        <a href=https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/positions_draft\/ class=\"work-button\">\r\n            View current positions \u2192\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Computational Medicine and Technology Lab Computational Medicine and Technology At CMT Lab, we bring together engineering, biology, and medicine to explore how the human body works. We work on research problems that connect scientific ideas with real-world healthcare. Explore our research \u2192 Join the lab \u2192 The people, ideas, and research behind our work Our [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9188","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/pages\/9188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/comments?post=9188"}],"version-history":[{"count":62,"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/pages\/9188\/revisions"}],"predecessor-version":[{"id":9622,"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/pages\/9188\/revisions\/9622"}],"wp:attachment":[{"href":"https:\/\/www.bio.iitb.ac.in\/~dkagrawal\/wp-json\/wp\/v2\/media?parent=9188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}