{"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-07-01T18:07:33","modified_gmt":"2026-07-01T12:37:33","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\/07\/1782814055215.jpeg\" class=\"doms-evt-img lazyload\" alt=\"Symposium\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/618;\">\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\">Advisory Board meeting<\/span><\/div>\n                <h3 class=\"doms-evt-headline\">DoMS Advisory Board Meeting 2026<\/h3>\n                <p class=\"doms-evt-excerpt\">The Department of Management Studies, IIT Madras, was privileged to host the DoMS Advisory Board Meeting 2026, bringing together distinguished leaders from industry and academia for meaningful discussions on the department's strategic priorities.<\/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\" id = \"gallery-main-img\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/07\/1782814055012.jpeg\" style=\"--smush-placeholder-width: 1139px; --smush-placeholder-aspect-ratio: 1139\/534;filter:none\"class=\"doms-evt-modal-img lazyload\" alt=\"boardmeeting\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <\/div>\n            <div class=\"doms-evt-modal-info\">\n                <span class=\"doms-evt-modal-cat\">Advisory Board Meeting<\/span>\n                <h2 class=\"doms-evt-modal-head\">DoMS Advisory Board Meeting 2026<\/h2>\n                <div class=\"doms-evt-modal-body\">\n                    <p>The Department of Management Studies, IIT Madras, was privileged to host the DoMS Advisory Board Meeting 2026, bringing together distinguished leaders from industry and academia for meaningful discussions on the department's strategic priorities.\n\nThe meeting focused on key areas including the department's future vision, industry engagement and corporate partnerships, global accreditation, brand positioning, and infrastructure development, reaffirming our commitment to building a globally relevant and industry-connected management school.<\/p>\n                    <ul>\n                        <li><strong>Dates:<\/strong> June 26, 2026<\/li>\n                    <\/ul>\n                <\/div>\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\/07\/1782814055215.jpeg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/618;\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/07\/1782814054915.jpeg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/960;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/07\/1782814054675.jpeg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/960;\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/07\/doms-adv.jpeg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/960;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/07\/1782814055419.jpeg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1015px; --smush-placeholder-aspect-ratio: 1015\/479;\">\n                        \n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/07\/1782814055012.jpeg\" class=\"doms-gallery-item lazyload\" onclick=\"swapGalleryImage(this.src)\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1139px; --smush-placeholder-aspect-ratio: 1139\/534;\">\n                       \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\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 Concluded Advisory Board meeting DoMS Advisory Board Meeting 2026 The Department of Management Studies, IIT&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":608,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58636\/revisions"}],"predecessor-version":[{"id":77299,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58636\/revisions\/77299"}],"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}]}}