{"id":58636,"date":"2025-12-10T21:33:12","date_gmt":"2025-12-10T16:03:12","guid":{"rendered":"https:\/\/doms.iitm.ac.in\/wordpress\/?page_id=58636"},"modified":"2026-03-06T11:16:26","modified_gmt":"2026-03-06T05:46:26","slug":"events-and-happennings","status":"publish","type":"page","link":"https:\/\/doms.iitm.ac.in\/index.php\/knowledge-doms\/events-and-happennings\/","title":{"rendered":"EventsandActivities"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"58636\" class=\"elementor elementor-58636\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71dc0e2 e-con-full e-flex e-con e-parent\" data-id=\"71dc0e2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c609aa7 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"c609aa7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<div id=\"doms-hero-v4-root\" class=\"doms-hero-v4-root\">\n    <style>\n        \/* ========================================\n        1. ISOLATION & VARIABLES\n        ======================================== *\/\n        .doms-hero-v4-root {\n            \/* Palette *\/\n            --d4-maroon: #6f1a1d;\n            --d4-maroon-dark: #3a0b0d;\n            --d4-gold: #D4AF37;\n            --d4-white: #ffffff;\n            --d4-black-panel: rgba(12, 12, 12, 0.2); \/* Almost solid for max contrast *\/\n            \n            \/* Fonts *\/\n            --font-serif: 'Playfair Display', Georgia, serif; \n            --font-sans: 'Inter', Helvetica, Arial, sans-serif;\n\n            \/* Reset *\/\n            box-sizing: border-box;\n            width: 100%;\n            margin: 0;\n            padding: 0;\n            position: relative;\n            background-color: var(--d4-maroon-dark);\n            font-family: var(--font-sans);\n            overflow: hidden;\n        }\n\n        .doms-hero-v4-root * { box-sizing: border-box; }\n\n        \/* ========================================\n        2. LAYOUT & BACKGROUND\n        ======================================== *\/\n        .doms-v4-container {\n            position: relative;\n            width: 100%;\n            height: 85vh; \n            min-height: 550px;\n            max-height: 950px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        \/* Image Layer *\/\n        .doms-v4-bg-layer {\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            z-index: 1;\n        }\n\n        .doms-v4-img {\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            object-fit: cover;\n            opacity: 0;\n            transform: scale(1.1);\n            transition: opacity 1s ease-in-out, transform 8s ease-out;\n            filter: none !important;\n        }\n\n        .doms-v4-img.active {\n            opacity: 1;\n            transform: scale(1);\n            z-index: 2;\n        }\n\n        \/* Overlay - Master Darken *\/\n        .doms-v4-overlay {\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            background: rgba(0,0,0,0.1); \/* General dimming *\/\n            z-index: 3;\n        }\n\n        \/* ========================================\n        3. ARTISTIC BACKGROUND TEXT\n        ======================================== *\/\n        .doms-v4-art-text {\n            position: absolute;\n            top: 15%;\n            left: 50%;\n            transform: translateX(-50%);\n            text-align: center;\n            width: 100%;\n            z-index: 4;\n            pointer-events: none;\n            \/*mix-blend-mode: overlay; *\/\n            \/* Blends nicely with images *\/\n        }\n\n        .doms-v4-art-big {\n            display: block;\n            font-size: 10rem;\n            font-weight: 900;\n            line-height: 0.8;\n            \/*color: rgba(255,255,255,0.99);*\/\n            color:#D6A64F !important;\n            letter-spacing: 15px;\n            text-transform: uppercase;\n        }\n\n        .doms-v4-art-script {\n            display: block;\n            font-family: var(--font-serif);\n            font-size: 3.5rem;\n            color: white;\n            font-style: italic;\n            margin-top: -40px;\n            opacity: 0.8;\n        }\n\n        \/* ========================================\n        4. TEXT CONTENT PANEL (High Contrast)\n        ======================================== *\/\n        .doms-v4-content-wrapper {\n            position: relative;\n            z-index: 10;\n            width: 100%;\n            max-width: 900px;\n            padding: 0 10px;\n            display: flex;\n            justify-content: center;\n            margin-top: 40px; \/* Slight offset from top *\/\n        }\n\n        .doms-v4-text-panel {\n            background: var(--d4-black-panel);\n            backdrop-filter: blur(8px);\n            -webkit-backdrop-filter: blur(8px);\n            padding: 10px 10px;\n            border-top: 4px solid var(--d4-gold); \/* Elegant top accent *\/\n            box-shadow: 0 25px 50px rgba(0,0,0,0.7);\n            text-align: center;\n            border-radius: 4px;\n            \n            \/* Animation States *\/\n            display: none;\n            opacity: 0;\n            transform: translateY(20px);\n        }\n\n        .doms-v4-text-panel.active {\n            display: block;\n            animation: domsFadeUpV4 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\n        }\n\n        @keyframes domsFadeUpV4 {\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .doms-v4-heading {\n            font-family: var(--font-serif);\n            font-size: 3rem;\n            color: #FFB7B !important;\n            margin: 0 0 20px 0;\n            line-height: 1.1;\n            font-weight: 700; \/* Classy serif weight *\/\n        }\n\n        \/* Gold Divider Line *\/\n        .doms-v4-divider {\n            width: 60px;\n            height: 2px;\n            background: var(--d4-gold);\n            margin: 0 auto 2px auto;\n        }\n\n        .doms-v4-desc {\n            font-size: 1.1rem;\n            color: #eeeeee; \/* Near white for readability *\/\n            font-weight: 300;\n            line-height: 0.6;\n            margin: 0;\n        }\n\n        \/* ========================================\n        5. BOTTOM NAVIGATION\n        ======================================== *\/\n        .doms-v4-nav {\n            position: absolute;\n            bottom: 0; left: 0; width: 100%;\n            height: 90px;\n            background: rgba(15, 15, 15, 0.95);\n            border-top: 1px solid rgba(255,255,255,0.1);\n            display: flex;\n            z-index: 20;\n        }\n\n        .doms-v4-nav-item {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            padding: 0 30px;\n            cursor: pointer;\n            border-right: 1px solid rgba(255,255,255,0.05);\n            transition: background 0.3s;\n            position: relative;\n        }\n\n        .doms-v4-nav-item:hover { background: rgba(255,255,255,0.05); }\n        .doms-v4-nav-item.active { background: rgba(212, 175, 55, 0.1); }\n\n        \/* Timer Bar *\/\n        .doms-v4-timer {\n            position: absolute; top: 0; left: 0; height: 3px;\n            background: var(--d4-gold); width: 0%;\n        }\n        .doms-v4-nav-item.active .doms-v4-timer {\n            width: 100%;\n            transition: width 5s linear; \/* 5s Slide duration *\/\n        }\n        .doms-v4-nav-item:not(.active) .doms-v4-timer { transition: none; width: 0; }\n\n        .doms-v4-nav-date { font-size: 0.75rem; color: var(--d4-gold); text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; }\n        .doms-v4-nav-title { font-size: 0.95rem; color: var(--d4-white); font-weight: 500; }\n\n        \/* ========================================\n        6. MOBILE RESPONSIVENESS\n        ======================================== *\/\n        @media (max-width: 1024px) {\n            .doms-v4-art-big { font-size: 6rem; }\n            .doms-v4-heading { font-size: 2.5rem; }\n        }\n\n        @media (max-width: 768px) {\n            .doms-v4-container { height: 80vh; min-height: 500px; }\n\n            \/* Fix 1: Shrink Background Art so it doesn't overlap text *\/\n            .doms-v4-art-text { top: 8%; opacity: 0.5; }\n            .doms-v4-art-big { font-size: 3rem; letter-spacing: 5px; }\n            .doms-v4-art-script { font-size: 1.8rem; margin-top: -15px; }\n\n            \/* Fix 2: Text Panel fits mobile width *\/\n            .doms-v4-content-wrapper { padding: 0 15px; margin-top: 40px; }\n            .doms-v4-text-panel { \n                padding: 30px 20px; \n                width: 100%; \n                border-top: 3px solid var(--d4-gold);\n            }\n\n            .doms-v4-heading { font-size: 2rem; margin-bottom: 15px; }\n            .doms-v4-desc { font-size: 1rem; line-height: 1.5; }\n\n            \/* Fix 3: Nav Bar scrollable *\/\n            .doms-v4-nav { overflow-x: auto; justify-content: flex-start; }\n            .doms-v4-nav-item { min-width: 160px; padding: 0 20px; }\n        }\n    <\/style>\n\n    <div class=\"doms-v4-container\">\n\n        <div class=\"doms-v4-art-text\">\n            <span class=\"doms-v4-art-big\">EVENTS<\/span>\n            <span class=\"doms-v4-art-script\">& Activities<\/span>\n        <\/div>\n\n        <div class=\"doms-v4-bg-layer\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/1762737752653.jpg\" class=\"doms-v4-img active lazyload\" alt=\"Samanvay\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1202;\">\n            <!--<img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00274-e1770194868865.jpg\" class=\"doms-v4-img lazyload\" alt=\"Guest Lecture\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/804;\">-->\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/1A5A9104-scaled-e1769530081676.jpg\" class=\"doms-v4-img lazyload\" alt=\"Investiture\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/773;\">\n        <\/div>\n\n        <div class=\"doms-v4-overlay\"><\/div>\n\n        <div class=\"doms-v4-content-wrapper\">\n            \n            <div class=\"doms-v4-text-panel active\">\n                <h2 class=\"doms-v4-heading\">Samanvay 2026<\/h2>\n                <div class=\"doms-v4-divider\"><\/div>\n                <!--<p class=\"doms-v4-desc\">-->\n                <!--    India's premier B-School fest. Where data meets strategy and innovation takes center stage.-->\n                <!--<\/p>-->\n            <\/div>\n\n            <div class=\"doms-v4-text-panel\">\n                <h2 class=\"doms-v4-heading\">Corporate Wisdom<\/h2>\n                <div class=\"doms-v4-divider\"><\/div>\n                <!--<p class=\"doms-v4-desc\">-->\n                <!--    Weekly insights from Fortune 500 CXOs. Bridging the gap between theory and industry practice.-->\n                <!--<\/p>-->\n            <\/div>\n\n            <div class=\"doms-v4-text-panel\">\n                <h2 class=\"doms-v4-heading\">Convocation<\/h2>\n                <div class=\"doms-v4-divider\"><\/div>\n                <!--<p class=\"doms-v4-desc\">-->\n                <!--    Celebrating leadership. Welcoming the new Student Council torchbearers of DoMS IIT Madras.-->\n                <!--<\/p>-->\n            <\/div>\n\n        <\/div>\n\n        <div class=\"doms-v4-nav\">\n            <div class=\"doms-v4-nav-item active\" onclick=\"changeSlideV4(0)\">\n                <div class=\"doms-v4-timer\"><\/div>\n                <!--<div class=\"doms-v4-nav-date\">Oct 24-26<\/div>-->\n                <div class=\"doms-v4-nav-title\">Samanvay Fest<\/div>\n            <\/div>\n            <!--<div class=\"doms-v4-nav-item\" onclick=\"changeSlideV4(1)\">-->\n            <!--    <div class=\"doms-v4-timer\"><\/div>-->\n            <!--    <div class=\"doms-v4-nav-date\">Wednesdays<\/div>-->\n            <!--    <div class=\"doms-v4-nav-title\">Guest Lectures<\/div>-->\n            <!--<\/div>-->\n            <div class=\"doms-v4-nav-item\" onclick=\"changeSlideV4(2)\">\n                <div class=\"doms-v4-timer\"><\/div>\n                <!--<div class=\"doms-v4-nav-date\">August 15<\/div>-->\n                <div class=\"doms-v4-nav-title\">Investiture<\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script>\n        (function() {\n            const root = document.getElementById('doms-hero-v4-root');\n            const images = root.querySelectorAll('.doms-v4-img');\n            const panels = root.querySelectorAll('.doms-v4-text-panel');\n            const navItems = root.querySelectorAll('.doms-v4-nav-item');\n            \n            let currentIndex = 0;\n            const totalSlides = images.length;\n            let slideInterval;\n\n            window.changeSlideV4 = function(index) {\n                \/\/ Reset Active classes\n                images.forEach(img => img.classList.remove('active'));\n                panels.forEach(p => p.classList.remove('active'));\n                navItems.forEach(nav => nav.classList.remove('active'));\n\n                \/\/ Set New Active\n                images[index].classList.add('active');\n                panels[index].classList.add('active');\n                navItems[index].classList.add('active');\n\n                currentIndex = index;\n                resetTimer();\n            }\n\n            function nextSlide() {\n                let nextIndex = (currentIndex + 1) % totalSlides;\n                changeSlideV4(nextIndex);\n            }\n\n            function startTimer() {\n                slideInterval = setInterval(nextSlide, 5000); \/\/ 5 Seconds\n            }\n\n            function resetTimer() {\n                clearInterval(slideInterval);\n                startTimer();\n            }\n\n            \/\/ Init\n            startTimer();\n        })();\n    <\/script>\n<\/div>\n\n\n\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-27cfe93 e-con-full e-flex e-con e-parent\" data-id=\"27cfe93\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-667bc47 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"667bc47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"doms-iitm-stats-section-root\" class=\"doms-iitm-stats-section-root\">\r\n    <style>\r\n        \/* ========================================\r\n        1. SCOPED CSS VARIABLES & RESET\r\n        ======================================== *\/\r\n        .doms-iitm-stats-section-root {\r\n            \/* Palette *\/\r\n            --stats-maroon-deep: #893F45;\r\n            --stats-maroon-mid: #6f1a1d;\r\n            --stats-gold-primary: #D4AF37;\r\n            --stats-gold-light: #f3e5ab;\r\n            --stats-white: #ffffff;\r\n            --stats-grey-light: #f4f4f4;\r\n            --stats-grey-text: #cccccc;\r\n            \r\n            \/* Typography *\/\r\n            --stats-font-serif: 'Playfair Display', Georgia, serif; \r\n            --stats-font-sans: 'Inter', Helvetica, Arial, sans-serif;\r\n\r\n            \/* Spacing *\/\r\n            --stats-container-padding: 80px 5%;\r\n            \r\n            \/* Reset *\/\r\n            box-sizing: border-box;\r\n            width: 100%;\r\n            position: relative;\r\n            background-color: var(--stats-maroon-deep);\r\n            font-family: var(--stats-font-sans);\r\n            line-height: 1.5;\r\n            overflow: hidden; \/* Prevent horizontal scroll *\/\r\n        }\r\n\r\n        .doms-iitm-stats-section-root *,\r\n        .doms-iitm-stats-section-root *::before,\r\n        .doms-iitm-stats-section-root *::after {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        \/* ========================================\r\n        2. BACKGROUND & TEXTURE\r\n        ======================================== *\/\r\n        \/* Geometric Pattern Overlay *\/\r\n        .doms-stats-bg-pattern {\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            opacity: 0.05;\r\n            background-image: linear-gradient(30deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),\r\n            linear-gradient(150deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),\r\n            linear-gradient(30deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),\r\n            linear-gradient(150deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),\r\n            linear-gradient(60deg, #aa2222 25%, transparent 25.5%, transparent 75%, #aa2222 75%, #aa2222),\r\n            linear-gradient(60deg, #aa2222 25%, transparent 25.5%, transparent 75%, #aa2222 75%, #aa2222);\r\n            background-size: 80px 140px;\r\n            background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Vignette Overlay *\/\r\n        .doms-stats-bg-gradient {\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: radial-gradient(circle at center, transparent 0%, var(--stats-maroon-deep) 90%);\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* ========================================\r\n        3. MAIN GRID LAYOUT\r\n        ======================================== *\/\r\n        .doms-stats-content-grid {\r\n            position: relative;\r\n            z-index: 10;\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr; \/* Split Layout *\/\r\n            gap: 60px;\r\n            max-width: 1300px;\r\n            margin: 0 auto;\r\n            padding: var(--stats-container-padding);\r\n            align-items: center;\r\n        }\r\n\r\n        \/* ========================================\r\n        4. LEFT COLUMN: EDITORIAL CONTEXT\r\n        ======================================== *\/\r\n        .doms-stats-editorial-col {\r\n            padding-right: 20px;\r\n        }\r\n\r\n        .doms-stats-eyebrow {\r\n            display: inline-block;\r\n            font-size: 0.85rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            color: var(--stats-gold-primary);\r\n            margin-bottom: 15px;\r\n            border-bottom: 1px solid var(--stats-gold-primary);\r\n            padding-bottom: 5px;\r\n        }\r\n\r\n        .doms-stats-headline {\r\n            font-family: var(--stats-font-serif);\r\n            font-size: 4rem;\r\n            font-weight: 700 !important;\r\n            color: var(--stats-white);\r\n            margin-bottom: 25px;\r\n            line-height: 1.1;\r\n        }\r\n\r\n        .doms-stats-headline span {\r\n            color: var(--stats-gold-primary);\r\n            font-style: italic;\r\n        }\r\n\r\n        .doms-stats-description {\r\n            font-size: 1.05rem;\r\n            color: var(--stats-grey-text);\r\n            margin-bottom: 40px;\r\n            max-width: 500px;\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* Visual Image Block (Floating) *\/\r\n        .doms-stats-visual-block-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 300px;\r\n            border-radius: 8px;\r\n            overflow: hidden;\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n            border: 1px solid rgba(255,255,255,0.1);\r\n        }\r\n\r\n        .doms-stats-visual-img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            transition: transform 10s ease;\r\n        }\r\n\r\n        \/* Subtle Pan Animation on Image *\/\r\n        .doms-stats-visual-block-wrapper:hover .doms-stats-visual-img {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        \/* ========================================\r\n        5. RIGHT COLUMN: STATS GRID\r\n        ======================================== *\/\r\n        .doms-stats-numbers-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 30px;\r\n        }\r\n\r\n        .doms-stats-card {\r\n            background: rgba(255, 255, 255, 0.03); \/* Glass effect *\/\r\n            backdrop-filter: blur(10px);\r\n            -webkit-backdrop-filter: blur(10px);\r\n            padding: 35px 25px;\r\n            border: 1px solid rgba(212, 175, 55, 0.15); \/* Subtle Gold Border *\/\r\n            border-radius: 4px;\r\n            text-align: center;\r\n            transition: all 0.4s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Hover Effect: Lift & Glow *\/\r\n        .doms-stats-card:hover {\r\n            transform: translateY(-5px);\r\n            background: rgba(255, 255, 255, 0.06);\r\n            border-color: var(--stats-gold-primary);\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n        }\r\n\r\n        \/* Gold Corner Accent *\/\r\n        .doms-stats-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: 0;\r\n            width: 0; height: 2px;\r\n            background: var(--stats-gold-primary);\r\n            transition: width 0.4s ease;\r\n        }\r\n        .doms-stats-card:hover::before { width: 100%; }\r\n\r\n        .doms-stats-number-wrapper {\r\n            font-family: var(--stats-font-serif);\r\n            font-size: 3.5rem;\r\n            font-weight: 700;\r\n            line-height: 1;\r\n            margin-bottom: 10px;\r\n            \/* Gradient Text Effect *\/\r\n            background: linear-gradient(135deg, var(--stats-gold-light), var(--stats-gold-primary));\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            display: inline-block;\r\n        }\r\n        \r\n        \/* Fallback for symbol *\/\r\n        .doms-stats-symbol {\r\n            color: var(--stats-gold-primary); \/* Ensure symbol is visible if gradient fails *\/\r\n            -webkit-text-fill-color: var(--stats-gold-primary);\r\n        }\r\n\r\n        .doms-stats-label {\r\n            font-size: 0.9rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            color: var(--stats-white);\r\n            font-weight: 600;\r\n        }\r\n\r\n        .doms-stats-sublabel {\r\n            font-size: 0.75rem;\r\n            color: var(--stats-grey-text);\r\n            margin-top: 5px;\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* ========================================\r\n        6. RESPONSIVE DESIGN\r\n        ======================================== *\/\r\n        \r\n        \/* Tablet Portrait *\/\r\n        @media (max-width: 1024px) {\r\n            .doms-stats-headline { font-size: 2.5rem; }\r\n            .doms-stats-content-grid { gap: 40px; padding: 60px 5%; }\r\n            .doms-stats-number-wrapper { font-size: 3rem; }\r\n        }\r\n\r\n        \/* Mobile Layout *\/\r\n        @media (max-width: 768px) {\r\n            .doms-stats-content-grid {\r\n                grid-template-columns: 1fr; \/* Stacked Layout *\/\r\n                gap: 40px;\r\n                padding: 50px 20px;\r\n            }\r\n\r\n            .doms-stats-editorial-col {\r\n                padding-right: 0;\r\n                text-align: center; \/* Center align intro for mobile *\/\r\n            }\r\n\r\n            .doms-stats-headline {\r\n                font-size: 2rem; \r\n                margin-left: auto; margin-right: auto;\r\n            }\r\n            \r\n            .doms-stats-description {\r\n                margin-left: auto; margin-right: auto;\r\n                font-size: 0.95rem;\r\n            }\r\n\r\n            .doms-stats-visual-block-wrapper {\r\n                height: 200px; \/* Smaller image on mobile *\/\r\n                margin-bottom: 20px;\r\n            }\r\n\r\n            \/* Stats Grid on Mobile *\/\r\n            .doms-stats-numbers-grid {\r\n                grid-template-columns: repeat(2, 1fr); \/* Keep 2x2 for compactness *\/\r\n                gap: 15px;\r\n            }\r\n\r\n            .doms-stats-card {\r\n                padding: 20px 10px;\r\n            }\r\n\r\n            .doms-stats-number-wrapper {\r\n                font-size: 2.2rem; \/* Adjusted for small screens *\/\r\n            }\r\n\r\n            .doms-stats-label {\r\n                font-size: 0.75rem;\r\n            }\r\n            \r\n            .doms-stats-sublabel {\r\n                display: none; \/* Hide sublabel on very small screens to save space *\/\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <!--<div class=\"doms-stats-bg-pattern\"><\/div>-->\r\n    <!--<div class=\"doms-stats-bg-gradient\"><\/div>-->\r\n\r\n    <!--<div class=\"doms-stats-content-grid\">-->\r\n        \r\n    <!--    <div class=\"doms-stats-editorial-col\">-->\r\n    <!--        <span class=\"doms-stats-eyebrow\">Impact by the Numbers<\/span>-->\r\n    <!--        <h2 class=\"doms-stats-headline\">Scale, Strategy & <br><span>Participation.<\/span><\/h2>-->\r\n            \r\n    <!--        <p class=\"doms-stats-description\">-->\r\n    <!--            From the flagship Samanvay business fest to our weekly corporate leadership series, DoMS IIT Madras creates an ecosystem of constant engagement.-->\r\n    <!--        <\/p>-->\r\n\r\n    <!--        <div class=\"doms-stats-visual-block-wrapper\">-->\r\n    <!--            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531058020387-3be344556be6?q=80&w=2070&auto=format&fit=crop\" -->\r\n    <!--                 alt=\"DoMS IIT Madras Event Crowd\" -->\r\n    <!--                 class=\"doms-stats-visual-img\">-->\r\n    <!--        <\/div>-->\r\n    <!--    <\/div>-->\r\n\r\n    <!--    <div class=\"doms-stats-numbers-grid\" id=\"domsStatsCounterGrid\">-->\r\n            \r\n    <!--        <div class=\"doms-stats-card\">-->\r\n    <!--            <div class=\"doms-stats-number-wrapper\">-->\r\n    <!--                <span class=\"doms-counter-target\" data-target=\"50\">0<\/span><span class=\"doms-stats-symbol\">+<\/span>-->\r\n    <!--            <\/div>-->\r\n    <!--            <div class=\"doms-stats-label\">Events Annually<\/div>-->\r\n    <!--            <div class=\"doms-stats-sublabel\">Workshops & Fests<\/div>-->\r\n    <!--        <\/div>-->\r\n\r\n    <!--        <div class=\"doms-stats-card\">-->\r\n    <!--            <div class=\"doms-stats-number-wrapper\">-->\r\n    <!--                <span class=\"doms-counter-target\" data-target=\"2\">0<\/span><span class=\"doms-stats-symbol\">k+<\/span>-->\r\n    <!--            <\/div>-->\r\n    <!--            <div class=\"doms-stats-label\">Participants<\/div>-->\r\n    <!--            <div class=\"doms-stats-sublabel\">Across India<\/div>-->\r\n    <!--        <\/div>-->\r\n\r\n    <!--        <div class=\"doms-stats-card\">-->\r\n    <!--            <div class=\"doms-stats-number-wrapper\">-->\r\n    <!--                <span class=\"doms-counter-target\" data-target=\"100\">0<\/span><span class=\"doms-stats-symbol\">+<\/span>-->\r\n    <!--            <\/div>-->\r\n    <!--            <div class=\"doms-stats-label\">Speakers<\/div>-->\r\n    <!--            <div class=\"doms-stats-sublabel\">Global CXOs<\/div>-->\r\n    <!--        <\/div>-->\r\n\r\n    <!--        <div class=\"doms-stats-card\">-->\r\n    <!--            <div class=\"doms-stats-number-wrapper\">-->\r\n    <!--                <span class=\"doms-counter-target\" data-target=\"06\">0<\/span>-->\r\n    <!--            <\/div>-->\r\n    <!--            <div class=\"doms-stats-label\">Categories<\/div>-->\r\n    <!--            <div class=\"doms-stats-sublabel\">Management Domains<\/div>-->\r\n    <!--        <\/div>-->\r\n\r\n    <!--    <\/div>-->\r\n\r\n    <!--<\/div>-->\r\n\r\n    <script>\r\n        (function() {\r\n            \/\/ Function to animate counting\r\n            const animateCounters = () => {\r\n                const counters = document.querySelectorAll('.doms-counter-target');\r\n                const speed = 200; \/\/ The lower the slower\r\n\r\n                counters.forEach(counter => {\r\n                    const updateCount = () => {\r\n                        \/\/ Clean the target (handle '06' string vs number)\r\n                        const targetRaw = counter.getAttribute('data-target');\r\n                        const target = +targetRaw; \/\/ Convert to number\r\n                        \r\n                        const currentText = counter.innerText;\r\n                        const count = +currentText; \/\/ Convert current text to number\r\n                        \r\n                        \/\/ Calculate increment\r\n                        const inc = target \/ speed * 5; \/\/ Adjust speed multiplier here\r\n\r\n                        if (count < target) {\r\n                            \/\/ Logic to handle leading zero for '06'\r\n                            let nextVal = Math.ceil(count + inc);\r\n                            if(nextVal > target) nextVal = target;\r\n\r\n                            \/\/ If original target had leading zero and val < 10, add it back\r\n                            if (targetRaw.startsWith('0') && nextVal < 10) {\r\n                                counter.innerText = '0' + nextVal;\r\n                            } else {\r\n                                counter.innerText = nextVal;\r\n                            }\r\n                            \r\n                            setTimeout(updateCount, 30);\r\n                        } else {\r\n                            \/\/ Ensure final value matches target string\r\n                            counter.innerText = targetRaw;\r\n                        }\r\n                    };\r\n                    updateCount();\r\n                });\r\n            };\r\n\r\n            \/\/ Intersection Observer Setup\r\n            \/\/Triggers the animation only when the section is 40% visible\r\n            const observerOptions = {\r\n                threshold: 0.4 \r\n            };\r\n\r\n            const statsObserver = new IntersectionObserver((entries, observer) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        animateCounters();\r\n                        observer.unobserve(entry.target); \/\/ Run only once\r\n                    }\r\n                });\r\n            }, observerOptions);\r\n\r\n            const section = document.getElementById('doms-iitm-stats-section-root');\r\n            if (section) {\r\n                statsObserver.observe(section);\r\n            }\r\n\r\n        })();\r\n    <\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ebeb44b e-con-full e-flex e-con e-parent\" data-id=\"ebeb44b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bfb3b4 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"9bfb3b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"doms-featured-events-root\" class=\"doms-featured-events-root\">\n    \n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n    <div class=\"doms-evt-header\">\n        <span class=\"doms-evt-eyebrow\">Academic Calendar<\/span>\n        <h2 class=\"doms-evt-title\">Upcoming Events<\/h2>\n        <div class=\"doms-evt-divider\"><\/div>\n    <\/div>\n\n    <div class=\"doms-evt-grid\">\n\n        <article class=\"doms-evt-card\">\n            <div class=\"doms-evt-media\">\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_8utg8d8utg8d8utg-e1770193058512.png\" class=\"doms-evt-img lazyload\" alt=\"ICFMCF\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/896;\">\n                <div class=\"doms-evt-status-bar\" id=\"cd-bar-1\"><\/div>\n            <\/div>\n            <div class=\"doms-evt-body\">\n                <div class=\"doms-evt-tags\"><span class=\"doms-evt-tag\">Conference<\/span><\/div>\n                <h3 class=\"doms-evt-headline\">8th Pan-IIT ICFMCF 2026<\/h3>\n                <p class=\"doms-evt-excerpt\">The 8th Pan-IIT International Conference on Financial Markets & Corporate Finance held at DoMS, IIT Madras.<\/p>\n                \n                <div class=\"doms-evt-action-box\">\n                    <button class=\"doms-evt-link\" onclick=\"openModal('doms-modal-1')\">\n                        View Details <span>&rarr;<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/article>\n\n        <article class=\"doms-evt-card\">\n            <div class=\"doms-evt-media\">\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-04-130759.png\" class=\"doms-evt-img lazyload\" alt=\"Symposium\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 760px; --smush-placeholder-aspect-ratio: 760\/367;\">\n                <div class=\"doms-evt-status-bar\">EVENT Ongoing<\/div>\n            <\/div>\n            <div class=\"doms-evt-body\">\n                <div class=\"doms-evt-tags\"><span class=\"doms-evt-tag\">Symposium<\/span><\/div>\n                <h3 class=\"doms-evt-headline\">DoMS Research Symposium 2026<\/h3>\n                <p class=\"doms-evt-excerpt\">A platform for scholars to present cutting-edge research. Jan 30 & 31, 2026. Fostering a culture of academic rigor.<\/p>\n                \n                <div class=\"doms-evt-action-box\">\n                    <button class=\"doms-evt-link\" onclick=\"openModal('doms-modal-2')\">\n                        View Details <span>&rarr;<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/article>\n\n        <article class=\"doms-evt-card\">\n            <div class=\"doms-evt-media\">\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00715.jpg\" class=\"doms-evt-img lazyload\" alt=\"IS Workshop\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                <div class=\"doms-evt-status-bar\">Event Concluded<\/div>\n            <\/div>\n            <div class=\"doms-evt-body\">\n                <div class=\"doms-evt-tags\"><span class=\"doms-evt-tag\">Hybrid Workshop<\/span><\/div>\n                <h3 class=\"doms-evt-headline\">Contextualizing Contemporary IS Research<\/h3>\n                <p class=\"doms-evt-excerpt\">Integrating Theory, Method, & Practice. A One-Day Hybrid Workshop on Jan 2, 2026 focusing on emerging trends.<\/p>\n                \n                <div class=\"doms-evt-action-box\">\n                    <button class=\"doms-evt-link\" onclick=\"openModal('doms-modal-3')\">\n                        View Details <span>&rarr;<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/article>\n\n    <\/div>\n\n    <div id=\"doms-modal-1\" class=\"doms-evt-modal-overlay\">\n        <div class=\"doms-evt-modal-box\">\n            <button class=\"doms-evt-close-btn\" onclick=\"closeModal('doms-modal-1')\">&times;<\/button>\n            <div class=\"doms-evt-modal-img-wrap\">\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-04-134225.png\" style=\"--smush-placeholder-width: 582px; --smush-placeholder-aspect-ratio: 582\/827;filter:none\" class=\"doms-evt-modal-img lazyload\" alt=\"ICFMCF\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <\/div>\n            <div class=\"doms-evt-modal-info\">\n                <span class=\"doms-evt-modal-cat\">International Conference<\/span>\n                <h2 class=\"doms-evt-modal-head\">8th Pan-IIT ICFMCF 2026<\/h2>\n                <div class=\"doms-evt-modal-body\">\n                    <p>Held at the Department of Management Studies, IIT Madras, this prestigious conference brings together academicians, researchers, and practitioners to discuss emerging trends in finance.<\/p>\n                    <ul>\n                        <li><strong>Dates:<\/strong> July 3\u20135, 2026<\/li>\n                        <li><strong>Venue:<\/strong> DoMS, IIT Madras<\/li>\n                        <li><strong>Theme:<\/strong> Sustainable Finance & Digital Transformation<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"doms-evt-modal-footer\">\n                    <!--<a href=\"#\" target=\"_blank\" class=\"doms-modal-btn doms-btn-solid\">Register Now<\/a>-->\n                    <!--<a href=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/icfmcf-brochure.pdf\" target=\"_blank\" class=\"doms-modal-btn doms-btn-outline\">Download PDF<\/a>-->\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"doms-modal-2\" class=\"doms-evt-modal-overlay\">\n        <div class=\"doms-evt-modal-box\">\n            <button class=\"doms-evt-close-btn\" onclick=\"closeModal('doms-modal-2')\">&times;<\/button>\n            <div class=\"doms-evt-modal-img-wrap\">\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-04-130754.png\" style=\"--smush-placeholder-width: 784px; --smush-placeholder-aspect-ratio: 784\/700;filter:none\"class=\"doms-evt-modal-img lazyload\" alt=\"Symposium\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <\/div>\n            <div class=\"doms-evt-modal-info\">\n                <span class=\"doms-evt-modal-cat\">Academic Symposium<\/span>\n                <h2 class=\"doms-evt-modal-head\">DoMS Research Symposium 2026<\/h2>\n                <div class=\"doms-evt-modal-body\">\n                    <p>A flagship event dedicated to fostering research culture among scholars. It provides a platform to present papers, receive feedback from distinguished faculty, and network with peers.<\/p>\n                    <ul>\n                        <li><strong>Dates:<\/strong> Jan 30 & 31, 2026<\/li>\n                        <li><strong>Tracks:<\/strong> Marketing, Operations, Finance, HR, and IS.<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"doms-evt-modal-footer\">\n                    <a href=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DOMS_Research_Symposium_2026.pdf\" target=\"_blank\" class=\"doms-modal-btn doms-btn-outline\">Download Schedule (PDF)<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"doms-modal-3\" class=\"doms-evt-modal-overlay\">\n        <div class=\"doms-evt-modal-box\">\n            <button class=\"doms-evt-close-btn\" onclick=\"closeModal('doms-modal-3')\">&times;<\/button>\n            <div class=\"doms-evt-modal-img-wrap\">\n                <img decoding=\"async\" id=\"gallery-main-img\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00715.jpg\" class=\"doms-evt-modal-img lazyload\" alt=\"Workshop\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n            <\/div>\n            <div class=\"doms-evt-modal-info\">\n                <span class=\"doms-evt-modal-cat\">Hybrid Workshop<\/span>\n                <h2 class=\"doms-evt-modal-head\">Contextualizing Contemporary IS Research<\/h2>\n                <div class=\"doms-evt-modal-body\">\n                    <p><strong>Integrating Theory, Method, & Practice<\/strong><\/p>\n                    <p>A One-Day Hybrid Workshop focusing on current trends in Information Systems research, featuring expert sessions on methodology and theory building.<\/p>\n                    \n                    <p><strong>Event Gallery:<\/strong><\/p>\n                    <div class=\"doms-gallery-grid\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC09995.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC09953.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC09945.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC09944.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC09911.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC09899.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00719.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00700.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00681.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00655.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00394.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/DSC00275.jpg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1066;\">\n                        \n                        <img decoding=\"async\" src=\"\" class=\"doms-gallery-item\" onclick=\"swapGalleryImage(this.src)\">\n                        <img decoding=\"async\" src=\"\" class=\"doms-gallery-item\" onclick=\"swapGalleryImage(this.src)\">\n                        \n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/* --- 1. PREMIUM TIMER LOGIC (Only for Card 1) --- *\/\n        function initTimer(targetDateStr, barId) {\n            const targetDate = new Date(targetDateStr).getTime();\n            const bar = document.getElementById(barId);\n\n            function update() {\n                const now = new Date().getTime();\n                const distance = targetDate - now;\n\n                if (distance < 0) {\n                    bar.innerHTML = \"EVENT CONCLUDED\";\n                    return;\n                }\n\n                const days = Math.floor(distance \/ (1000 * 60 * 60 * 24));\n                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n                \n                bar.innerHTML = `\n                    <div class=\"cd-active-container\">\n                        <div class=\"cd-label\">BEGINS<br>IN<\/div>\n                        <div class=\"cd-timer-box\">\n                            <div class=\"cd-unit\">\n                                <span class=\"cd-val\">${days < 10 ? '0'+days : days}<\/span>\n                                <span class=\"cd-key\">DAYS<\/span>\n                            <\/div>\n                            <div class=\"cd-unit\">\n                                <span class=\"cd-val\">${hours < 10 ? '0'+hours : hours}<\/span>\n                                <span class=\"cd-key\">HRS<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n            }\n            update();\n            setInterval(update, 60000);\n        }\n\n        \/\/ START TIMER FOR CARD 1 (Example date)\n        initTimer(\"July 03, 2026 09:00:00\", \"cd-bar-1\");\n\n        \/* --- 2. MODAL LOGIC (Simplified for Separated Modals) --- *\/\n        \n        function openModal(modalId) {\n            const modal = document.getElementById(modalId);\n            if (modal) {\n                modal.classList.add('open');\n                document.body.style.overflow = 'hidden'; \n            }\n        }\n\n        function closeModal(modalId) {\n            const modal = document.getElementById(modalId);\n            if (modal) {\n                modal.classList.remove('open');\n                document.body.style.overflow = 'auto';\n            }\n        }\n\n        function swapGalleryImage(src) {\n            document.getElementById('gallery-main-img').src = src;\n        }\n\n        \/\/ Close on outside click for all modals\n        document.querySelectorAll('.doms-evt-modal-overlay').forEach(modal => {\n            modal.addEventListener('click', function(e) {\n                if (e.target === this) {\n                    this.classList.remove('open');\n                    document.body.style.overflow = 'auto';\n                }\n            });\n        });\n    <\/script>\n    \n    \n    \n    <style>\n        \/* ========================================\n           1. PREMIUM CSS ARCHITECTURE\n        ======================================== *\/\n        .doms-featured-events-root {\n            \/* LUXURY PALETTE *\/\n            --evt-accent: #C5A059;       \n            --evt-dark: #1a0506;         \n            --evt-maroon: #6F1A1D;       \n            --evt-surface: #ffffff;\n            --evt-bg: #fdfdfd;           \n            --evt-text: #2c2c2c;\n            --evt-text-mute: #666666;\n            --evt-border: rgba(0,0,0,0.08);\n            \n            \/* TYPOGRAPHY *\/\n            --font-display: 'Playfair Display', serif; \n            --font-ui: 'Manrope', sans-serif;\n            --font-mono: 'Space Mono', monospace; \n\n            \/* SPACING & LAYOUT *\/\n            padding: 50px 0;\n            background-color: var(--evt-bg);\n            font-family: var(--font-ui);\n            color: var(--evt-text);\n            line-height: 1.6;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .doms-featured-events-root * { box-sizing: border-box; }\n\n        \/* ========================================\n           2. HEADER SECTION \n        ======================================== *\/\n        .doms-evt-header {\n            text-align: center !important;\n            max-width: 900px;\n            margin: 0 auto 40px auto ;\n            padding: 0 20px !important;\n        }\n\n        .doms-evt-eyebrow {\n            font-size: 0.75rem !important;\n            font-weight: 700 !important;\n            text-transform: uppercase;\n            letter-spacing: 4px;\n            color: var(--evt-accent);\n            display: block;\n            margin-bottom: 5px;\n        }\n\n        .doms-evt-title {\n            font-family: var(--font-display) !important;\n            font-size: 3.2rem !important;\n            color: var(--evt-dark) !important;\n            margin: 0;\n            line-height: 1.1;\n            letter-spacing: -1px !important;\n        }\n\n        \/* ========================================\n           3. THE GRID \n        ======================================== *\/\n        .doms-evt-grid {\n            max-width: 1300px;\n            margin: 0 auto;\n            padding: 0 30px;\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 40px;\n        }\n\n        \/* CARD ARCHITECTURE *\/\n        .doms-evt-card {\n            background: var(--evt-surface);\n            border-radius: 4px; \n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.5s ease;\n            border: 1px solid var(--evt-border);\n        }\n\n        .doms-evt-card:hover {\n            transform: translateY(-10px);\n            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n            border-color: rgba(197, 160, 89, 0.3);\n            \n        }\n\n        \/* IMAGE WRAPPER *\/\n        .doms-evt-media {\n            position: relative;\n            width: 100%;\n            \/*height: 100%;*\/\n            aspect-ratio: 4 \/ 3; \n            overflow: hidden;\n            align-items: center;\n            justify-content: center !important;       \n  align-items: center !important;  \n            \n        }\n\n        .doms-evt-img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.8s ease;\n            filter: grayscale(10%); \n            filter: none !important;\n             filter: grayscale(0%);\n             justify-content: center !important;       \n  align-items: center !important;  \n        }\n\n       \n\n        \/* STATUS BAR \/ COUNTDOWN CONTAINER *\/\n        .doms-evt-status-bar {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            background: rgba(10, 5, 5, 0.85);\n            backdrop-filter: blur(12px);\n            border-top: 1px solid rgba(255,255,255,0.1);\n            padding: 0 20px;\n            display: flex;\n            align-items: center;\n            justify-content: center; \n            z-index: 5;\n            height: 60px;\n            color: #fff;\n            font-family: var(--font-mono);\n            font-size: 0.8rem;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n        }\n\n        \/* COUNTDOWN SPECIFIC STYLES *\/\n        .cd-active-container {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            width: 100%;\n        }\n\n        .cd-label {\n            font-family: var(--font-ui);\n            font-size: 0.65rem;\n            font-weight: 700;\n            letter-spacing: 1px;\n            color: rgba(255,255,255,0.7);\n            line-height: 1.2;\n            text-align: left;\n        }\n\n        .cd-timer-box {\n            display: flex;\n            gap: 15px;\n        }\n\n        .cd-unit {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            line-height: 1;\n        }\n\n        .cd-val {\n            font-family: var(--font-mono);\n            font-size: 1.2rem;\n            font-weight: 700;\n            color: var(--evt-accent);\n            text-shadow: 0 0 10px rgba(197, 160, 89, 0.3);\n        }\n\n        .cd-key {\n            font-family: var(--font-ui);\n            font-size: 0.5rem;\n            color: rgba(255,255,255,0.5);\n            margin-top: 2px;\n        }\n\n        \/* CARD BODY *\/\n        .doms-evt-body {\n            padding: 30px;\n            display: flex;\n            flex-direction: column;\n            flex-grow: 1;\n            background: linear-gradient(to bottom, #fff 0%, #fafafa 100%);\n        }\n\n        .doms-evt-tags { margin-bottom: 15px; }\n\n        .doms-evt-tag {\n            font-size: 0.65rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 1.5px;\n            color: var(--evt-maroon);\n            border: 1px solid rgba(111, 26, 29, 0.2);\n            padding: 6px 12px;\n            border-radius: 50px;\n        }\n\n        .doms-evt-headline {\n            font-family: var(--font-display);\n            font-size: 1.5rem;\n            color: var(--evt-dark);\n            margin: 0 0 15px 0;\n            line-height: 1.25;\n            font-weight: 600;\n        }\n\n        .doms-evt-excerpt {\n            font-size: 0.95rem;\n            color: var(--evt-text-mute);\n            margin-bottom: 30px;\n            line-height: 1.7;\n            display: -webkit-box;\n            -webkit-line-clamp: 3;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        \/* ACTION BOX *\/\n        .doms-evt-action-box {\n            margin-top: auto;\n            border-top: 1px solid var(--evt-border);\n            padding-top: 20px;\n            display: flex;\n            justify-content: flex-start;\n        }\n\n        \/* PREMIUM LINK BUTTON *\/\n        .doms-evt-link {\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            font-size: 0.8rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 1.5px;\n            color: var(--evt-dark);\n            text-decoration: none;\n            cursor: pointer;\n            background: none;\n            border: none;\n            transition: all 0.3s ease;\n        }\n\n        .doms-evt-link span {\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            background: var(--evt-border);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all 0.3s ease;\n            font-size: 1.2rem;\n            line-height: 1;\n            padding-bottom: 2px; \n        }\n\n        .doms-evt-link:hover { color: var(--evt-maroon); }\n        .doms-evt-link:hover span {\n            background: var(--evt-maroon);\n            color: #fff;\n            transform: translateX(5px);\n        }\n\n        \/* ========================================\n           4. MODAL\n        ======================================== *\/\n        .doms-evt-modal-overlay {\n            position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n            background: rgba(10, 5, 5, 0.9);\n            z-index: 10000; display: none; justify-content: center; align-items: center;\n            padding: 20px; opacity: 0; transition: opacity 0.4s ease;\n        }\n        .doms-evt-modal-overlay.open { \n            display: flex; opacity: 1; }\n\n        .doms-evt-modal-box {\n            background: #fff; width: 100%; max-width: 1000px;\n            border-radius: 2px; display: flex; flex-direction: row;\n            overflow: hidden; position: relative;\n            transform: translateY(40px); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);\n            align-items: center;\n         justify-content: center;   \n            \n        }\n        .doms-evt-modal-overlay.open .doms-evt-modal-box { transform: translateY(0); }\n\n        .doms-evt-close-btn {\n            position: absolute; top: 20px; right: 20px;\n            background: rgba(255,255,255,0.8); border: none; font-size: 2rem;\n            cursor: pointer; z-index: 20; color: #000; transition: color 0.2s;\n            line-height: 1; width: 40px; height: 40px; border-radius: 50%;\n        }\n        .doms-evt-close-btn:hover { color: var(--evt-maroon); background: #fff; }\n\n        .doms-evt-modal-img-wrap { width: 60%; background: #000; position: relative; \n        align-items: center !important;\n         justify-content: center !important;   \n            \n            \n        }\n        .doms-evt-modal-img { \n            width: 100%; \n            filter: none !important;\n        height: 100%;\n        align-items: center;\n         justify-content: center;   \n        \n        object-fit: cover; \n        \n        opacity: 1; \n            \n            \n        }\n        \n        \n        \n\n        .doms-evt-modal-info { width: 55%; padding: 60px 50px; overflow-y: auto; max-height: 90vh; }\n        \n        .doms-evt-modal-cat { color: var(--evt-accent); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 15px; display: block; }\n        .doms-evt-modal-head { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; margin: 0 0 30px 0; color: var(--evt-dark); }\n        .doms-evt-modal-body { font-size: 1rem; color: #444; line-height: 1.8; margin-bottom: 40px; }\n        \n        .doms-evt-modal-footer { display: flex; gap: 20px; border-top: 1px solid #eee; padding-top: 30px; }\n        \n        .doms-modal-btn {\n            padding: 15px 30px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;\n            text-decoration: none; transition: all 0.3s; cursor: pointer; border-radius: 2px;\n        }\n        .doms-btn-solid { background: var(--evt-maroon); color: #fff; border: 1px solid var(--evt-maroon); }\n        \n        \n        .doms-btn-solid:hover { background: var(--evt-dark); border-color: var(--evt-dark); }\n        .doms-btn-outline { background: transparent; color: var(--evt-maroon); border: 1px solid var(--evt-maroon); }\n        .doms-btn-outline:hover { background: var(--evt-maroon); color: #fff; }\n\n        \/* GALLERY GRID *\/\n        .doms-gallery-grid {\n            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px;\n        }\n        .doms-gallery-item {\n            width: 100%; height: 80px; object-fit: cover; border-radius: 2px;\n            filter: none !important;\n            cursor: pointer; transition: transform 0.2s; border: 1px solid #eee;\n        }\n        .doms-gallery-item:hover { transform: scale(1.05); }\n\n        \/* RESPONSIVE *\/\n        @media (max-width: 1024px) {\n            .doms-evt-grid { grid-template-columns: 1fr 1fr; }\n            .doms-evt-card:nth-child(3) { grid-column: span 2; } \n        }\n        @media (max-width: 768px) {\n            .doms-evt-grid { grid-template-columns: 1fr; }\n            .doms-evt-card:nth-child(3) { grid-column: span 1; }\n            .doms-evt-title { font-size: 2.5rem; }\n            .doms-evt-modal-box { flex-direction: column; width: 95%; max-height: 90vh; }\n            .doms-evt-modal-img-wrap { width: 100%; height: 200px; }\n            .doms-evt-modal-info { width: 100%; padding: 30px; }\n        }\n    <\/style>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6e00678 e-con-full e-flex e-con e-parent\" data-id=\"6e00678\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a12f0f e-con-full e-flex e-con e-parent\" data-id=\"8a12f0f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9feac8f elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"9feac8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"doms-all-events-archive-root\" class=\"doms-all-events-archive-root\">\n    <style>\n        \/* ========================================\n        1. SCOPED VARIABLES & RESET\n        ======================================== *\/\n        .doms-all-events-archive-root {\n            \/* Branding Colors *\/\n            --arch-maroon: #6f1a1d;\n            --arch-maroon-dark: #3a0b0d;\n            --arch-gold: #D4AF37;\n            --arch-gold-light: #f3e5ab;\n            --arch-bg: #f8f9fa; \/* Light grey background *\/\n            --arch-white: #ffffff;\n            --arch-text-main: #222222;\n            --arch-text-muted: #666666;\n            --arch-border: #e5e5e5;\n            \n            \/* Typography *\/\n            --arch-font-serif: 'Playfair Display', Georgia, serif; \n            --arch-font-sans: 'Inter', system-ui, sans-serif;\n\n            \/* Spacing & Layout *\/\n            --arch-container-width: 1200px;\n            --arch-card-radius: 8px;\n            \n            \/* Reset *\/\n            box-sizing: border-box;\n            width: 100%;\n            position: relative;\n            background-color: var(--arch-bg);\n            font-family: var(--arch-font-sans);\n            padding: 10px 0;\n            line-height: 1.6;\n            color: var(--arch-text-main);\n        }\n\n        .doms-all-events-archive-root * { box-sizing: border-box; }\n\n        \/* ========================================\n        2. SECTION HEADER\n        ======================================== *\/\n        .doms-arch-header {\n            max-width: var(--arch-container-width);\n            margin: 0 auto 40px auto;\n            padding: 0 20px;\n            text-align: center;\n        }\n\n        .doms-arch-eyebrow {\n            display: inline-block;\n            font-size: 0.8rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            color: var(--arch-gold);\n            margin-bottom: 10px;\n        }\n\n        .doms-arch-title {\n            font-family: var(--arch-font-serif);\n            font-size: 4rem;\n            color: var(--arch-maroon);\n            margin: 0;\n        }\n\n        .doms-arch-divider {\n            width: 50px;\n            height: 3px;\n            background: var(--arch-gold);\n            margin: 20px auto;\n        }\n\n        \/* ========================================\n        3. STICKY FILTER TABS\n        ======================================== *\/\n        .doms-arch-filter-bar {\n            position: sticky; \/* Sticks on scroll *\/\n            top: 0;\n            z-index: 50;\n            background: #D4AF37;\n            backdrop-filter: blur(10px);\n            border-bottom: 1px solid var(--arch-border);\n            padding: 15px 0;\n            margin-bottom: 40px;\n            box-shadow: 0 4px 20px rgba(0,0,0,0.03);\n        }\n\n        .doms-arch-tabs-container {\n            max-width: var(--arch-container-width);\n            margin: 0 auto;\n            padding: 0 20px;\n            display: flex;\n            gap: 10px;\n            overflow-x: auto; \/* Scrollable on mobile *\/\n            scrollbar-width: none; \/* Hide scrollbar Firefox *\/\n            -ms-overflow-style: none; \/* Hide scrollbar IE *\/\n            white-space: nowrap;\n        }\n        \n        .doms-arch-tabs-container::-webkit-scrollbar { display: none; }\n\n        .doms-arch-tab-btn {\n            background: transparent;\n            border: 1px solid var(--arch-border);\n            color: var(--arch-text-muted);\n            padding: 8px 18px;\n            border-radius: 50px;\n            font-size: 0.85rem;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n\n        .doms-arch-tab-btn:hover {\n            border-color: var(--arch-maroon);\n            color: var(--arch-maroon);\n        }\n\n        .doms-arch-tab-btn.active {\n            background: var(--arch-maroon);\n            color: var(--arch-white);\n            border-color: var(--arch-maroon);\n            box-shadow: 0 4px 10px rgba(111, 26, 29, 0.2);\n        }\n\n        \/* ========================================\n        4. EVENTS GRID\n        ======================================== *\/\n        .doms-arch-grid {\n            max-width: var(--arch-container-width);\n            margin: 0 auto;\n            padding: 0 20px;\n            display: grid;\n            grid-template-columns: repeat(3, 1fr); \/* 3 Columns Desktop *\/\n            gap: 30px;\n        }\n\n        \/* Card Style *\/\n        .doms-arch-card {\n            background: var(--arch-white);\n            border-radius: var(--arch-card-radius);\n            border: 1px solid var(--arch-border);\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            transition: transform 0.3s, box-shadow 0.3s;\n            position: relative;\n        }\n\n        .doms-arch-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 30px rgba(0,0,0,0.08);\n            border-color: var(--arch-gold);\n        }\n\n        \/* Card Visual *\/\n        .doms-arch-card-visual {\n            height: 200px;\n            width: 100%;\n            background-color: #eee;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .doms-arch-img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.6s ease;\n            filter: none !important;\n        }\n\n        .doms-arch-card:hover .doms-arch-img { transform: scale(1.05); }\n\n        \/* Date Overlay Badge *\/\n        .doms-arch-date-badge {\n            position: absolute;\n            top: 15px;\n            left: 15px;\n            background: var(--arch-maroon);\n            color: var(--arch-white);\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-size: 0.75rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n        }\n\n        \/* Card Content *\/\n        .doms-arch-content {\n            padding: 25px;\n            flex-grow: 1;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .doms-arch-card-title {\n            font-family: var(--arch-font-serif);\n            font-size: 1.2rem;\n            color: var(--arch-maroon-dark);\n            margin: 0 0 15px 0;\n            line-height: 1.3;\n            font-weight: 600;\n        }\n\n        .doms-arch-meta-row {\n            display: flex;\n            gap: 15px;\n            font-size: 0.8rem;\n            color: var(--arch-text-muted);\n            margin-bottom: 15px;\n            align-items: center;\n        }\n\n        .doms-arch-meta-item {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .doms-arch-excerpt {\n            font-size: 0.9rem;\n            color: var(--arch-text-muted);\n            margin-bottom: 20px;\n            display: -webkit-box;\n            -webkit-line-clamp: 3; \/* Limit text lines *\/\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        \/* Read More Btn *\/\n        .doms-arch-btn {\n            margin-top: auto;\n            align-self: flex-start;\n            font-size: 0.8rem;\n            font-weight: 700;\n            color: var(--arch-maroon);\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            background: none;\n            border: none;\n            padding: 0;\n            cursor: pointer;\n            border-bottom: 2px solid transparent;\n            transition: border-color 0.3s;\n        }\n\n        .doms-arch-btn:hover {\n            border-bottom-color: var(--arch-gold);\n        }\n\n        \/* ========================================\n        5. RESOURCE MODAL (Window)\n        ======================================== *\/\n        .doms-modal-backdrop {\n            position: fixed;\n            top: 0; left: 0; width: 100%; height: 100%;\n            background: rgba(0,0,0,0.7);\n            backdrop-filter: blur(5px);\n            z-index: 9999;\n            display: none; \/* Hidden *\/\n            justify-content: center;\n            align-items: center;\n            padding: 20px;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n\n        .doms-modal-backdrop.active {\n            display: flex;\n            opacity: 1;\n        }\n\n        .doms-modal-window {\n            background: var(--arch-white);\n            width: 100%;\n            max-width: 900px;\n            max-height: 90vh;\n            border-radius: 8px;\n            overflow: hidden;\n            box-shadow: 0 25px 50px rgba(0,0,0,0.5);\n            display: flex;\n            flex-direction: column;\n            transform: translateY(30px);\n            transition: transform 0.3s ease;\n            position: relative;\n        }\n\n        .doms-modal-backdrop.active .doms-modal-window {\n            transform: translateY(0);\n        }\n\n        \/* Modal Layout *\/\n        .doms-modal-header-img {\n            width: 40%;\n            height: 40px;\n            object-fit: cover;\n            background: #eee;\n            filter: none !important;\n        }\n\n        .doms-modal-scroll-area {\n            overflow-y: auto;\n            padding: 40px;\n            display: flex;\n            gap: 40px;\n        }\n\n        .doms-modal-main-col { \n            flex: 2;\n            }\n        .doms-modal-sidebar-col { \n            flex: 1; \n            background: var(--arch-bg);\n            padding: 25px;\n            border-radius: 8px;\n            height: fit-content;\n        }\n\n        \/* Modal Typography *\/\n        .doms-modal-title {\n            font-family: var(--arch-font-serif);\n            font-size: 2rem;\n            color: var(--arch-maroon);\n            margin: 0 0 20px 0;\n        }\n\n        .doms-modal-text {\n            font-size: 1rem;\n            color: #444;\n            line-height: 1.8;\n            margin-bottom: 20px;\n        }\n\n        .doms-modal-label {\n            font-size: 0.75rem;\n            text-transform: uppercase;\n            color: var(--arch-text-muted);\n            font-weight: 700;\n            margin-bottom: 5px;\n        }\n\n        .doms-modal-info {\n            font-size: 0.95rem;\n            color: var(--arch-text-main);\n            font-weight: 600;\n            margin-bottom: 20px;\n            display: block;\n        }\n\n        .doms-modal-download-btn {\n            display: block;\n            width: 100%;\n            text-align: center;\n            background: var(--arch-maroon);\n            color: var(--arch-white);\n            padding: 12px;\n            border-radius: 4px;\n            text-decoration: none;\n            font-weight: 600;\n            transition: background 0.3s;\n            margin-bottom: 10px;\n        }\n\n        .doms-modal-download-btn:hover { background: var(--arch-maroon-dark); }\n\n        .doms-modal-close-btn {\n            position: absolute;\n            top: 15px;\n            right: 15px;\n            width: 40px; height: 40px;\n            border-radius: 50%;\n            background: rgba(255,255,255,0.9);\n            border: none;\n            font-size: 1.5rem;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n            transition: transform 0.2s;\n        }\n\n        .doms-modal-close-btn:hover { transform: scale(1.1); }\n\n        \/* ========================================\n        6. RESPONSIVE\n        ======================================== *\/\n        @media (max-width: 1024px) {\n            .doms-arch-grid { grid-template-columns: repeat(2, 1fr); }\n        }\n\n        @media (max-width: 768px) {\n            .doms-arch-grid { grid-template-columns: 1fr; }\n            .doms-arch-title { font-size: 2rem; }\n            \n            \/* Modal Mobile *\/\n            .doms-modal-scroll-area { flex-direction: column-reverse; padding: 20px; }\n            .doms-modal-header-img { height: 150px; }\n            .doms-modal-window { max-height: 95vh; height: 95vh; }\n            .doms-modal-title { font-size: 1.5rem; }\n        }\n    <\/style>\n\n    <div class=\"doms-arch-header\">\n        <span class=\"doms-arch-eyebrow\">The Archive<\/span>\n        <h2 class=\"doms-arch-title\">Recent Events & Activities<\/h2>\n        <div class=\"doms-arch-divider\"><\/div>\n        <p>Explore the vibrant history of academic, cultural, and corporate engagements at DoMS IIT Madras.<\/p>\n    <\/div>\n\n    <div class=\"doms-arch-filter-bar\">\n        <div class=\"doms-arch-tabs-container\" id=\"domsFilterContainer\">\n            <button class=\"doms-arch-tab-btn active\" onclick=\"domsFilterEvents('all', this)\">All<\/button>\n            <button class=\"doms-arch-tab-btn\" onclick=\"domsFilterEvents('aug-25', this)\">Aug '25<\/button>\n            <button class=\"doms-arch-tab-btn\" onclick=\"domsFilterEvents('may-24', this)\">May '24<\/button>\n            <button class=\"doms-arch-tab-btn\" onclick=\"domsFilterEvents('mar-24', this)\">Mar '24<\/button>\n            <\/div>\n    <\/div>\n\n    <div class=\"doms-arch-grid\" id=\"domsEventsGrid\">\n\n        <div class=\"doms-arch-card\" data-category=\"aug-25\">\n            <div class=\"doms-arch-card-visual\">\n                <span class=\"doms-arch-date-badge\">Aug '25<\/span>\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Global-Engagement-Meeting-with-Nagoya-University-1-scaled.jpeg\" class=\"doms-arch-img lazyload\" alt=\"Nagoya University Visit\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1200;\">\n            <\/div>\n            <div class=\"doms-arch-content\">\n                <h3 class=\"doms-arch-card-title\">Nagoya University Visit: Prof. Yoko Shiraki & Prof. Akiko Ito<\/h3>\n                <div class=\"doms-arch-meta-row\">\n                    <span class=\"doms-arch-meta-item\">\ud83d\udcc5 22 Aug 2025<\/span>\n                <\/div>\n                <p class=\"doms-arch-excerpt\">Exploring student mobility and research collaboration opportunities between DoMS IITM and Nagoya University.<\/p>\n                <button class=\"doms-arch-btn\" \n                    data-title=\"Nagoya University Visit\"\n                    data-date=\"22 Aug 2025\"\n                    data-time=\"10:00 AM - 01:00 PM\"\n                    data-loc=\"DoMS Conference Room\"\n                    data-img=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Global-Engagement-Meeting-with-Nagoya-University-1-scaled.jpeg\"\n                    data-desc=\"Prof. Yoko Shiraki and Prof. Akiko Ito from Nagoya University visited DoMS, IIT Madras, on August 22, 2025. <br><br> The visit aimed to explore collaboration opportunities for the Student Mobility and Immersion Program. Discussions emphasized fostering academic exchange, cross-cultural learning, and strengthening research partnerships between the two institutions.\"\n                    onclick=\"openDomsArchiveModal(this)\">\n                    Read More\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-arch-card\" data-category=\"aug-25\">\n            <div class=\"doms-arch-card-visual\">\n                <span class=\"doms-arch-date-badge\">Aug '25<\/span>\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-115817.png\" class=\"doms-arch-img lazyload\" alt=\"Digital Government Research\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 679px; --smush-placeholder-aspect-ratio: 679\/529;\">\n            <\/div>\n            <div class=\"doms-arch-content\">\n                <h3 class=\"doms-arch-card-title\">Lecture: Publishing Research from India & Digital Government<\/h3>\n                <div class=\"doms-arch-meta-row\">\n                    <span class=\"doms-arch-meta-item\">\ud83d\udcc5 18 Aug 2025<\/span>\n                <\/div>\n                <p class=\"doms-arch-excerpt\">Prof. Panos Panagiotopoulos shared insights on impactful research and digital government trends.<\/p>\n                <button class=\"doms-arch-btn\" \n                    data-title=\"Publishing Research & Digital Government\"\n                    data-date=\"18 Aug 2025\"\n                    data-time=\"03:00 PM - 05:00 PM\"\n                    data-loc=\"DoMS Seminar Hall\"\n                    data-img=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-115817.png\"\n                    data-desc=\"Prof. Panos Panagiotopoulos, Co-Editor-in-Chief of Information Government Quarterly, delivered an insightful lecture titled 'Publishing Research from India \u2013 Reflections and Guidance & Current Research and Practice in Digital Government'. <br><br> He shared valuable perspectives on advancing impactful research in the Indian context and highlighted emerging trends and best practices shaping the field of digital government worldwide.\"\n                    onclick=\"openDomsArchiveModal(this)\">\n                    Read More\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-arch-card\" data-category=\"aug-25\">\n            <div class=\"doms-arch-card-visual\">\n                <span class=\"doms-arch-date-badge\">Aug '25<\/span>\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-115316.png\" class=\"doms-arch-img lazyload\" alt=\"Happiness Talk\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 650px; --smush-placeholder-aspect-ratio: 650\/523;\">\n            <\/div>\n            <div class=\"doms-arch-content\">\n                <h3 class=\"doms-arch-card-title\">Talk: The Great Happiness Self Sabotage<\/h3>\n                <div class=\"doms-arch-meta-row\">\n                    <span class=\"doms-arch-meta-item\">\ud83d\udcc5 05 Aug 2025<\/span>\n                <\/div>\n                <p class=\"doms-arch-excerpt\">Prof. Raj Raghunathan discussed aligning professional success with personal happiness.<\/p>\n                <button class=\"doms-arch-btn\" \n                    data-title=\"The Great Happiness Self Sabotage\"\n                    data-date=\"05 Aug 2025\"\n                    data-time=\"04:00 PM - 06:00 PM\"\n                    data-loc=\"IC & SR Auditorium\"\n                    data-img=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-115316.png\"\n                    data-desc=\"Prof. Raj Raghunathan, Regents Chair of Marketing at the McCombs School of Business, University of Texas at Austin, delivered a talk titled 'The Great Happiness Self Sabotage'. <br><br> He discussed how individuals can transform career success into genuine life success by aligning professional achievements with personal happiness and well-being. He is the author of the book 'If You\u2019re So Smart, Why Aren\u2019t You Happy?'.\"\n                    onclick=\"openDomsArchiveModal(this)\">\n                    Read More\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-arch-card\" data-category=\"may-24\">\n            <div class=\"doms-arch-card-visual\">\n                <span class=\"doms-arch-date-badge\">May '24<\/span>\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/DSC_0013-scaled.jpg\" class=\"doms-arch-img lazyload\" alt=\"Data Analytics Training\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1067;\">\n            <\/div>\n            <div class=\"doms-arch-content\">\n                <h3 class=\"doms-arch-card-title\">Training Program on Data Analytics for Govt. Officers<\/h3>\n                <div class=\"doms-arch-meta-row\">\n                    <span class=\"doms-arch-meta-item\">\ud83d\udcc5 06-08 May 2024<\/span>\n                <\/div>\n                <p class=\"doms-arch-excerpt\">A 3-day training program for senior officials of Treasuries and Accounts Dept, Govt. of Tamil Nadu.<\/p>\n                <button class=\"doms-arch-btn\" \n                    data-title=\"Training Program on Data Analytics\"\n                    data-date=\"06 May - 08 May 2024\"\n                    data-time=\"09:00 AM - 05:00 PM\"\n                    data-loc=\"Management Studies Block\"\n                    data-img=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Prof_Usha-scaled.jpg\"\n                    data-desc=\"IIT Madras, Department of Management Studies organised a three-day training program titled 'Training Program on Data Analytics for Senior Officers of Treasuries and Accounts Department, Govt. of Tamil Nadu' held between May 6 and 8, 2024. <br><br> Dr. Jane Prasad, Registrar of IITM, inaugurated the training session, while Prof. M Thenmozhi, Head of DoMS delivered the welcome address. About 50 officials participated with zeal. Mr. K.Vijayendra Pandian, IAS, delivered the valedictory address. Prof S Srinivasan coordinated the program.\"\n                    onclick=\"openDomsArchiveModal(this)\">\n                    Read More\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-arch-card\" data-category=\"mar-24\">\n            <div class=\"doms-arch-card-visual\">\n                <span class=\"doms-arch-date-badge\">Mar '24<\/span>\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_l73lual73lual73l-scaled-e1769537216467.png\" class=\"doms-arch-img lazyload\" alt=\"DoMS Games\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/926;\">\n            <\/div>\n            <div class=\"doms-arch-content\">\n                <h3 class=\"doms-arch-card-title\">DoMS Games 2024: The Final Game Night<\/h3>\n                <div class=\"doms-arch-meta-row\">\n                    <span class=\"doms-arch-meta-item\">\ud83d\udcc5 16 Mar 2024<\/span>\n                <\/div>\n                <p class=\"doms-arch-excerpt\">Students engaged in a variety of board games to strengthen intra-batch relationships.<\/p>\n                <button class=\"doms-arch-btn\" \n                    data-title=\"DoMS Games 2024\"\n                    data-date=\"16 March 2024\"\n                    data-time=\"06:00 PM Onwards\"\n                    data-loc=\"DoMS Student Lounge\"\n                    data-img=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_l73lual73lual73l-scaled-e1769537216467.png\"\n                    data-desc=\"The Final Game Night, a beloved event of the 2022\u20132024 batch, took place on March 16th, 2024. This event served as a platform for students to strengthen intra-batch relationships while reminiscing about their MBA journey. <br><br> Students engaged in board games including Crossword, Chess, Ludo, Snake and Ladder, Dumb Charades, UNO, and Pictomania. Additionally, the ongoing DoMS League Season 2 fostered teamwork through Table Tennis, Badminton, Volleyball, and Football.\"\n                    onclick=\"openDomsArchiveModal(this)\">\n                    Read More\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-arch-card\" data-category=\"mar-24\">\n            <div class=\"doms-arch-card-visual\">\n                <span class=\"doms-arch-date-badge\">Mar '24<\/span>\n                <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_4gmrmp4gmrmp4gmr-e1769537407974.png\" class=\"doms-arch-img lazyload\" alt=\"Alumni Reunion\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1007;\">\n            <\/div>\n            <div class=\"doms-arch-content\">\n                <h3 class=\"doms-arch-card-title\">DoMS Alumni Reunion - Mumbai Chapter<\/h3>\n                <div class=\"doms-arch-meta-row\">\n                    <span class=\"doms-arch-meta-item\">\ud83d\udcc5 09 Mar 2024<\/span>\n                <\/div>\n                <p class=\"doms-arch-excerpt\">A nostalgic and lively affair held at the Beatle Hotel in Powai for Mumbai-based alumni.<\/p>\n                <button class=\"doms-arch-btn\" \n                    data-title=\"DoMS Alumni Reunion - Mumbai\"\n                    data-date=\"09 March 2024\"\n                    data-time=\"07:00 PM\"\n                    data-loc=\"The Beatle Hotel, Powai\"\n                    data-img=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_4gmrmp4gmrmp4gmr-e1769537407974.png\"\n                    data-desc=\"The 2024 DoMS Mumbai Reunion was a nostalgic affair attended by 30 alumni from MBA, EMBA, VLM, Ph.D., and MS programs. The event was filled with vibrant interactions, fun activities, and a delightful dinner. <br><br> The introduction of our upcoming platform for student-alumni interactions, POD, added to the excitement. DoMS continues to foster new friendships and strengthen existing bonds through such reunions.\"\n                    onclick=\"openDomsArchiveModal(this)\">\n                    Read More\n                <\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <div id=\"domsArchiveModal\" class=\"doms-modal-backdrop\">\n        <div class=\"doms-modal-window\">\n            <button class=\"doms-modal-close-btn\" onclick=\"closeDomsArchiveModal()\">&times;<\/button>\n            \n            <img decoding=\"async\" id=\"modalImg\" src=\"\" alt=\"Event\" class=\"doms-modal-header-img\">\n            \n            <div class=\"doms-modal-scroll-area\">\n                <div class=\"doms-modal-main-col\">\n                    <h2 id=\"modalTitle\" class=\"doms-modal-title\">Event Title<\/h2>\n                    <p id=\"modalDesc\" class=\"doms-modal-text\">Description...<\/p>\n                <\/div>\n\n                <div class=\"doms-modal-sidebar-col\">\n                    <div class=\"doms-modal-label\">Date<\/div>\n                    <span id=\"modalDate\" class=\"doms-modal-info\">01 Jan 2024<\/span>\n                    \n                    <div class=\"doms-modal-label\">Time<\/div>\n                    <span id=\"modalTime\" class=\"doms-modal-info\">10:00 AM<\/span>\n                    \n                    <div class=\"doms-modal-label\">Location<\/div>\n                    <span id=\"modalLoc\" class=\"doms-modal-info\">Hall 1<\/span>\n                    \n                    <div class=\"doms-modal-label\" style=\"margin-top:20px;\">Downloads<\/div>\n                    <!--<a href=\"#\" class=\"doms-modal-download-btn\">Event Brochure (PDF)<\/a>-->\n                    <a href=\"#\" class=\"doms-modal-download-btn\" style=\"background:transparent; border:1px solid #ccc; color:#333;\">----<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ 1. Filter Logic\n        function domsFilterEvents(category, btnElement) {\n            \/\/ Update Tab Styling\n            const buttons = document.querySelectorAll('.doms-arch-tab-btn');\n            buttons.forEach(btn => btn.classList.remove('active'));\n            btnElement.classList.add('active');\n\n            \/\/ Filter Grid Items\n            const cards = document.querySelectorAll('.doms-arch-card');\n            cards.forEach(card => {\n                if (category === 'all' || card.getAttribute('data-category') === category) {\n                    card.style.display = 'flex';\n                } else {\n                    card.style.display = 'none';\n                }\n            });\n        }\n\n        \/\/ 2. Modal Logic\n        function openDomsArchiveModal(button) {\n            \/\/ Retrieve Data from Button Attributes\n            const title = button.getAttribute('data-title');\n            const date = button.getAttribute('data-date');\n            const time = button.getAttribute('data-time');\n            const loc = button.getAttribute('data-loc');\n            const img = button.getAttribute('data-img');\n            const desc = button.getAttribute('data-desc');\n\n            \/\/ Populate Modal\n            document.getElementById('modalTitle').innerText = title;\n            document.getElementById('modalDate').innerText = date;\n            document.getElementById('modalTime').innerText = time;\n            document.getElementById('modalLoc').innerText = loc;\n            document.getElementById('modalImg').src = img;\n            \/\/ Use innerHTML to allow <br> tags in description\n            document.getElementById('modalDesc').innerHTML = desc;\n\n            \/\/ Show Modal\n            const modal = document.getElementById('domsArchiveModal');\n            modal.classList.add('active');\n            document.body.style.overflow = 'hidden'; \/\/ Stop background scrolling\n        }\n\n        function closeDomsArchiveModal() {\n            const modal = document.getElementById('domsArchiveModal');\n            modal.classList.remove('active');\n            document.body.style.overflow = 'auto'; \/\/ Restore scrolling\n        }\n\n        \/\/ Close on clicking outside window\n        document.getElementById('domsArchiveModal').addEventListener('click', function(e) {\n            if (e.target === this) {\n                closeDomsArchiveModal();\n            }\n        });\n    <\/script>\n<\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-de6ee42 e-con-full e-flex e-con e-parent\" data-id=\"de6ee42\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc97121 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"cc97121\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<div id=\"doms-premium-split-root\" class=\"doms-premium-split-root\">\r\n    <style>\r\n        \/* ========================================\r\n        1. SCOPED VARIABLES & RESET\r\n        ======================================== *\/\r\n        .doms-premium-split-root {\r\n            \/* Palette *\/\r\n            --prm-bg-dark: #1f0809; \/* Very deep maroon\/black *\/\r\n            --prm-maroon-panel: #2b0c0e; \/* Slightly lighter for gradient *\/\r\n            --prm-gold: #eac96e; \/* Bright Luxury Gold *\/\r\n            --prm-gold-muted: #c4a055;\r\n            --prm-white: #ffffff;\r\n            --prm-text-gray: #d0d0d0;\r\n            \r\n            \/* Typography *\/\r\n            --prm-font-serif: 'Playfair Display', Georgia, serif; \r\n            --prm-font-sans: 'Inter', system-ui, sans-serif;\r\n\r\n            \/* Dimensions *\/\r\n            --prm-border-radius: 0px; \/* Sharp editorial edges or slight curve *\/\r\n            \r\n            \/* Reset *\/\r\n            box-sizing: border-box;\r\n            width: 100%;\r\n            position: relative;\r\n            background-color: #111;\r\n            font-family: var(--prm-font-sans);\r\n            padding: 0;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .doms-premium-split-root * { box-sizing: border-box; }\r\n\r\n        \/* ========================================\r\n        2. MAIN CONTAINER\r\n        ======================================== *\/\r\n        .doms-prm-container {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            width: 100%;\r\n            min-height: 600px; \/* Tall editorial feel *\/\r\n            position: relative;\r\n        }\r\n\r\n        \/* ========================================\r\n        3. LEFT COLUMN: IMAGE & BENEFITS\r\n        ======================================== *\/\r\n        .doms-prm-col-left {\r\n            flex: 1;\r\n            flex-basis: 50%;\r\n            position: relative;\r\n            overflow: hidden;\r\n            background-color: #000;\r\n            min-height: 400px;\r\n            border-right: 4px solid var(--prm-gold); \/* The Vertical Gold Line *\/\r\n        }\r\n\r\n        \/* The Image *\/\r\n        .doms-prm-img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            filter: grayscale(100%) contrast(1.1); \/* B&W Look *\/\r\n            transition: transform 10s ease, filter 0.5s ease;\r\n        }\r\n\r\n        .doms-prm-col-left:hover .doms-prm-img {\r\n            transform: scale(1.05);\r\n            filter: grayscale(0%) contrast(1); \/* Color reveal on hover *\/\r\n        }\r\n\r\n        \/* Dark Gradient Overlay for text readability on image *\/\r\n        .doms-prm-img-overlay {\r\n            position: absolute;\r\n            bottom: 0; left: 0; width: 100%; height: 60%;\r\n            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* Diagonal Pattern Overlay (Bottom Corner) *\/\r\n        .doms-prm-pattern {\r\n            position: absolute;\r\n            bottom: 0; left: 0;\r\n            width: 150px; height: 150px;\r\n            background: repeating-linear-gradient(\r\n                45deg,\r\n                transparent,\r\n                transparent 10px,\r\n                rgba(234, 201, 110, 0.1) 10px,\r\n                rgba(234, 201, 110, 0.1) 12px\r\n            );\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* Benefits List Overlay *\/\r\n        .doms-prm-benefits {\r\n            position: absolute;\r\n            bottom: 40px;\r\n            left: 40px;\r\n            z-index: 3;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 12px;\r\n        }\r\n\r\n        .doms-prm-benefit-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            color: var(--prm-white);\r\n            font-size: 1rem;\r\n            font-weight: 500;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .doms-prm-check {\r\n            width: 24px; height: 24px;\r\n            background: var(--prm-gold);\r\n            color: #000;\r\n            border-radius: 50%;\r\n            display: flex; align-items: center; justify-content: center;\r\n            font-weight: bold;\r\n            font-size: 0.8rem;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        \/* ========================================\r\n        4. RIGHT COLUMN: CONTENT & FORM\r\n        ======================================== *\/\r\n        .doms-prm-col-right {\r\n            flex: 1;\r\n            flex-basis: 50%;\r\n            background: linear-gradient(135deg, #380e10 0%, #1f0506 100%); \/* Deep Maroon Gradient *\/\r\n            padding: 60px 80px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            position: relative;\r\n        }\r\n\r\n        \/* Background texture for right side *\/\r\n        .doms-prm-col-right::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'\/%3E%3C\/g%3E%3C\/svg%3E\");\r\n            pointer-events: none;\r\n        }\r\n\r\n        .doms-prm-headline {\r\n            font-family: var(--prm-font-serif);\r\n            font-size: 3.5rem;\r\n            line-height: 1.1;\r\n            color: var(--prm-gold);\r\n            margin: 0 0 25px 0;\r\n            font-weight: 400; \/* Editorial weight *\/\r\n        }\r\n\r\n        .doms-prm-desc {\r\n            font-size: 1.1rem;\r\n            color: var(--prm-white);\r\n            margin-bottom: 40px;\r\n            font-weight: 300;\r\n            max-width: 500px;\r\n            line-height: 1.7;\r\n        }\r\n\r\n        \/* Form Styling *\/\r\n        .doms-prm-form {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 25px;\r\n            max-width: 500px;\r\n        }\r\n\r\n        \/* Input Group with Border Box Style *\/\r\n        .doms-prm-input-wrapper {\r\n            position: relative;\r\n        }\r\n\r\n        .doms-prm-label-badge {\r\n            font-size: 0.75rem;\r\n            font-weight: 700;\r\n            color: var(--prm-gold);\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            margin-bottom: 8px;\r\n            display: block;\r\n        }\r\n\r\n        .doms-prm-input {\r\n            width: 100%;\r\n            background: transparent;\r\n            border: 1px solid var(--prm-gold);\r\n            border-radius: 6px;\r\n            padding: 16px 20px;\r\n            color: var(--prm-white);\r\n            font-size: 1rem;\r\n            font-family: var(--prm-font-sans);\r\n            outline: none;\r\n            transition: all 0.3s;\r\n            box-shadow: inset 0 0 20px rgba(0,0,0,0.2);\r\n        }\r\n\r\n        .doms-prm-input::placeholder {\r\n            color: rgba(255,255,255,0.3);\r\n        }\r\n\r\n        .doms-prm-input:focus {\r\n            background: rgba(234, 201, 110, 0.05);\r\n            box-shadow: 0 0 0 4px rgba(234, 201, 110, 0.1);\r\n        }\r\n\r\n        \/* Subscribe Button *\/\r\n        .doms-prm-btn {\r\n            background-color: var(--prm-gold);\r\n            color: #2b0c0e; \/* Dark Maroon Text *\/\r\n            border: none;\r\n            padding: 18px 30px;\r\n            font-size: 1.1rem;\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1.5px;\r\n            border-radius: 6px;\r\n            cursor: pointer;\r\n            margin-top: 10px;\r\n            transition: transform 0.2s, background 0.2s, box-shadow 0.2s;\r\n            box-shadow: 0 10px 20px rgba(0,0,0,0.3);\r\n        }\r\n\r\n        .doms-prm-btn:hover {\r\n            background-color: #fff; \/* White on hover for contrast *\/\r\n            color: #2b0c0e;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 15px 30px rgba(234, 201, 110, 0.2);\r\n        }\r\n\r\n        \/* Success Message *\/\r\n        .doms-prm-success {\r\n            display: none;\r\n            background: rgba(234, 201, 110, 0.1);\r\n            border: 1px solid var(--prm-gold);\r\n            padding: 20px;\r\n            border-radius: 6px;\r\n            text-align: center;\r\n        }\r\n        .doms-prm-success h3 { color: var(--prm-gold); margin: 0 0 5px 0; font-family: var(--prm-font-serif); }\r\n        .doms-prm-success p { color: #fff; margin: 0; }\r\n\r\n        \/* ========================================\r\n        5. RESPONSIVE DESIGN\r\n        ======================================== *\/\r\n        @media (max-width: 1024px) {\r\n            .doms-prm-container { flex-direction: column; }\r\n            \r\n            .doms-prm-col-left {\r\n                flex-basis: auto;\r\n                height: 400px;\r\n                border-right: none;\r\n                border-bottom: 4px solid var(--prm-gold);\r\n            }\r\n            \r\n            .doms-prm-col-right {\r\n                flex-basis: auto;\r\n                padding: 60px 40px;\r\n            }\r\n\r\n            .doms-prm-headline { font-size: 2.8rem; }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .doms-prm-col-left { height: 300px; }\r\n            .doms-prm-col-right { padding: 40px 25px; }\r\n            .doms-prm-headline { font-size: 2.2rem; }\r\n            .doms-prm-input { padding: 14px; }\r\n            .doms-prm-btn { width: 100%; }\r\n            \r\n            \/* Adjust benefits overlay for mobile *\/\r\n            .doms-prm-benefits { bottom: 20px; left: 20px; }\r\n            .doms-prm-benefit-item { font-size: 0.85rem; }\r\n        }\r\n    <\/style>\r\n\r\n<!--    <div class=\"doms-prm-container\">-->\r\n        \r\n<!--        <div class=\"doms-prm-col-left\">-->\r\n<!--            <div class=\"doms-prm-pattern\"><\/div>-->\r\n<!--            <div class=\"doms-prm-img-overlay\"><\/div>-->\r\n<!--            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1544531586-fde5298cdd40?q=80&w=2070&auto=format&fit=crop\" -->\r\n<!--                 alt=\"DoMS Lecture Hall\" -->\r\n<!--                 class=\"doms-prm-img\">-->\r\n            \r\n<!--            <div class=\"doms-prm-benefits\">-->\r\n<!--                <div class=\"doms-prm-benefit-item\">-->\r\n<!--                    <div class=\"doms-prm-check\">\u2713<\/div> Weekly Event Digest-->\r\n<!--                <\/div>-->\r\n<!--                <div class=\"doms-prm-benefit-item\">-->\r\n<!--                    <div class=\"doms-prm-check\">\u2713<\/div> Research Publications-->\r\n<!--                <\/div>-->\r\n<!--                <div class=\"doms-prm-benefit-item\">-->\r\n<!--                    <div class=\"doms-prm-check\">\u2713<\/div> Alumni Networking-->\r\n<!--                <\/div>-->\r\n<!--            <\/div>-->\r\n<!--        <\/div>-->\r\n\r\n<!--        <div class=\"doms-prm-col-right\">-->\r\n<!--            <h2 class=\"doms-prm-headline\">Stay Ahead of the Curve<\/h2>-->\r\n<!--            <p class=\"doms-prm-desc\">-->\r\n<!--                Subscribe to the DoMS Insider. Receive curated intelligence on research breakthroughs, upcoming hackathons, and exclusive leadership seminars directly to your inbox.-->\r\n<!--            <\/p>-->\r\n\r\n<!--            <form id=\"domsPremiumForm\" class=\"doms-prm-form\" onsubmit=\"domsPrmSubmit(event)\">-->\r\n                \r\n<!--                <div class=\"doms-prm-input-wrapper\">-->\r\n<!--                    <label class=\"doms-prm-label-badge\">Full Name<\/label>-->\r\n<!--                    <input type=\"text\" class=\"doms-prm-input\" placeholder=\"e.g. Aditi Sharma\" required>-->\r\n<!--                <\/div>-->\r\n\r\n<!--                <div class=\"doms-prm-input-wrapper\">-->\r\n<!--                    <label class=\"doms-prm-label-badge\">Email Address<\/label>-->\r\n<!--                    <input type=\"email\" class=\"doms-prm-input\" placeholder=\"name@domain.com\" required>-->\r\n<!--                <\/div>-->\r\n\r\n<!--                <button type=\"submit\" class=\"doms-prm-btn\">Subscribe Now<\/button>-->\r\n<!--            <\/form>-->\r\n\r\n<!--            <div id=\"domsPrmSuccess\" class=\"doms-prm-success\">-->\r\n<!--                <h3>Welcome!<\/h3>-->\r\n<!--                <p>You have successfully subscribed to the Insider.<\/p>-->\r\n<!--            <\/div>-->\r\n<!--        <\/div>-->\r\n\r\n<!--    <\/div>-->\r\n\r\n<!--    <script>-->\r\n<!--        function domsPrmSubmit(e) {-->\r\n<!--            e.preventDefault();-->\r\n<!--            const btn = document.querySelector('.doms-prm-btn');-->\r\n<!--            const originalText = btn.innerText;-->\r\n            \r\n<!--            btn.innerText = \"Processing...\";-->\r\n<!--            btn.style.opacity = \"0.7\";-->\r\n            \r\n<!--            setTimeout(() => {-->\r\n<!--                document.getElementById('domsPremiumForm').style.display = 'none';-->\r\n<!--                document.getElementById('domsPrmSuccess').style.display = 'block';-->\r\n<!--            }, 1500);-->\r\n<!--        }-->\r\n<!--    <\/script>-->\r\n<!--<\/div>-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>EVENTS &#038; Activities Samanvay 2026 Corporate Wisdom Convocation Samanvay Fest Investiture Academic Calendar Upcoming Events Conference 8th Pan-IIT ICFMCF 2026 The 8th Pan-IIT International Conference on Financial Markets &#038; Corporate Finance held at DoMS, IIT Madras. View Details &rarr; EVENT Ongoing Symposium DoMS Research Symposium 2026 A platform for scholars to present cutting-edge research. Jan&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":15127,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-58636","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/comments?post=58636"}],"version-history":[{"count":590,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58636\/revisions"}],"predecessor-version":[{"id":75516,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58636\/revisions\/75516"}],"up":[{"embeddable":true,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/15127"}],"wp:attachment":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/media?parent=58636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}