{"id":58904,"date":"2025-12-14T00:23:12","date_gmt":"2025-12-13T18:53:12","guid":{"rendered":"https:\/\/doms.iitm.ac.in\/wordpress\/?page_id=58904"},"modified":"2026-03-06T11:00:58","modified_gmt":"2026-03-06T05:30:58","slug":"student-club","status":"publish","type":"page","link":"https:\/\/doms.iitm.ac.in\/index.php\/people\/studentdoms\/student-club\/","title":{"rendered":"student club"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"58904\" class=\"elementor elementor-58904\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-165c8d0 e-con-full e-flex e-con e-parent\" data-id=\"165c8d0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-978d69f elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"978d69f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"doms-club-hero-root\" class=\"doms-ch-wrapper\">\n\n    <div class=\"doms-ch-slider\">\n        <div class=\"doms-ch-texture\"><\/div>\n        <div class=\"doms-ch-wash\"><\/div>\n\n        <div class=\"doms-ch-slide active\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_00-51-10-2-e1770199649241.jpg\" alt=\"Student Collaboration\" class=\"doms-ch-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 766px; --smush-placeholder-aspect-ratio: 766\/730;\">\n        <\/div>\n        <div class=\"doms-ch-slide\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_00-51-04.jpg\" alt=\"Club Events\" class=\"doms-ch-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1166px; --smush-placeholder-aspect-ratio: 1166\/1280;\">\n        <\/div>\n        <div class=\"doms-ch-slide\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_00-51-37-2.jpg\" alt=\"Student Passion\" class=\"doms-ch-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/943;\">\n        <\/div>\n        <div class=\"doms-ch-slide\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/02\/9884177994_Purity-of-Character-is-Instis-education-Flora-3-scaled.jpeg\" alt=\"Student Passion\" class=\"doms-ch-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1201;\">\n        <\/div>\n    <\/div>\n\n    <div class=\"doms-ch-content\">\n        <div class=\"doms-ch-container\">\n            \n            <!--<div class=\"doms-ch-badge\">Student Life<\/div>-->\n            \n            <h1 class=\"doms-ch-title\">\n                <span class=\"line-1\">Beyond<\/span>\n                <span class=\"line-2\">Academics<\/span>\n            <\/h1>\n            \n            <div class=\"doms-ch-divider\"><\/div>\n            \n            <!--<p class=\"doms-ch-subtitle\">-->\n            <!--    Where <span class=\"highlight\">Passion<\/span> Meets Practice. <br>-->\n            <!--    The vibrant ecosystem of DoMS Student Clubs.-->\n            <!--<\/p>-->\n\n            <!--<div class=\"doms-ch-explore\">-->\n            <!--    <span class=\"text\">Explore Clubs<\/span>-->\n            <!--    <div class=\"icon-track\">-->\n            <!--        <svg class=\"arrow-down\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 5v14M19 12l-7 7-7-7\"\/><\/svg>-->\n            <!--    <\/div>-->\n            <!--<\/div>-->\n\n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", () => {\n            const slides = document.querySelectorAll('.doms-ch-slide');\n            let currentSlide = 0;\n            const intervalTime = 5000; \/\/ 5 seconds per slide\n\n            function nextSlide() {\n                \/\/ Remove active class from current\n                slides[currentSlide].classList.remove('active');\n                \n                \/\/ Calculate next\n                currentSlide = (currentSlide + 1) % slides.length;\n                \n                \/\/ Add active class to next\n                slides[currentSlide].classList.add('active');\n            }\n\n            \/\/ Start Loop\n            setInterval(nextSlide, intervalTime);\n        });\n    <\/script>\n<\/div>\n<style>\n    \/* -------------------------------------------------------------\n   DOMS STUDENT CLUB HERO (LIGHT & VIBRANT)\n   Theme: Ivory\/White, Maroon, Gold\n   Style: Cinematic, Network Texture, Editorial\n   ------------------------------------------------------------- *\/\n\n\/* Import Fonts *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;600;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');\n\n\/* --- ROOT WRAPPER --- *\/\n#doms-club-hero-root {\n    \/* Scoped Variables *\/\n    --dch-bg: #F9F7F2;       \/* Ivory Base *\/\n    --dch-maroon: #800000;   \/* IITM Maroon *\/\n    --dch-gold: #D4AF37;     \/* Brand Gold *\/\n    --dch-black: #1a1a1a;    \/* Text Color *\/\n    --dch-gray: #555555;     \/* Subtitle Color *\/\n    \n    width: 100%;\n    height: 70vh; \/* Full viewport height minus header *\/\n    min-height: 500px;\n    box-sizing: border-box;\n    font-family: 'Manrope', sans-serif;\n    position: relative;\n    overflow: hidden;\n    color: var(--dch-black);\n    background-color: var(--dch-bg);\n}\n\n#doms-club-hero-root * {\n    box-sizing: border-box;\n    margin: 0; padding: 0; text-decoration: none; list-style: none;\n}\n\n\/* --- 1. BACKGROUND SLIDER --- *\/\n#doms-club-hero-root .doms-ch-slider {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    z-index: 0;\n}\n\n\/* Texture Overlay (Network Lines) *\/\n#doms-club-hero-root .doms-ch-texture {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background-image: \n        radial-gradient(var(--dch-gray) 1px, transparent 1px),\n        radial-gradient(var(--dch-gray) 1px, transparent 1px);\n    background-size: 40px 40px;\n    background-position: 0 0, 20px 20px;\n    opacity: 0.05; \/* Subtle texture *\/\n    z-index: 2;\n}\n\n\/* White Wash (Ensures readability) *\/\n#doms-club-hero-root .doms-ch-wash {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background: linear-gradient(to bottom, \n        rgba(249, 247, 242, 0.5) 0%, \n        rgba(249, 247, 242, 0.1) 50%, \n        rgba(249, 247, 242, 0.5) 100%);\n    z-index: 3;\n}\n\n\/* Individual Slides *\/\n#doms-club-hero-root .doms-ch-slide {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    opacity: 0;\n    transition: opacity 1.5s ease-in-out;\n    z-index: 1;\n}\n\n#doms-club-hero-root .doms-ch-slide.active {\n    opacity: 1;\n}\n\n#doms-club-hero-root .doms-ch-img {\n    width: 100%; height: 100%;\n    object-fit: cover;\n    transform: scale(1);\n    transition: transform 6s ease-out;\n    filter: none;\n}\n\n#doms-club-hero-root .doms-ch-slide.active .doms-ch-img {\n    transform: scale(1.1); \/* Ken Burns Effect *\/\n}\n\n\/* --- 2. CONTENT LAYER --- *\/\n#doms-club-hero-root .doms-ch-content {\n    position: relative;\n    z-index: 4;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n}\n\n#doms-club-hero-root .doms-ch-container {\n    max-width: 900px;\n    padding: 0 20px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n\/* Badge *\/\n#doms-club-hero-root .doms-ch-badge {\n    font-size: 12px;\n    font-weight: 800;\n    text-transform: uppercase;\n    letter-spacing: 3px;\n    color: var(--dch-maroon);\n    border: 1px solid rgba(128, 0, 0, 0.2);\n    padding: 8px 16px;\n    border-radius: 50px;\n    margin-bottom: 30px;\n    background: rgba(255,255,255,0.5);\n    backdrop-filter: blur(5px);\n    animation: domsFadeUp 1s ease-out forwards;\n}\n\n\/* Main Title *\/\n#doms-club-hero-root .doms-ch-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 150px;\n    line-height: 1;\n    color: var(--dch-black);\n    margin-bottom: 20px;\n    font-weight: 1000;\n}\n\n#doms-club-hero-root .doms-ch-title span {\n    display: block;\n    opacity: 0;\n    transform: translateY(30px);\n}\n\n#doms-club-hero-root .line-1 {\n    font-weight: 400;\n    font-style: italic;\n    animation: domsFadeUp 1s ease-out 0.2s forwards;\n}\n\n#doms-club-hero-root .line-2 {\n    font-weight: 800;\n    color: var(--dch-maroon);\n    animation: domsFadeUp 1s ease-out 0.4s forwards;\n}\n\n\/* Divider *\/\n#doms-club-hero-root .doms-ch-divider {\n    width: 80px; height: 4px;\n    background: var(--dch-gold);\n    margin: 20px auto 30px auto;\n    border-radius: 2px;\n    animation: domsWidth 1s ease-out 0.6s forwards;\n    width: 0; \/* Animated to 80px *\/\n}\n\n\/* Subtitle *\/\n#doms-club-hero-root .doms-ch-subtitle {\n    font-size: 20px;\n    line-height: 1.6;\n    color: var(--dch-gray);\n    max-width: 600px;\n    margin-bottom: 50px;\n    opacity: 0;\n    animation: domsFadeUp 1s ease-out 0.8s forwards;\n}\n\n#doms-club-hero-root .highlight {\n    color: var(--dch-black);\n    font-weight: 700;\n    position: relative;\n    display: inline-block;\n}\n\n\/* Gold highlighter effect *\/\n#doms-club-hero-root .highlight::after {\n    content: '';\n    position: absolute;\n    bottom: 2px; left: 0; width: 100%; height: 8px;\n    background: rgba(212, 175, 55, 0.2);\n    z-index: -1;\n}\n\n\/* --- SCROLL INDICATOR --- *\/\n#doms-club-hero-root .doms-ch-explore {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n    cursor: pointer;\n    opacity: 0;\n    animation: domsFadeUp 1s ease-out 1s forwards;\n}\n\n#doms-club-hero-root .text {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    font-weight: 700;\n    color: var(--dch-black);\n}\n\n#doms-club-hero-root .icon-track {\n    width: 40px; height: 60px;\n    border: 2px solid rgba(26, 26, 26, 0.1);\n    border-radius: 20px;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    padding-top: 8px;\n}\n\n#doms-club-hero-root .arrow-down {\n    width: 20px; height: 20px;\n    color: var(--dch-maroon);\n    animation: domsScrollBounce 2s infinite;\n}\n\n\/* --- ANIMATIONS --- *\/\n@keyframes domsFadeUp {\n    from { opacity: 0; transform: translateY(30px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes domsWidth {\n    from { width: 0; }\n    to { width: 80px; }\n}\n\n@keyframes domsScrollBounce {\n    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n    40% { transform: translateY(10px); }\n    60% { transform: translateY(5px); }\n}\n\n\/* --- RESPONSIVE MEDIA QUERIES --- *\/\n@media screen and (max-width: 768px) {\n    #doms-club-hero-root {\n        height: auto;\n        min-height: 500px;\n        padding: 80px 0;\n    }\n\n    #doms-club-hero-root .doms-ch-title {\n        font-size: 48px; \/* Smaller title on mobile *\/\n    }\n\n    #doms-club-hero-root .doms-ch-subtitle {\n        font-size: 16px;\n        padding: 0 15px;\n    }\n\n    #doms-club-hero-root .doms-ch-badge {\n        margin-bottom: 20px;\n    }\n    \n    #doms-club-hero-root .doms-ch-divider {\n        margin: 15px auto 25px auto;\n    }\n}\n\n@media screen and (max-width: 480px) {\n    #doms-club-hero-root .doms-ch-title {\n        font-size: 42px;\n    }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c3f0ff5 e-flex e-con-boxed e-con e-parent\" data-id=\"c3f0ff5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1729fed elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"1729fed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@400;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* =========================================\r\n       CSS ISOLATION: DoMS Maroon Sticky Nav (Mobile Fixed)\r\n       ========================================= *\/\r\n\r\n    #doms-nav-maroon-root {\r\n        \/* --- Theme Variables --- *\/\r\n        --nav-font: 'Lato', sans-serif;\r\n        \r\n        \/* Palette *\/\r\n        --nav-bg: #800000;        \/* Deep IITM Maroon *\/\r\n        --nav-gold: #FFD700;      \/* Golden Yellow *\/\r\n        --nav-white: #ffffff;     \/* Pure White *\/\r\n        \r\n        \/* Dimensions *\/\r\n        --nav-height: 70px;\r\n\r\n        \/* Sticky Positioning *\/\r\n        width: 100%;\r\n        font-family: var(--nav-font);\r\n        box-sizing: border-box;\r\n        position: sticky; \r\n        top: 0;\r\n        z-index: 9999; \/* Highest priority *\/\r\n        background-color: var(--nav-bg);\r\n        box-shadow: 0 4px 20px rgba(0,0,0,0.25);\r\n        border-bottom: 1px solid rgba(255, 215, 0, 0.3); \/* Gold Line *\/\r\n    }\r\n\r\n    #doms-nav-maroon-root * { box-sizing: border-box; }\r\n\r\n    \/* Container *\/\r\n    .doms-nav-container {\r\n        max-width: 1400px;\r\n        height: var(--nav-height);\r\n        margin: 0 auto;\r\n        display: flex;\r\n        align-items: center;\r\n        \r\n        \/* DESKTOP DEFAULT: Center aligned *\/\r\n        justify-content: center; \r\n        \r\n        padding: 0 20px;\r\n        \r\n        \/* SCROLL SETUP *\/\r\n        overflow-x: auto; \r\n        overflow-y: hidden;\r\n        \r\n        \/* Smooth Mobile Scroll *\/\r\n        -webkit-overflow-scrolling: touch; \r\n        scrollbar-width: none; \/* Firefox hide *\/\r\n        -ms-overflow-style: none; \/* IE hide *\/\r\n        scroll-behavior: smooth;\r\n    }\r\n\r\n    \/* Hide Webkit Scrollbar *\/\r\n    .doms-nav-container::-webkit-scrollbar { display: none; }\r\n\r\n    \/* Navigation List *\/\r\n    .doms-nav-list {\r\n        display: flex;\r\n        list-style: none;\r\n        padding: 0;\r\n        margin: 0;\r\n        gap: 12px; \/* Spacing between boxes *\/\r\n        height: 100%;\r\n        align-items: center;\r\n    }\r\n\r\n    .doms-nav-item {\r\n        flex-shrink: 0; \/* Critical: Prevents items from squishing *\/\r\n    }\r\n\r\n    \/* Links (The Pill Boxes) *\/\r\n    .doms-nav-link {\r\n        text-decoration: none;\r\n        color: var(--nav-white);\r\n        font-size: 0.85rem;\r\n        font-weight: 700;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        white-space: nowrap; \/* Forces single line text *\/\r\n        \r\n        \/* Box Styling *\/\r\n        display: inline-block;\r\n        padding: 10px 22px;\r\n        border-radius: 50px; \/* Pill Shape *\/\r\n        border: 1px solid rgba(255, 255, 255, 0.3); \/* Subtle White Border *\/\r\n        transition: all 0.2s ease-in-out;\r\n        background-color: transparent;\r\n        cursor: pointer;\r\n        -webkit-tap-highlight-color: transparent; \/* Removes blue tap box on mobile *\/\r\n    }\r\n\r\n    \/* Hover State (Desktop) *\/\r\n    @media (hover: hover) {\r\n        .doms-nav-link:hover {\r\n            background-color: rgba(255, 255, 255, 0.1);\r\n            border-color: var(--nav-white);\r\n            transform: translateY(-1px);\r\n        }\r\n    }\r\n\r\n    \/* ACTIVE & CLICK STATE (Golden Yellow) *\/\r\n    .doms-nav-link.active,\r\n    .doms-nav-link:active {\r\n        background-color: var(--nav-gold) !important;\r\n        color: var(--nav-bg) !important; \/* Maroon Text on Gold *\/\r\n        border-color: var(--nav-gold) !important;\r\n        box-shadow: 0 4px 10px rgba(0,0,0,0.3);\r\n        font-weight: 800;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    \/* --- MOBILE RESPONSIVE FIXES --- *\/\r\n    @media (max-width: 1024px) {\r\n        .doms-nav-container {\r\n            \/* CRITICAL FIX: Left align allows scrolling from the start *\/\r\n            justify-content: flex-start; \r\n            padding: 0 15px;\r\n        }\r\n        \r\n        .doms-nav-list {\r\n            \/* Add padding at the end so the last item isn't flush with screen edge *\/\r\n            padding-right: 30px; \r\n        }\r\n\r\n        .doms-nav-link {\r\n            font-size: 0.75rem; \/* Readable but compact *\/\r\n            padding: 8px 16px;\r\n        }\r\n    }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!--<nav id=\"doms-nav-maroon-root\">-->\r\n<!--    <div class=\"doms-nav-container\">-->\r\n<!--        <ul class=\"doms-nav-list\">-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#kalakriti\" class=\"doms-nav-link\">Arts<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#enigma\" class=\"doms-nav-link\">Analytics<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#litsoc\" class=\"doms-nav-link\">Literary<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#fin-addicts\" class=\"doms-nav-link\">Finance<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#fohrum\" class=\"doms-nav-link\">HR<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#mercado\" class=\"doms-nav-link\">Marketing<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#opera-house\" class=\"doms-nav-link\">Operations<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#cognora\" class=\"doms-nav-link\">Consulting<\/a><\/li>-->\r\n<!--            <li class=\"doms-nav-item\"><a href=\"#research\" class=\"doms-nav-link\">Research<\/a><\/li>-->\r\n<!--        <\/ul>-->\r\n<!--    <\/div>-->\r\n<!--<\/nav>-->\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \r\n    const navLinks = document.querySelectorAll('.doms-nav-link');\r\n    const navContainer = document.querySelector('.doms-nav-container');\r\n    \r\n    \/\/ Helper: Find valid sections on the page\r\n    const sections = Array.from(navLinks).map(link => {\r\n        const id = link.getAttribute('href').substring(1);\r\n        return document.getElementById(id);\r\n    }).filter(section => section !== null);\r\n\r\n    \/\/ 1. CLICK HANDLER (Instant Gold & Auto-Center)\r\n    navLinks.forEach(anchor => {\r\n        anchor.addEventListener('click', function (e) {\r\n            e.preventDefault();\r\n            \r\n            \/\/ UI Feedback: Set Active Immediately\r\n            navLinks.forEach(link => link.classList.remove('active'));\r\n            this.classList.add('active');\r\n\r\n            \/\/ Scroll Logic\r\n            const targetId = this.getAttribute('href').substring(1);\r\n            const targetSection = document.getElementById(targetId);\r\n            \r\n            if (targetSection) {\r\n                \/\/ Offset calculation (Nav Height + Padding)\r\n                const offset = 90; \r\n                const bodyRect = document.body.getBoundingClientRect().top;\r\n                const elementRect = targetSection.getBoundingClientRect().top;\r\n                const elementPosition = elementRect - bodyRect;\r\n                const offsetPosition = elementPosition - offset;\r\n\r\n                window.scrollTo({\r\n                    top: offsetPosition,\r\n                    behavior: \"smooth\"\r\n                });\r\n                \r\n                \/\/ CRITICAL: Auto-center the clicked item in the horizontal scroll bar\r\n                this.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ 2. SCROLL SPY (Highlight as you scroll)\r\n    function onScroll() {\r\n        let scrollPosition = window.scrollY + 150; \/\/ Offset to trigger highlighted state early\r\n\r\n        let currentSection = null;\r\n\r\n        sections.forEach(section => {\r\n            \/\/ Check if section is in view\r\n            if (section.offsetTop <= scrollPosition && (section.offsetTop + section.offsetHeight) > scrollPosition) {\r\n                currentSection = section;\r\n            }\r\n        });\r\n\r\n        if (currentSection) {\r\n            const activeLink = document.querySelector(`.doms-nav-link[href=\"#${currentSection.id}\"]`);\r\n            \r\n            \/\/ If the active section changed, update UI\r\n            if (activeLink && !activeLink.classList.contains('active')) {\r\n                navLinks.forEach(link => link.classList.remove('active'));\r\n                activeLink.classList.add('active');\r\n                \r\n                \/\/ CRITICAL: Keep the active button visible on mobile scroll automatically\r\n                activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\r\n            }\r\n        }\r\n    }\r\n\r\n    \/\/ Optimize Scroll Event (Performance)\r\n    let ticking = false;\r\n    window.addEventListener('scroll', function() {\r\n        if (!ticking) {\r\n            window.requestAnimationFrame(function() {\r\n                onScroll();\r\n                ticking = false;\r\n            });\r\n            ticking = true;\r\n        }\r\n    });\r\n    \r\n    \/\/ Initial call to set active state on load\r\n    onScroll();\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a8f761 e-con-full e-flex e-con e-parent\" data-id=\"4a8f761\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b77580 elementor-widget__width-inherit elementor-widget-mobile__width-inherit elementor-widget elementor-widget-html\" data-id=\"9b77580\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"doms-v6-root\" class=\"doms-wrapper\">\n    \n    <div class=\"doms-hero\">\n        <div class=\"doms-hero-overlay\"><\/div>\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1547891654-e66ed7ebb968?q=80&w=2070&auto=format&fit=crop\" \n             alt=\"DoMS IITM Campus Art\" \n             class=\"doms-hero-bg\" \/>\n        \n        <div class=\"doms-hero-content\">\n            <span class=\"doms-tag\">DoMS IIT Madras<\/span>\n            <h1 class=\"doms-title\">Kalakriti<span class=\"doms-dot\">.<\/span><\/h1>\n            <p class=\"doms-subtitle\">Celebrating creativity beyond the classroom.<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"doms-mission-grid\">\n        <div class=\"doms-card-white doms-anim\">\n            <div class=\"doms-icon-gold\">\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"><\/path><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"><\/path><\/svg>\n            <\/div>\n            <h2 class=\"doms-head-sm\">What do we do?<\/h2>\n            <div class=\"doms-divider\"><\/div>\n            <p class=\"doms-txt\">We provide a platform which goes beyond academics and keeps the students engaged in creative activities amidst rigorous schedules.<\/p>\n        <\/div>\n\n        <div class=\"doms-card-img doms-anim\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_00-51-37.jpg\" class=\"doms-cover-img lazyload\" alt=\"Art students\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 881px; --smush-placeholder-aspect-ratio: 881\/1280;\" \/>\n        <\/div>\n\n        <div class=\"doms-card-maroon doms-anim\">\n            <div class=\"doms-icon-white\">\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 6v6l4 2\"><\/path><\/svg>\n            <\/div>\n            <h2 class=\"doms-head-sm doms-txt-white\">What do we aim for?<\/h2>\n            <div class=\"doms-divider doms-div-gold\"><\/div>\n            <p class=\"doms-txt doms-txt-white-op\">Make recreational activities a part of life at DoMS. Support and promote art enthusiasts to grow and contribute to activities held at DoMS.<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"doms-gallery-section\">\n        <div class=\"doms-gallery-header\">\n            <h3 class=\"doms-section-title\">Life at Kalakriti<\/h3>\n            <p class=\"doms-section-sub\">Recent workshops, exhibitions, and campus creative runs.<\/p>\n        <\/div>\n\n        <div class=\"doms-gallery-viewport\">\n            <button class=\"doms-gallery-btn doms-btn-left\" id=\"doms-gal-prev\">&#10094;<\/button>\n            <button class=\"doms-gallery-btn doms-btn-right\" id=\"doms-gal-next\">&#10095;<\/button>\n\n            <div class=\"doms-gallery-track\" id=\"doms-gal-track\">\n                <div class=\"doms-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_00-51-12.jpg\" alt=\"Sketching Workshop\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/1265;\">\n                    <div class=\"doms-slide-caption\">\n                        <h4>Sketching Workshop<\/h4>\n                        <p>Exploring charcoal techniques.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"doms-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_01-26-49-2.jpg\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/959;\">\n                    <div class=\"doms-slide-caption\">\n                        <h4>Canvas Day<\/h4>\n                        <p>Students expressing colors on canvas.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"doms-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_01-26-49.jpg\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/960;\">\n                    <div class=\"doms-slide-caption\">\n                        <h4>Annual Exhibition<\/h4>\n                        <p>Showcasing the best talent of the year.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"doms-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_01-10-35-2.jpg\" alt=\"Pottery\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1271px; --smush-placeholder-aspect-ratio: 1271\/1280;\">\n                    <div class=\"doms-slide-caption\">\n                        <h4>Craft & Clay<\/h4>\n                        <p>Hands-on pottery sessions.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"doms-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/photo_2026-01-28_01-10-35.jpg\" alt=\"Writing\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1278px; --smush-placeholder-aspect-ratio: 1278\/1280;\">\n                    <div class=\"doms-slide-caption\">\n                        <h4>Creative Writing<\/h4>\n                        <p>Where art meets literature.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"doms-team-section\">\n        <div class=\"doms-team-header-row\">\n            <div>\n                <h3 class=\"doms-section-title\">The Conveners<\/h3>\n                <p class=\"doms-section-sub\">The team behind the scenes.<\/p>\n            <\/div>\n            <div class=\"doms-nav-btns-small\">\n                <button class=\"doms-nav-btn-small\" id=\"doms-tm-prev\" aria-label=\"Previous Member\">&#8592;<\/button>\n                <button class=\"doms-nav-btn-small\" id=\"doms-tm-next\" aria-label=\"Next Member\">&#8594;<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-team-viewport\" id=\"doms-tm-viewport\">\n            \n            <div class=\"doms-member-card\">\n                <div class=\"doms-img-frame\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Sruty-scaled.jpg\" alt=\"Sruthy Biju Kumar\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                <\/div>\n                <div class=\"doms-info\">\n                    <h4>Sruthy Biju Kumar<\/h4>\n                    <span>Convener<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-member-card\">\n                <div class=\"doms-img-frame\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Derick-scaled.jpg\" alt=\"Derick Martin\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                <\/div>\n                <div class=\"doms-info\">\n                    <h4>Derick Martin<\/h4>\n                    <span>Convener<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-member-card\">\n                <div class=\"doms-img-frame\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Mohit-1-scaled.jpg\" alt=\"Mohit Kumar Kumawat\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                <\/div>\n                <div class=\"doms-info\">\n                    <h4>Mohit Kumar Kumawat<\/h4>\n                    <span>Convener<\/span>\n                <\/div>\n            <\/div>\n\n\n\n            <div style=\"min-width: 1px; flex-shrink:0;\"><\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* =========================================\n   SCOPED CSS (ID: #doms-v6-root)\n   ========================================= *\/\n\n#doms-v6-root {\n    --d-maroon: #800000;\n    --d-gold: #D4AF37;\n    --d-sand: #F9F9F7;\n    --d-text: #2C2C2C;\n    --d-gray: #666;\n    --d-white: #FFF;\n    --d-font-h: \"Merriweather\", serif;\n    --d-font-b: \"Lato\", sans-serif;\n    \n    font-family: var(--d-font-b);\n    background: var(--d-sand);\n    color: var(--d-text);\n    width: 100%;\n    overflow-x: hidden;\n    line-height: 1.5;\n    box-sizing: border-box;\n}\n\n#doms-v6-root * { box-sizing: border-box; }\n\n\/* 1. HERO *\/\n#doms-v6-root .doms-hero {\n    position: relative; height: 50vh; min-height: 350px; display: flex; align-items: center; justify-content: center; overflow: hidden;\n}\n#doms-v6-root .doms-hero-bg {\n    position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;\n    filter: none\n}\n#doms-v6-root .doms-hero-overlay {\n    position: absolute; top:0; left:0; width: 100%; height: 100%;\n    background: linear-gradient(90deg, rgba(128,0,0,0.9) 0%, rgba(0,0,0,0.4) 100%);\n}\n#doms-v6-root .doms-hero-content {\n    position: relative; z-index: 2; text-align: center; color: var(--d-white); padding: 20px;\n}\n#doms-v6-root .doms-tag {\n    color: var(--d-gold); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 0.85rem; display: block; margin-bottom: 10px;\n}\n#doms-v6-root .doms-title {\n    font-family: var(--d-font-h); font-size: 3.5rem; margin: 0 0 1rem 0; font-weight: 300;\n}\n#doms-v6-root .doms-dot { color: var(--d-gold); }\n\n\n\n\/* 2. MISSION GRID *\/\n#doms-v6-root .doms-mission-grid {\n    display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 1200px; margin: -50px auto 0 auto; position: relative; z-index: 5; padding: 0 20px;\n}\n#doms-v6-root .doms-card-white, \n#doms-v6-root .doms-card-maroon {\n    padding: 3rem 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n}\n#doms-v6-root .doms-card-white { background: var(--d-white); }\n#doms-v6-root .doms-card-maroon { background: var(--d-maroon); color: var(--d-white); }\n#doms-v6-root .doms-card-img { height: 100%; min-height: 300px; background: #ddd; position: relative; overflow: hidden; }\n#doms-v6-root .doms-cover-img { width: 100%; height: 100%; \n\/*object-fit: cover; *\/\nfilter: none;\n    \n}\n#doms-v6-root .doms-head-sm { font-family: var(--d-font-h); font-size: 1.5rem; margin: 1rem 0; }\n#doms-v6-root .doms-divider { width: 50px; height: 3px; background: var(--d-maroon); margin-bottom: 1rem; }\n#doms-v6-root .doms-div-gold { background: var(--d-gold); }\n#doms-v6-root .doms-txt-white-op { opacity: 0.85; }\n\n\/* 3. GALLERY SLIDESHOW *\/\n#doms-v6-root .doms-gallery-section {\n    max-width: 1200px; margin: 5rem auto 3rem auto; padding: 0 20px;\n}\n#doms-v6-root .doms-section-title {\n    font-family: var(--d-font-h); font-size: 2.2rem; color: var(--d-maroon); margin: 0;\n}\n#doms-v6-root .doms-section-sub { color: var(--d-gray); margin: 0.5rem 0 1.5rem 0; }\n\n#doms-v6-root .doms-gallery-viewport {\n    width: 100%; height: 600px; position: relative; overflow: hidden;\n    border-radius: 4px; box-shadow: 0 15px 40px rgba(0,0,0,0.1);\n}\n#doms-v6-root .doms-gallery-track {\n    display: flex; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n}\n#doms-v6-root .doms-slide {\n    min-width: 100%; height: 100%; position: relative;\n}\n#doms-v6-root .doms-slide img {\n    width: 100%; height: 100%; \n    object-fit: cover;\n    filter: none\n}\n#doms-v6-root .doms-slide-caption {\n    position: absolute; bottom: 30px; left: 30px;\n    background: rgba(255, 255, 255, 0.9); padding: 15px 25px;\n    border-left: 4px solid var(--d-maroon); max-width: 400px; backdrop-filter: blur(5px);\n}\n#doms-v6-root .doms-slide-caption h4 {\n    margin: 0 0 5px 0; font-family: var(--d-font-h); color: var(--d-maroon);\n}\n#doms-v6-root .doms-slide-caption p { margin: 0; font-size: 0.9rem; }\n\n\/* Gallery Buttons *\/\n#doms-v6-root .doms-gallery-btn {\n    position: absolute; top: 50%; transform: translateY(-50%);\n    background: rgba(0,0,0,0.4); color: white; border: none; width: 50px; height: 50px; font-size: 1.5rem; cursor: pointer; z-index: 10; transition: 0.3s;\n}\n#doms-v6-root .doms-gallery-btn:hover { background: var(--d-maroon); }\n#doms-v6-root .doms-btn-left { left: 0; }\n#doms-v6-root .doms-btn-right { right: 0; }\n\n\/* 4. TEAM SCROLL SECTION *\/\n#doms-v6-root .doms-team-section {\n    max-width: 1200px; margin: 0 auto 5rem auto; padding: 0 0 0 20px;\n}\n#doms-v6-root .doms-team-header-row {\n    display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; padding-right: 20px;\n}\n#doms-v6-root .doms-nav-btns-small { display: flex; gap: 10px; }\n\n\/* Updated Button Styles (Larger touch area) *\/\n#doms-v6-root .doms-nav-btn-small {\n    width: 44px; height: 44px; \/* Bigger for Mobile *\/\n    border-radius: 50%; border: 1px solid #ccc; background: transparent; cursor: pointer; transition: 0.2s;\n    font-size: 1.2rem; display: flex; align-items: center; justify-content: center;\n}\n#doms-v6-root .doms-nav-btn-small:hover { background: var(--d-maroon); border-color: var(--d-maroon); color: white; }\n\n#doms-v6-root .doms-team-viewport {\n    display: flex; gap: 20px; overflow-x: auto; padding-bottom: 2rem; padding-right: 20px;\n    scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;\n    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;\n}\n#doms-v6-root .doms-team-viewport::-webkit-scrollbar { display: none; }\n\n#doms-v6-root .doms-member-card {\n    min-width: 200px; width: 200px; scroll-snap-align: start; flex-shrink: 0;\n}\n\n#doms-v6-root .doms-img-frame {\n    width: 100%; height: 260px; background: #eee; overflow: hidden; border-radius: 4px;\n}\n#doms-v6-root .doms-img-frame img {\n    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;\n    filter: none\n}\n#doms-v6-root .doms-member-card:hover img { transform: scale(1.08); }\n#doms-v6-root .doms-info { padding-top: 10px; }\n#doms-v6-root .doms-info h4 { margin: 0; font-family: var(--d-font-h); font-size: 1rem; }\n#doms-v6-root .doms-info span { font-size: 0.8rem; color: var(--d-maroon); text-transform: uppercase; }\n\n\/* =========================================\n   RESPONSIVE MEDIA QUERIES\n   ========================================= *\/\n\n@media (max-width: 900px) {\n    #doms-v6-root .doms-mission-grid { grid-template-columns: 1fr; margin-top: 0; }\n    #doms-v6-root .doms-card-img { display: none; }\n    #doms-v6-root .doms-gallery-viewport { height: 400px; }\n}\n\n@media (max-width: 600px) {\n    #doms-v6-root .doms-title { font-size: 2.5rem; }\n    #doms-v6-root .doms-gallery-viewport { height: 350px; } \n\n    \/* FIX: BUTTONS VISIBILITY AND LAYOUT *\/\n    #doms-v6-root .doms-team-header-row {\n        flex-direction: column; \/* Stack Title and Buttons *\/\n        align-items: flex-start;\n        gap: 15px; \/* Add space between text and buttons *\/\n    }\n    \n    #doms-v6-root .doms-nav-btns-small { \n        display: flex !important; \/* Force show *\/\n    }\n\n    #doms-v6-root .doms-team-section { padding: 0; }\n    #doms-v6-root .doms-team-viewport { padding-left: 20px; gap: 15px; }\n    \n    #doms-v6-root .doms-slide-caption { \n        bottom: 0; left: 0; width: 100%; \n        border-left: none; border-top: 3px solid var(--d-maroon); \n        padding: 15px 20px; max-width: none;\n    }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \n    \/\/ 1. GALLERY LOGIC\n    const galTrack = document.getElementById('doms-gal-track');\n    const galNext = document.getElementById('doms-gal-next');\n    const galPrev = document.getElementById('doms-gal-prev');\n    let curIndex = 0;\n    \n    if(galTrack && document.querySelectorAll('.doms-slide').length > 0) {\n        const totalSlides = document.querySelectorAll('.doms-slide').length;\n        const updateGal = () => { galTrack.style.transform = `translateX(-${curIndex * 100}%)`; };\n\n        if(galNext) galNext.addEventListener('click', () => { curIndex = (curIndex + 1) % totalSlides; updateGal(); });\n        if(galPrev) galPrev.addEventListener('click', () => { curIndex = (curIndex - 1 + totalSlides) % totalSlides; updateGal(); });\n        setInterval(() => { curIndex = (curIndex + 1) % totalSlides; updateGal(); }, 5000);\n    }\n\n    \/\/ 2. TEAM LOGIC\n    const tmTrack = document.getElementById('doms-tm-viewport');\n    const tmNext = document.getElementById('doms-tm-next');\n    const tmPrev = document.getElementById('doms-tm-prev');\n\n    if(tmTrack && tmNext && tmPrev) {\n        tmNext.addEventListener('click', () => { tmTrack.scrollBy({ left: 220, behavior: 'smooth' }); });\n        tmPrev.addEventListener('click', () => { tmTrack.scrollBy({ left: -220, behavior: 'smooth' }); });\n    }\n\n    \/\/ 3. ANIMATION\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if(entry.isIntersecting) {\n                entry.target.style.opacity = \"1\";\n                entry.target.style.transform = \"translateY(0)\";\n            }\n        });\n    }, { threshold: 0.1 });\n\n    document.querySelectorAll('.doms-anim').forEach(el => {\n        el.style.opacity = \"0\";\n        el.style.transform = \"translateY(20px)\";\n        el.style.transition = \"all 0.6s ease-out\";\n        observer.observe(el);\n    });\n});\n<\/script>\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-94c8cfe e-con-full e-flex e-con e-parent\" data-id=\"94c8cfe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99ef1de elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"99ef1de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"doms-enigma-v4-root\" class=\"doms-luxury-wrapper\">\n    \n    <div class=\"doms-bg-layer\">\n        <div class=\"doms-pattern-dots\"><\/div>\n        <div class=\"doms-ambient-glow\"><\/div>\n        <div class=\"doms-noise-texture\"><\/div>\n    <\/div>\n\n    <div class=\"doms-hero-split-container\">\n        \n        <div class=\"doms-hero-content-left\">\n            <div class=\"doms-meta-header\">\n                <span class=\"doms-line\"><\/span>\n                <span class=\"doms-meta-text\">01 \/\/ ANALYTICS CLUB<\/span>\n            <\/div>\n            \n            <h1 class=\"doms-editorial-heading\">\n                <span class=\"doms-serif-italic\">Going<\/span><br>\n                <span class=\"doms-sans-bold-gold\">DIGITAL.<\/span>\n            <\/h1>\n            \n            <h3 class=\"doms-sub-heading\">The Art of <span class=\"doms-highlight\">Deduction<\/span><\/h3>\n            \n            <p class=\"doms-body-text\">\n                The daunting emergence of new trends brings an immense scope for humongous data. With the world shifting gears, the need to crunch rows of boring data into a <strong>palatable story<\/strong> is bigger than ever.\n            <\/p>\n            <p class=\"doms-body-text\">\n                At Enigma, we infuse life into inanimate data, visualizing a future based on inferences drawn and providing a healthy space to learn.\n            <\/p>\n\n            <button class=\"doms-luxury-btn\">\n                <span>Explore Events<\/span>\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"><\/path><path d=\"M12 5l7 7-7 7\"><\/path><\/svg>\n            <\/button>\n        <\/div>\n\n        <div class=\"doms-hero-slideshow-right\">\n            <div class=\"doms-slider-wrapper\">\n                \n                <div class=\"doms-slide-nav\">\n                    <button id=\"d4-slide-prev\" class=\"doms-slide-btn\">&#8592;<\/button>\n                    <div class=\"doms-slide-counter\">\n                        <span id=\"d4-current\">01<\/span><span class=\"doms-slash\">\/<\/span><span id=\"d4-total\">03<\/span>\n                    <\/div>\n                    <button id=\"d4-slide-next\" class=\"doms-slide-btn\">&#8594;<\/button>\n                <\/div>\n\n                <div class=\"doms-slides-track\" id=\"d4-slides-track\">\n                    \n                    <div class=\"doms-slide-item\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/enigma.jpg\" alt=\"Data Analytics\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 851px; --smush-placeholder-aspect-ratio: 851\/831;\">\n                        <div class=\"doms-slide-caption\">\n                            <h4>Data Visualization<\/h4>\n                            <p>Decoding the matrix of business.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!--<div class=\"doms-slide-item\">-->\n                    <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551434678-e076c2236033?q=80&w=2070&auto=format&fit=crop\" alt=\"Coding\">-->\n                    <!--    <div class=\"doms-slide-caption\">-->\n                    <!--        <h4>Hackathons<\/h4>-->\n                    <!--        <p>Solving real-world problems.<\/p>-->\n                    <!--    <\/div>-->\n                    <!--<\/div>-->\n\n                    <!--<div class=\"doms-slide-item\">-->\n                    <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop\" alt=\"Strategy\">-->\n                    <!--    <div class=\"doms-slide-caption\">-->\n                    <!--        <h4>Strategy<\/h4>-->\n                    <!--        <p>Optimizing for the future.<\/p>-->\n                    <!--    <\/div>-->\n                    <!--<\/div>-->\n\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"doms-team-container\">\n        <div class=\"doms-team-header-row\">\n            <div>\n                <h2 class=\"doms-team-title\">The Conveners<\/h2>\n                <div class=\"doms-title-underline\"><\/div>\n            <\/div>\n            \n            <div class=\"doms-team-nav-btns\">\n                <button id=\"d4-team-prev\" class=\"doms-team-btn\">&#8592;<\/button>\n                <button id=\"d4-team-next\" class=\"doms-team-btn\">&#8594;<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-team-viewport\" id=\"d4-team-viewport\">\n            \n            <div class=\"doms-profile-card\">\n                <div class=\"doms-profile-img-box\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Gayatri-scaled.jpg\" alt=\"R Gayatri\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <div class=\"doms-img-overlay\"><\/div>\n                <\/div>\n                <div class=\"doms-profile-details\">\n                    <span class=\"doms-role\">Convener<\/span>\n                    <h4>R Gayatri<\/h4>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-profile-card\">\n                <div class=\"doms-profile-img-box\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Bhavya-scaled.jpg\" alt=\"Bhavya Dhingra\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <div class=\"doms-img-overlay\"><\/div>\n                <\/div>\n                <div class=\"doms-profile-details\">\n                    <span class=\"doms-role\">Convener<\/span>\n                    <h4>Bhavya Dhingra<\/h4>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-profile-card\">\n                <div class=\"doms-profile-img-box\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/karan-scaled.jpg\" alt=\"Karan Singh\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <div class=\"doms-img-overlay\"><\/div>\n                <\/div>\n                <div class=\"doms-profile-details\">\n                    <span class=\"doms-role\">Convener<\/span>\n                    <h4>Karan Singh<\/h4>\n                <\/div>\n            <\/div>\n\n            <!--<div class=\"doms-profile-card\">-->\n            <!--    <div class=\"doms-profile-img-box\">-->\n            <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580489944761-15a19d654956?q=80&w=761&auto=format&fit=crop\" alt=\"Member\">-->\n            <!--        <div class=\"doms-img-overlay\"><\/div>-->\n            <!--    <\/div>-->\n            <!--    <div class=\"doms-profile-details\">-->\n            <!--        <span class=\"doms-role\">Analyst<\/span>-->\n            <!--        <h4>Aditi Verma<\/h4>-->\n            <!--    <\/div>-->\n            <!--<\/div>-->\n\n            <!-- <div class=\"doms-profile-card\">-->\n            <!--    <div class=\"doms-profile-img-box\">-->\n            <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?q=80&w=687&auto=format&fit=crop\" alt=\"Member\">-->\n            <!--        <div class=\"doms-img-overlay\"><\/div>-->\n            <!--    <\/div>-->\n            <!--    <div class=\"doms-profile-details\">-->\n            <!--        <span class=\"doms-role\">Tech Lead<\/span>-->\n            <!--        <h4>Arjun Nair<\/h4>-->\n            <!--    <\/div>-->\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n\n\n<style>\n\/* ==========================================================================\n   CSS SCOPE: #doms-enigma-v4-root\n   THEME: High-End Editorial, Rich Charcoal Gradient, Gold Accents\n   ========================================================================== *\/\n\n#doms-enigma-v4-root {\n    \/* Palette *\/\n    --k-bg-dark: #1a1a1a;\n    --k-bg-gradient: linear-gradient(120deg, #232526 0%, #414345 150%); \/* Rich Charcoal *\/\n    --k-accent: #D4AF37; \/* Gold *\/\n    --k-white: #ffffff;\n    --k-text: #d1d5db;   \/* Soft Grey *\/\n    \n    \/* Fonts *\/\n    --font-serif: \"Playfair Display\", serif;\n    --font-sans: \"Montserrat\", \"Lato\", sans-serif;\n\n    \/* Base Setup *\/\n    background: #111; \/* Fallback *\/\n    color: var(--k-white);\n    font-family: var(--font-sans);\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n}\n\n#doms-enigma-v4-root * { box-sizing: border-box; }\n\n\/* IMPORT FONTS *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');\n\n\/* --- 0. BACKGROUND GRAPHICS --- *\/\n#doms-enigma-v4-root .doms-bg-layer {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    \/* Main Gradient Background - Not too dark, rich depth *\/\n    background: radial-gradient(circle at 10% 20%, #2a2a2a 0%, #151515 90%);\n    z-index: 0;\n}\n\n\/* Pattern: Dotted Matrix *\/\n#doms-enigma-v4-root .doms-pattern-dots {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);\n    background-size: 30px 30px;\n    opacity: 0.6;\n}\n\n\/* Ambient Glow (Golden Orb) *\/\n#doms-enigma-v4-root .doms-ambient-glow {\n    position: absolute; top: -10%; left: -10%; width: 50vw; height: 50vw;\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);\n    border-radius: 50%;\n    pointer-events: none;\n}\n\n\/* Noise Texture (Subtle Grain) *\/\n#doms-enigma-v4-root .doms-noise-texture {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    opacity: 0.03;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\n    pointer-events: none;\n}\n\n\n\/* --- 1. HERO SPLIT LAYOUT --- *\/\n#doms-enigma-v4-root .doms-hero-split-container {\n    display: grid;\n    grid-template-columns: 1fr 1.2fr;\n    min-height: 85vh;\n    position: relative;\n    z-index: 2;\n}\n\n\/* LEFT SIDE *\/\n#doms-enigma-v4-root .doms-hero-content-left {\n    padding: 6rem 4rem 6rem 6%;\n    display: flex; flex-direction: column; justify-content: center;\n}\n\n#doms-enigma-v4-root .doms-meta-header {\n    display: flex; align-items: center; gap: 15px; margin-bottom: 2rem;\n}\n#doms-enigma-v4-root .doms-line {\n    width: 40px; height: 1px; background: var(--k-accent);\n}\n#doms-enigma-v4-root .doms-meta-text {\n    font-family: monospace; color: var(--k-accent); letter-spacing: 2px; font-size: 0.85rem;\n}\n\n\/* Typography Magic *\/\n#doms-enigma-v4-root .doms-editorial-heading {\n    margin: 0 0 2rem 0; line-height: 1;\n}\n\n#doms-enigma-v4-root .doms-serif-italic {\n    font-family: var(--font-serif);\n    font-style: italic;\n    font-size: 4rem;\n    font-weight: 400;\n    color: var(--k-white);\n    display: block;\n    margin-bottom: -10px; \/* Tight stacking *\/\n}\n\n#doms-enigma-v4-root .doms-sans-bold-gold {\n    font-family: var(--font-sans);\n    font-weight: 800;\n    font-size: 5.5rem; \/* Huge *\/\n    text-transform: uppercase;\n    letter-spacing: -2px;\n    \/* Gold Gradient Text *\/\n    background: linear-gradient(to right, #ffffff 0%, #D4AF37 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\n#doms-enigma-v4-root .doms-sub-heading {\n    font-family: var(--font-serif); font-size: 1.8rem; margin-bottom: 1.5rem; font-weight: 400;\n}\n#doms-enigma-v4-root .doms-highlight { color: var(--k-accent); font-style: italic; }\n\n#doms-enigma-v4-root .doms-body-text {\n    font-size: 1.05rem; color: var(--k-text); line-height: 1.8; margin-bottom: 1.2rem; max-width: 500px;\n    font-weight: 300;\n}\n#doms-enigma-v4-root strong { color: var(--k-white); font-weight: 600; }\n\n\/* Luxury Button *\/\n#doms-enigma-v4-root .doms-luxury-btn {\n    margin-top: 1.5rem;\n    background: transparent;\n    border: none;\n    border-bottom: 1px solid var(--k-accent);\n    color: var(--k-white);\n    padding: 10px 0;\n    font-family: var(--font-sans);\n    text-transform: uppercase;\n    letter-spacing: 2px;\n    font-size: 0.9rem;\n    cursor: pointer;\n    display: flex; align-items: center; gap: 10px;\n    transition: all 0.3s ease;\n    align-self: flex-start;\n}\n#doms-enigma-v4-root .doms-luxury-btn:hover {\n    gap: 15px; color: var(--k-accent);\n}\n\n\/* RIGHT SIDE: SLIDESHOW *\/\n#doms-enigma-v4-root .doms-hero-slideshow-right {\n    position: relative; height: 100%; min-height: 600px; overflow: hidden;\n    \/* Diagonal Clip Path for Interest (Optional - removed for cleaner look, kept rectangular) *\/\n    border-left: 1px solid rgba(255,255,255,0.05);\n}\n\n#doms-enigma-v4-root .doms-slider-wrapper { width: 100%; height: 100%; position: relative; }\n#doms-enigma-v4-root .doms-slides-track {\n    display: flex; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);\n}\n#doms-enigma-v4-root .doms-slide-item { min-width: 100%; height: 100%; position: relative; }\n#doms-enigma-v4-root .doms-slide-item img {\n    width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) contrast(1.1);\n}\n\n\/* Slide Caption *\/\n#doms-enigma-v4-root .doms-slide-caption {\n    position: absolute; bottom: 0; left: 0; width: 100%;\n    padding: 4rem 3rem;\n    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);\n}\n#doms-enigma-v4-root .doms-slide-caption h4 {\n    font-family: var(--font-sans); font-size: 2.5rem; text-transform: uppercase; font-weight: 700; margin: 0; color: var(--k-white); letter-spacing: -1px;\n}\n#doms-enigma-v4-root .doms-slide-caption p {\n    font-family: var(--font-serif); font-style: italic; color: var(--k-accent); font-size: 1.2rem; margin-top: 5px;\n}\n\n\/* Custom Nav Controls *\/\n#doms-enigma-v4-root .doms-slide-nav {\n    position: absolute; top: 50%; right: 40px; transform: translateY(-50%);\n    display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 10;\n}\n#doms-enigma-v4-root .doms-slide-btn {\n    background: transparent; border: 1px solid rgba(255,255,255,0.2); color: white;\n    width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: 0.3s;\n}\n#doms-enigma-v4-root .doms-slide-btn:hover { background: var(--k-white); color: #000; }\n#doms-enigma-v4-root .doms-slide-counter {\n    font-family: monospace; font-size: 0.9rem; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 2px; color: var(--k-accent);\n}\n\n\/* --- 2. TEAM SECTION --- *\/\n#doms-enigma-v4-root .doms-team-container {\n    position: relative; z-index: 5; padding: 0 0 6rem 6%;\n    margin-top: -50px; \/* Slight overlap for depth *\/\n}\n\n#doms-enigma-v4-root .doms-team-header-row {\n    display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; padding-right: 4rem;\n}\n#doms-enigma-v4-root .doms-team-title {\n    font-family: var(--font-serif); font-size: 2.5rem; margin: 0; color: var(--k-white);\n}\n#doms-enigma-v4-root .doms-title-underline {\n    width: 60px; height: 3px; background: var(--k-accent); margin-top: 10px;\n}\n\n\/* Buttons *\/\n#doms-enigma-v4-root .doms-team-nav-btns { display: flex; gap: 15px; }\n#doms-enigma-v4-root .doms-team-btn {\n    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: white; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center;\n}\n#doms-enigma-v4-root .doms-team-btn:hover { border-color: var(--k-accent); color: var(--k-accent); }\n\n\/* Viewport *\/\n#doms-enigma-v4-root .doms-team-viewport {\n    display: flex; gap: 30px; overflow-x: auto; padding-bottom: 2rem;\n    scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;\n}\n#doms-enigma-v4-root .doms-team-viewport::-webkit-scrollbar { display: none; }\n\n\/* Card Styling *\/\n#doms-enigma-v4-root .doms-profile-card {\n    min-width: 250px; width: 250px; scroll-snap-align: start; flex-shrink: 0;\n}\n#doms-enigma-v4-root .doms-profile-img-box {\n    width: 100%; height: 320px; position: relative; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.1);\n}\n#doms-enigma-v4-root .doms-profile-img-box img {\n    width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.5s;\n    filter: none\n}\n#doms-enigma-v4-root .doms-profile-card:hover img { filter: grayscale(0%); }\n\n\/* Role Styling *\/\n#doms-enigma-v4-root .doms-profile-details h4 {\n    margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 1.1rem;\n}\n#doms-enigma-v4-root .doms-role {\n    font-family: monospace; font-size: 0.75rem; color: var(--k-accent); display: block; margin-bottom: 5px;\n}\n\n\n\/* =========================================\n   RESPONSIVE DESIGN (MOBILE & TABLET)\n   ========================================= *\/\n\n@media (max-width: 1024px) {\n    #doms-enigma-v4-root .doms-hero-split-container { grid-template-columns: 1fr; }\n    #doms-enigma-v4-root .doms-hero-content-left { padding: 5rem 3rem; }\n    #doms-enigma-v4-root .doms-hero-slideshow-right { height: 50vh; min-height: 400px; }\n    \n    \/* Move slide nav to bottom on tablet *\/\n    #doms-enigma-v4-root .doms-slide-nav { \n        top: auto; bottom: 20px; right: 20px; transform: none; flex-direction: row; \n    }\n    #doms-enigma-v4-root .doms-slide-counter { writing-mode: horizontal-tb; }\n}\n\n@media (max-width: 600px) {\n    #doms-enigma-v4-root .doms-hero-content-left { padding: 4rem 1.5rem; }\n    \n    \/* Typography Fixes for Mobile *\/\n    #doms-enigma-v4-root .doms-serif-italic { font-size: 3rem; }\n    #doms-enigma-v4-root .doms-sans-bold-gold { font-size: 3.5rem; letter-spacing: -1px; }\n    \n    #doms-enigma-v4-root .doms-hero-slideshow-right { height: 350px; min-height: auto; }\n    #doms-enigma-v4-root .doms-slide-caption h4 { font-size: 1.8rem; }\n    \n    \/* Team Section Mobile *\/\n    #doms-enigma-v4-root .doms-team-container { margin-top: 0; padding: 2rem 1.5rem 4rem 1.5rem; }\n    #doms-enigma-v4-root .doms-team-header-row { flex-direction: column; align-items: flex-start; gap: 20px; padding-right: 0; }\n    #doms-enigma-v4-root .doms-team-viewport { padding-right: 20px; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \n    \/\/ 1. SLIDESHOW\n    const track = document.getElementById('d4-slides-track');\n    const next = document.getElementById('d4-slide-next');\n    const prev = document.getElementById('d4-slide-prev');\n    const currentEl = document.getElementById('d4-current');\n    let idx = 0;\n    \n    if(track) {\n        const slides = document.querySelectorAll('.doms-slide-item');\n        const total = slides.length;\n        \n        const update = () => {\n            track.style.transform = `translateX(-${idx * 100}%)`;\n            if(currentEl) currentEl.textContent = `0${idx + 1}`;\n        };\n\n        if(next) next.addEventListener('click', () => { idx = (idx + 1) % total; update(); });\n        if(prev) prev.addEventListener('click', () => { idx = (idx - 1 + total) % total; update(); });\n\n        setInterval(() => { idx = (idx + 1) % total; update(); }, 6000);\n    }\n\n    \/\/ 2. TEAM SCROLL\n    const tView = document.getElementById('d4-team-viewport');\n    const tNext = document.getElementById('d4-team-next');\n    const tPrev = document.getElementById('d4-team-prev');\n\n    if(tView && tNext && tPrev) {\n        tNext.addEventListener('click', () => { tView.scrollBy({ left: 270, behavior: 'smooth' }); });\n        tPrev.addEventListener('click', () => { tView.scrollBy({ left: -270, behavior: 'smooth' }); });\n    }\n});\n<\/script>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6058aff e-con-full e-flex e-con e-parent\" data-id=\"6058aff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05f0aca elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"05f0aca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* =========================================\n       CSS ISOLATION: DoMS Literary Society\n       ========================================= *\/\n\n    #doms-litsoc-root {\n        \/* --- Theme Variables --- *\/\n        --font-head: 'Playfair Display', 'Times New Roman', serif;\n        --font-body: 'Lato', 'Segoe UI', sans-serif;\n        \n        --bg-paper: #fcfbf9;     \/* Warm off-white *\/\n        --text-main: #222222;    \/* Soft Black *\/\n        --text-sub: #555555;     \/* Dark Grey *\/\n        --accent: #800000;       \/* IITM Maroon *\/\n        --gold: #c5a059;         \/* Muted Gold *\/\n        \n        \/* Layout Reset *\/\n        background-color: var(--bg-paper);\n        width: 100%;\n        padding: 40px 0;\n        font-family: var(--font-body);\n        color: var(--text-main);\n        box-sizing: border-box;\n        line-height: 1.6;\n        overflow-x: hidden; \n    }\n\n    #doms-litsoc-root * { box-sizing: border-box; }\n\n    .doms-litsoc-container {\n        max-width: 1600px;\n        margin: 0 auto;\n        padding: 0 14px;\n    }\n\n    \/* --- 1. HERO SECTION (Grid) --- *\/\n    .doms-litsoc-hero-grid {\n        display: grid;\n        grid-template-columns: 0.8fr 1.2fr; \n        gap: 60px;\n        align-items: center;\n        margin-bottom: 80px;\n    }\n\n    \/* Left: Text Styling *\/\n    .doms-litsoc-branding { display: flex; gap: 12px; margin-bottom: 24px; }\n    .doms-litsoc-pill { background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }\n    .doms-litsoc-pill-outline { border: 1px solid var(--accent); color: var(--accent); padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }\n\n    .doms-litsoc-heading { font-family: var(--font-head); font-size: 3.5rem; line-height: 1.1; margin: 0 0 25px 0; color: var(--text-main); font-weight: 700; }\n    .doms-litsoc-highlight { font-style: italic; color: var(--accent); }\n    .doms-litsoc-divider { width: 80px; height: 4px; background: var(--gold); margin-bottom: 35px; }\n    \n    .doms-litsoc-subhead { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 12px; color: var(--text-main); font-weight: 600; }\n    .doms-litsoc-body { font-size: 1.05rem; color: var(--text-sub); margin: 0 0 30px 0; }\n\n    \/* Right: Slideshow Styling *\/\n    .doms-litsoc-media-wrapper { position: relative; width: 100%; height: 500px;  filter:none !important;}\n    \n    \n    .doms-litsoc-slider-box { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 40px; box-shadow: 20px 20px 0px rgba(0,0,0,0.04); filter:none !important; }\n    \n    \n    .doms-litsoc-slide { display: none; width: 100%; height: 100%; position: relative; animation: domsFade 1.2s;  filter:none !important;}\n    \n    \n    .doms-litsoc-slide.active { display: block;   filter:none !important;}\n    \n    \n    @keyframes domsFade { from { opacity: .6 } to { opacity: 1 } }\n    .doms-litsoc-slide img { width: 100%; height: 100%; object-fit: cover;  filter:none !important }\n\n    .doms-slide-btn { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(0, 0, 0, 0.4); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; z-index: 10; transition: 0.3s ease; user-select: none; }\n    .doms-slide-btn:hover { background: var(--accent); }\n    .doms-prev { left: 20px; }\n    .doms-next { right: 20px; }\n\n    .doms-litsoc-caption { position: absolute; bottom: 30px; left: 30px; background: rgba(255, 255, 255, 0.95); padding: 12px 25px; border-left: 4px solid var(--accent); font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; z-index: 5; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }\n    .doms-litsoc-dots-container { position: absolute; bottom: 30px; right: 30px; display: flex; gap: 8px; z-index: 5; }\n    .doms-dot { height: 10px; width: 10px; background-color: rgba(255,255,255,0.6); border-radius: 50%; cursor: pointer; transition: 0.3s; }\n    .doms-dot.active { background-color: #fff; transform: scale(1.3); }\n\n    \/* --- 2. TEAM SECTION (Improved) --- *\/\n    .doms-litsoc-team-section { border-top: 1px solid #e5e5e5; padding-top: 60px; }\n    .doms-litsoc-team-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 20px; }\n    .doms-litsoc-section-title { font-family: var(--font-head); font-size: 2.5rem; margin: 0; color: var(--text-main); }\n\n    .doms-litsoc-nav-group { display: flex; gap: 12px; }\n    .doms-litsoc-scroll-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; color: var(--text-main); }\n    .doms-litsoc-scroll-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }\n\n    \/* Track *\/\n    .doms-litsoc-track {\n        display: flex;\n        gap: 24px;\n        overflow-x: auto;\n        padding: 10px 0 30px 0; \/* Extra padding bottom to prevent cut-off *\/\n        scroll-behavior: smooth;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n        scroll-snap-type: x mandatory; \n        padding-left: 2px;\n    }\n    .doms-litsoc-track::-webkit-scrollbar { display: none; }\n\n    \/* Card Styling (Fixed for Text Visibility) *\/\n    .doms-litsoc-card {\n        flex: 0 0 260px;\n        scroll-snap-align: start;\n        cursor: pointer;\n        transition: transform 0.3s ease;\n        background: #ffffff; \/* Explicit background *\/\n        border: 1px solid #eee; \/* Light border definition *\/\n        border-radius: 8px; \/* Rounded corners *\/\n        overflow: hidden; \/* Contains image *\/\n    }\n\n    .doms-litsoc-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }\n\n    .doms-card-img {\n        width: 100%;\n        aspect-ratio: 3 \/ 4;\n        overflow: hidden;\n        background: #f0f0f0;\n         \/*filter:none !important;*\/\n        \n    }\n    .doms-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; \n    filter: grayscale(20%); \n    filter: none !important; \n        \n    }\n    .doms-litsoc-card:hover .doms-card-img img { \n        transform: scale(1.05);\n    filter: grayscale(0%);\n     filter: none !important ;\n        \n    }\n\n    \/* Text Container (Improved) *\/\n    .doms-card-info {\n        padding: 15px; \/* Added padding so text isn't on edge *\/\n        text-align: left;\n        min-height: 85px; \/* Ensures alignment even with 2 lines *\/\n    }\n\n    .doms-card-info h4 {\n        font-family: var(--font-head);\n        font-size: 1.15rem;\n        margin: 0 0 5px 0;\n        color: var(--text-main);\n        line-height: 1.2;\n    }\n\n    .doms-card-info p {\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-weight: 700;\n        color: var(--accent);\n        margin: 0;\n    }\n\n    \/* --- Responsive --- *\/\n    @media (max-width: 900px) {\n        .doms-litsoc-hero-grid { grid-template-columns: 1fr; gap: 40px; }\n        .doms-litsoc-media-wrapper { height: 400px; }\n    }\n\n    @media (max-width: 600px) {\n        #doms-litsoc-root { padding: 50px 0; }\n        .doms-litsoc-heading { font-size: 2.5rem; }\n        .doms-litsoc-media-wrapper { height: 300px; margin-bottom: 10px; }\n        .doms-litsoc-slider-box { box-shadow: none; }\n        .doms-slide-btn { width: 40px; height: 40px; font-size: 1.2rem; background: rgba(0,0,0,0.5); }\n        \n        .doms-litsoc-team-header { flex-direction: column; align-items: flex-start; gap: 15px; }\n        .doms-litsoc-section-title { font-size: 2rem; }\n\n        \/* Mobile Card Sizing *\/\n        .doms-litsoc-track { gap: 15px; padding-right: 20px; } \/* Right padding ensures last card text is visible *\/\n        .doms-litsoc-card { \n            flex: 0 0 100vw; \/* 85% Width *\/\n            scroll-snap-align: center; \/* Center align on mobile for focus *\/\n        }\n    }\n<\/style>\n<\/head>\n\n<body>\n\n    <div id=\"doms-litsoc-root\">\n        <div class=\"doms-litsoc-container\">\n\n            <div class=\"doms-litsoc-hero-grid\">\n                <div class=\"doms-litsoc-text-panel\">\n                    <div class=\"doms-litsoc-branding\">\n                        <span class=\"doms-litsoc-pill\">Student Life<\/span>\n                        <span class=\"doms-litsoc-pill-outline\">Cultural<\/span>\n                    <\/div>\n\n                    <h1 class=\"doms-litsoc-heading\">The Literary <br><span class=\"doms-litsoc-highlight\">Society.<\/span><\/h1>\n                    <div class=\"doms-litsoc-divider\"><\/div>\n\n                    <div class=\"doms-litsoc-text-block\">\n                        <h3 class=\"doms-litsoc-subhead\">Curating Intellectual Discourse<\/h3>\n                        <p class=\"doms-litsoc-body\">\n                            We are the custodians of expression at DoMS. Our platform allows individuals to establish, enhance, and exhibit their literary prowess through high-stakes debates, creative writing workshops, and community events.\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-litsoc-media-wrapper\">\n                    <div class=\"doms-litsoc-slider-box\">\n                        <div class=\"doms-litsoc-slide active\">\n                            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/litrery1.jpg\" alt=\"Debate\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 712px; --smush-placeholder-aspect-ratio: 712\/446;\">\n                            <div class=\"doms-litsoc-caption\">The Workhop<\/div>\n                        <\/div>\n                        <div class=\"doms-litsoc-slide\">\n                            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/litrery2.jpg\" alt=\"Reading\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 840px; --smush-placeholder-aspect-ratio: 840\/773;\">\n                            <div class=\"doms-litsoc-caption\">Book Club Sessions<\/div>\n                        <\/div>\n                        <!--<div class=\"doms-litsoc-slide\">-->\n                        <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?q=80&w=1200&auto=format&fit=crop\" alt=\"Workshop\">-->\n                        <!--    <div class=\"doms-litsoc-caption\">Creative Writing Workshop<\/div>-->\n                        <!--<\/div>-->\n                        <div class=\"doms-slide-btn doms-prev\" onclick=\"domsPlusSlides(-1)\">&#10094;<\/div>\n                        <div class=\"doms-slide-btn doms-next\" onclick=\"domsPlusSlides(1)\">&#10095;<\/div>\n                        <div class=\"doms-litsoc-dots-container\">\n                            <span class=\"doms-dot active\" onclick=\"domsCurrentSlide(1)\"><\/span>\n                            <span class=\"doms-dot\" onclick=\"domsCurrentSlide(2)\"><\/span>\n                            <span class=\"doms-dot\" onclick=\"domsCurrentSlide(3)\"><\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-litsoc-team-section\">\n                <div class=\"doms-litsoc-team-header\">\n                    <h2 class=\"doms-litsoc-section-title\">Conveners & Core Team<\/h2>\n                    <div class=\"doms-litsoc-nav-group\">\n                        <button id=\"doms-team-prev\" class=\"doms-litsoc-scroll-btn\" aria-label=\"Previous\">\n                            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n                        <\/button>\n                        <button id=\"doms-team-next\" class=\"doms-litsoc-scroll-btn\" aria-label=\"Next\">\n                            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-litsoc-track\" id=\"doms-team-track\">\n                    <div class=\"doms-litsoc-card\">\n                        <div class=\"doms-card-img\">\n                            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Aravind-scaled.jpg\" alt=\"Person\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                        <\/div>\n                        <div class=\"doms-card-info\">\n                            <h4>Aravind Krishnan<\/h4>\n                            <p>Secretary<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"doms-litsoc-card\">\n                        <div class=\"doms-card-img\">\n                            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Era-scaled.jpg\" alt=\"Person\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                        <\/div>\n                        <div class=\"doms-card-info\">\n                            <h4>Era Stuti Sharma<\/h4>\n                            <p>Convener<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"doms-litsoc-card\">\n                        <div class=\"doms-card-img\">\n                            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Shankara-scaled.jpg\" alt=\"Person\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                        <\/div>\n                        <div class=\"doms-card-info\">\n                            <h4>Shankara V<\/h4>\n                            <p>Convener<\/p>\n                        <\/div>\n                    <\/div>\n                    <!--<div class=\"doms-litsoc-card\">-->\n                    <!--    <div class=\"doms-card-img\">-->\n                    <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?w=500&auto=format&fit=crop&q=60\" alt=\"Person\">-->\n                    <!--    <\/div>-->\n                    <!--    <div class=\"doms-card-info\">-->\n                    <!--        <h4>Riya Malhotra<\/h4>-->\n                    <!--        <p>Events Head<\/p>-->\n                    <!--    <\/div>-->\n                    <!--<\/div>-->\n                    <!--<div class=\"doms-litsoc-card\">-->\n                    <!--    <div class=\"doms-card-img\">-->\n                    <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1539571696357-5a69c17a67c6?w=500&auto=format&fit=crop&q=60\" alt=\"Person\">-->\n                    <!--    <\/div>-->\n                    <!--    <div class=\"doms-card-info\">-->\n                    <!--        <h4>Karthik Nair<\/h4>-->\n                    <!--        <p>Editor<\/p>-->\n                    <!--    <\/div>-->\n                    <!--<\/div>-->\n                    <!--<div class=\"doms-litsoc-card\">-->\n                    <!--    <div class=\"doms-card-img\">-->\n                    <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517841905240-472988babdf9?w=500&auto=format&fit=crop&q=60\" alt=\"Person\">-->\n                    <!--    <\/div>-->\n                    <!--    <div class=\"doms-card-info\">-->\n                    <!--        <h4>Ananya Gupta<\/h4>-->\n                    <!--        <p>Media Rep<\/p>-->\n                    <!--    <\/div>-->\n                    <!--<\/div>-->\n                    <!--<div class=\"doms-litsoc-card\">-->\n                    <!--    <div class=\"doms-card-img\">-->\n                    <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1506794778202-cad84cf45f1d?w=500&auto=format&fit=crop&q=60\" alt=\"Person\">-->\n                    <!--    <\/div>-->\n                    <!--    <div class=\"doms-card-info\">-->\n                    <!--        <h4>Vikram Singh<\/h4>-->\n                    <!--        <p>Debate Lead<\/p>-->\n                    <!--    <\/div>-->\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <script>\n    (function() {\n        let slideIndex = 1;\n        window.domsPlusSlides = function(n) { showDomsSlides(slideIndex += n); }\n        window.domsCurrentSlide = function(n) { showDomsSlides(slideIndex = n); }\n        function showDomsSlides(n) {\n            let i;\n            let slides = document.querySelectorAll(\".doms-litsoc-slide\");\n            let dots = document.querySelectorAll(\".doms-dot\");\n            if (slides.length === 0) return;\n            if (n > slides.length) {slideIndex = 1}    \n            if (n < 1) {slideIndex = slides.length}\n            for (i = 0; i < slides.length; i++) {\n                slides[i].style.display = \"none\";  \n                slides[i].classList.remove(\"active\");\n            }\n            for (i = 0; i < dots.length; i++) { dots[i].classList.remove(\"active\"); }\n            slides[slideIndex-1].style.display = \"block\";  \n            slides[slideIndex-1].classList.add(\"active\");\n            if(dots.length > 0) { dots[slideIndex-1].classList.add(\"active\"); }\n        }\n\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            showDomsSlides(slideIndex);\n            setInterval(function() { window.domsPlusSlides(1); }, 5000);\n\n            const track = document.getElementById('doms-team-track');\n            const btnNext = document.getElementById('doms-team-next');\n            const btnPrev = document.getElementById('doms-team-prev');\n\n            if (track && btnNext && btnPrev) {\n                btnNext.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-litsoc-card');\n                    \/\/ Add small buffer to gap to ensure it clears the snap point\n                    const gap = 24; \n                    const scrollAmt = card ? (card.offsetWidth + gap) : 300;\n                    track.scrollBy({ left: scrollAmt, behavior: 'smooth' });\n                });\n\n                btnPrev.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-litsoc-card');\n                    const gap = 24; \n                    const scrollAmt = card ? (card.offsetWidth + gap) : 300;\n                    track.scrollBy({ left: -scrollAmt, behavior: 'smooth' });\n                });\n            }\n        });\n    })();\n    <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-89a772b e-con-full e-flex e-con e-parent\" data-id=\"89a772b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d28de11 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"d28de11\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* =========================================\n       CSS ISOLATION: DoMS Finance Club (Fin-Addicts)\n       ========================================= *\/\n\n    #doms-fin-root {\n        \/* --- Theme Variables (Warm Bokeh Edition) --- *\/\n        --fin-font-head: 'Playfair Display', serif;\n        --fin-font-body: 'Inter', sans-serif;\n        \n        \/* Backgrounds *\/\n        --fin-bg-dark: #1a1a2e;  \/* Deep charcoal-blue base *\/\n        --fin-bg-card: #24243e;  \/* Slightly lighter for cards *\/\n        \n        \/* Text *\/\n        --fin-text-main: #fefefe; \/* Crisp white *\/\n        --fin-text-sub: #e0c0a0;  \/* Warm, muted peach\/gold *\/\n        \n        \/* Accents *\/\n        --fin-gold: #e6b800;      \/* Warm, rich gold *\/\n        --fin-gold-dim: #b38f00;  \/* Darker gold for borders *\/\n        --fin-border: #3a3a5c;    \/* Subtle border line *\/\n        \n        \/* Layout Reset *\/\n        background-color: var(--fin-bg-dark);\n        width: 100%;\n        padding: 90px 0;\n        font-family: var(--fin-font-body);\n        color: var(--fin-text-main);\n        box-sizing: border-box;\n        line-height: 1.6;\n        overflow-x: hidden;\n        position: relative;\n    }\n\n    \/* Scope Protection *\/\n    #doms-fin-root * { box-sizing: border-box; }\n    #doms-fin-root img { max-width: 100%; display: block; }\n\n    \/* --- BACKGROUND PATTERN (Bokeh) --- *\/\n    #doms-fin-root::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        \/* Grid + Layered Radial Glows *\/\n        background: \n            radial-gradient(circle at 20% 30%, rgba(230, 184, 0, 0.15) 0%, transparent 50%),\n            radial-gradient(circle at 80% 70%, rgba(217, 138, 138, 0.12) 0%, transparent 45%),\n            radial-gradient(circle at 50% 50%, rgba(255, 160, 122, 0.08) 0%, transparent 60%),\n            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\n        background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px;\n        z-index: 0;\n        pointer-events: none;\n        mix-blend-mode: screen;\n    }\n\n    \/* Container *\/\n    .doms-fin-container {\n        max-width: 1280px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* --- HERO SECTION --- *\/\n    .doms-fin-hero-grid {\n        display: grid;\n        grid-template-columns: 0.8fr 1.2fr;\n        gap: 70px;\n        align-items: center;\n        margin-bottom: 90px;\n    }\n\n    \/* Text Content *\/\n    .doms-fin-content { padding-right: 10px; }\n\n    .doms-fin-tag {\n        display: inline-block;\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        color: var(--fin-gold);\n        font-weight: 700;\n        margin-bottom: 20px;\n        border-bottom: 1px solid var(--fin-gold-dim);\n        padding-bottom: 4px;\n    }\n\n    .doms-fin-heading {\n        font-family: var(--fin-font-head);\n        font-size: 3.5rem;\n        line-height: 1.1;\n        color: #ffffff;\n        margin: 0 0 30px 0;\n        font-weight: 700;\n    }\n\n    .doms-fin-heading span {\n        color: var(--fin-text-sub);\n        font-style: italic;\n        font-weight: 400;\n    }\n\n    .doms-fin-desc {\n        font-size: 1.05rem;\n        color: var(--fin-text-sub);\n        margin-bottom: 25px;\n        text-align: justify;\n        font-weight: 300;\n    }\n\n    .doms-fin-highlight-box {\n        background: rgba(230, 184, 0, 0.08);\n        border-left: 4px solid var(--fin-gold);\n        padding: 20px;\n        margin-top: 30px;\n        border-radius: 0 4px 4px 0;\n    }\n    \n    .doms-fin-highlight-box p {\n        font-size: 0.95rem;\n        margin: 0;\n        color: var(--fin-text-main);\n        font-weight: 500;\n        font-style: italic;\n    }\n\n    \/* Slideshow Frame *\/\n    .doms-fin-slider-wrapper {\n        position: relative;\n        width: 100%;\n        height: 550px;\n        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);\n        border-radius: 80px;\n        overflow: hidden;\n        border: 1px solid rgba(230, 184, 0, 0.2);\n    }\n\n    .doms-fin-slide {\n        display: none;\n        width: 100%;\n        height: 100%;\n        position: relative;\n    }\n    \n    .doms-fin-slide.active {\n        display: block;\n        animation: finFade 1s ease-in-out;\n         filter:none !important;\n    }\n    @keyframes finFade { from { opacity: 0.7; } to { opacity: 1; } }\n\n    .doms-fin-slide img {\n         filter:none !important;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    \/* Slide Controls *\/\n    .doms-fin-nav-btn {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 50px; height: 50px;\n        background: rgba(26, 26, 46, 0.8);\n        border: 1px solid rgba(230, 184, 0, 0.3);\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: 0.3s ease;\n        z-index: 10;\n        color: var(--fin-text-sub);\n    }\n\n    .doms-fin-nav-btn:hover { background: var(--fin-gold); color: #1a1a2e; border-color: var(--fin-gold); }\n    .doms-fin-prev { left: 0; border-radius: 0 4px 4px 0; }\n    .doms-fin-next { right: 0; border-radius: 4px 0 0 4px; }\n\n    .doms-fin-caption {\n        position: absolute; bottom: 0; left: 0; width: 100%;\n        background: linear-gradient(to top, #1a1a2e, transparent);\n        color: #fff;\n        padding: 50px 30px 20px 30px;\n        font-family: var(--fin-font-head);\n        font-size: 1.2rem;\n    }\n\n    \/* --- TEAM SECTION --- *\/\n    .doms-fin-team-section {\n        border-top: 1px solid var(--fin-border);\n        padding-top: 60px;\n    }\n\n    .doms-fin-team-header {\n        display: flex; justify-content: space-between; align-items: flex-end;\n        margin-bottom: 40px;\n    }\n\n    .doms-fin-team-title {\n        font-family: var(--fin-font-head);\n        font-size: 2.5rem;\n        color: #fff;\n        margin: 0;\n    }\n\n    \/* Controls *\/\n    .doms-fin-scroll-controls { display: flex; gap: 10px; }\n\n    .doms-fin-scroll-btn {\n        width: 44px; height: 44px;\n        border: 1px solid var(--fin-border);\n        background: transparent;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: all 0.2s;\n        color: var(--fin-text-sub);\n    }\n\n    .doms-fin-scroll-btn:hover {\n        border-color: var(--fin-gold);\n        color: var(--fin-gold);\n        background: rgba(230, 184, 0, 0.1);\n    }\n\n    \/* Track *\/\n    .doms-fin-track {\n        display: flex;\n        gap: 25px;\n        overflow-x: auto;\n        padding-bottom: 30px;\n        scroll-behavior: smooth;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n        scroll-snap-type: x mandatory;\n        padding-left: 2px;\n    }\n    .doms-fin-track::-webkit-scrollbar { display: none; }\n\n    \/* Card (Smaller Size) *\/\n    .doms-fin-card {\n        \/* Changed from 270px to 240px for a smaller portrait look *\/\n        flex: 0 0 240px;\n        scroll-snap-align: start;\n        background: var(--fin-bg-card);\n        border: 1px solid var(--fin-border);\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        cursor: pointer;\n        border-radius: 4px;\n        overflow: hidden;\n    }\n\n    .doms-fin-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 10px 30px rgba(0,0,0,0.4);\n        border-color: var(--fin-gold);\n    }\n\n    .doms-fin-img-wrap {\n        width: 100%; aspect-ratio: 3 \/ 4;\n        overflow: hidden; background: #1a1a2e; position: relative;\n    }\n    .doms-fin-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: grayscale(20%); \n        filter: none !important;\n    }\n    \n    \n    .doms-fin-card:hover .doms-fin-img-wrap img { transform: scale(1.05); filter: grayscale(0%);\n     filter: none !important ;}\n\n    .doms-fin-info {\n        padding: 15px; \/* Slightly less padding for smaller card *\/\n        text-align: center;\n        background: var(--fin-bg-card);\n        position: relative; z-index: 2;\n    }\n\n    .doms-fin-name {\n        font-family: var(--fin-font-head);\n        font-size: 1.15rem; \/* Slightly smaller font *\/\n        margin: 0 0 5px 0;\n        color: #fff;\n        font-weight: 700;\n    }\n\n    .doms-fin-role {\n        font-size: 0.75rem; \/* Slightly smaller font *\/\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        color: var(--fin-gold);\n        margin: 0;\n        font-weight: 600;\n    }\n\n    \/* --- Responsive --- *\/\n    @media (max-width: 1024px) {\n        .doms-fin-hero-grid { grid-template-columns: 1fr; gap: 50px; }\n        .doms-fin-slider-wrapper { height: 450px; order: 2; }\n        .doms-fin-content { order: 1; padding-right: 0; }\n    }\n\n    @media (max-width: 600px) {\n        #doms-fin-root { padding: 60px 0; }\n        .doms-fin-heading { font-size: 2.4rem; }\n        .doms-fin-slider-wrapper { height: 300px; margin-bottom: 20px; }\n        \n        .doms-fin-team-header { flex-direction: column; align-items: flex-start; gap: 15px; }\n        .doms-fin-team-title { font-size: 2rem; }\n\n        .doms-fin-track { padding-right: 20px; gap: 15px; }\n        \/* Adjusted mobile size to be proportionally smaller *\/\n        .doms-fin-card { flex: 0 0 75vw; scroll-snap-align: center; }\n    }\n\n<\/style>\n\n\n<div id=\"doms-fin-root\">\n    <div class=\"doms-fin-container\">\n\n        <div class=\"doms-fin-hero-grid\">\n            \n            <div class=\"doms-fin-content\">\n                <span class=\"doms-fin-tag\">Finance Club<\/span>\n                <h1 class=\"doms-fin-heading\">Fin-Addicts <span>@ DoMS<\/span><\/h1>\n                \n                <p class=\"doms-fin-desc\">\n                    The Finance club of DoMS IIT Madras. It works towards boosting interest in Finance on the campus and also helps indulge that interest through competitions, workshops and professional opportunities.\n                <\/p>\n                \n                <p class=\"doms-fin-desc\">\n                    It coordinates and organizes all finance related activities and serves as the single touch point for all finance related events and queries and provides a platform for increased interaction between the student body, industry and faculty.\n                <\/p>\n\n                <div class=\"doms-fin-highlight-box\">\n                    <p>\n                        \"If you love finance and are an avid follower then this site is the place to be. Important links, weekly business digests, economic digests, news that rocked the world - this is what is in store for you!\"\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-fin-slider-wrapper\">\n                \n                <div class=\"doms-fin-slide active\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/finaddits3.jpg\" alt=\"Finance Analysis\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/1239;\">\n                    <div class=\"doms-fin-caption\">Market Analysis & Strategy Sessions<\/div>\n                <\/div>\n\n                <div class=\"doms-fin-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/finaddits2.jpg\" alt=\"IIT Madras Campus\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/1251;\">\n                    <div class=\"doms-fin-caption\">DoMS IIT Madras Campus<\/div>\n                <\/div>\n\n                <div class=\"doms-fin-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/finaddits1.jpg\" alt=\"Finance Workshop\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/1272;\">\n                    <div class=\"doms-fin-caption\">Interactive Financial Workshops<\/div>\n                <\/div>\n\n                <button class=\"doms-fin-nav-btn doms-fin-prev\" onclick=\"finPlusSlides(-1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n                <\/button>\n                <button class=\"doms-fin-nav-btn doms-fin-next\" onclick=\"finPlusSlides(1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n                <\/button>\n\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-fin-team-section\">\n            <div class=\"doms-fin-team-header\">\n                <h2 class=\"doms-fin-team-title\">Conveners<\/h2>\n                <div class=\"doms-fin-scroll-controls\">\n                    <button id=\"fin-scroll-left\" class=\"doms-fin-scroll-btn\" aria-label=\"Previous\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n                    <\/button>\n                    <button id=\"fin-scroll-right\" class=\"doms-fin-scroll-btn\" aria-label=\"Next\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-fin-track\" id=\"fin-track\">\n                \n                <div class=\"doms-fin-card\">\n                    <div class=\"doms-fin-img-wrap\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Purnav-scaled.jpg\" alt=\"Purnav Soundankar\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-fin-info\">\n                        <h4 class=\"doms-fin-name\">Purnav Soundankar<\/h4>\n                        <p class=\"doms-fin-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-fin-card\">\n                    <div class=\"doms-fin-img-wrap\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Shravan-scaled.jpg\" alt=\"Shravan Parab\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-fin-info\">\n                        <h4 class=\"doms-fin-name\">Shravan Parab<\/h4>\n                        <p class=\"doms-fin-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-fin-card\">\n                    <div class=\"doms-fin-img-wrap\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Deepak-scaled.jpg\" alt=\"Deepak Venkatesan\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-fin-info\">\n                        <h4 class=\"doms-fin-name\">Deepak Venkatesan<\/h4>\n                        <p class=\"doms-fin-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-fin-card\">\n                    <div class=\"doms-fin-img-wrap\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Sruty-scaled.jpg\" alt=\"Sruthy Biju Kumar\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-fin-info\">\n                        <h4 class=\"doms-fin-name\">Sruthy Biju Kumar<\/h4>\n                        <p class=\"doms-fin-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-fin-card\">\n                    <div class=\"doms-fin-img-wrap\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Apurva-scaled.jpg\" alt=\"Apurva More\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-fin-info\">\n                        <h4 class=\"doms-fin-name\">Apurva More<\/h4>\n                        <p class=\"doms-fin-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n            \n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/\/ Slideshow\n        let finSlideIndex = 1;\n        window.finPlusSlides = function(n) { showFinSlides(finSlideIndex += n); }\n        function showFinSlides(n) {\n            let i; let slides = document.querySelectorAll(\".doms-fin-slide\");\n            if (!slides.length) return;\n            if (n > slides.length) {finSlideIndex = 1}    \n            if (n < 1) {finSlideIndex = slides.length}\n            for (i = 0; i < slides.length; i++) {\n                slides[i].style.display = \"none\"; slides[i].classList.remove(\"active\");\n            }\n            slides[finSlideIndex-1].style.display = \"block\";  \n            slides[finSlideIndex-1].classList.add(\"active\");\n        }\n\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            showFinSlides(finSlideIndex);\n            setInterval(function() { window.finPlusSlides(1); }, 5000);\n\n            \/\/ Scroll Logic\n            const track = document.getElementById('fin-track');\n            const btnLeft = document.getElementById('fin-scroll-left');\n            const btnRight = document.getElementById('fin-scroll-right');\n            if (track && btnLeft && btnRight) {\n                btnRight.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-fin-card');\n                    const gap = 25; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 300;\n                    track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n                });\n                btnLeft.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-fin-card');\n                    const gap = 25; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 300;\n                    track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n                });\n            }\n        });\n    })();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b1b8421 e-con-full e-flex e-con e-parent\" data-id=\"b1b8421\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-905fd49 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"905fd49\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* =========================================\n       CSS ISOLATION: DoMS HR Club (FoHRum)\n       ========================================= *\/\n\n    #doms-hr-root {\n        \/* --- Theme Variables --- *\/\n        --hr-font-head: 'Playfair Display', serif;\n        --hr-font-body: 'Lato', sans-serif;\n        \n        \/* Light Theme Palette *\/\n        --hr-bg-light: #faf9f6;   \/* Alabaster \/ Cream *\/\n        --hr-bg-card: #ffffff;    \/* Pure White *\/\n        --hr-text-main: #2d2d2d;  \/* Charcoal *\/\n        --hr-text-sub: #555555;   \/* Grey *\/\n        \n        \/* Brand Accents *\/\n        --hr-maroon: #800000;     \/* IITM Maroon *\/\n        --hr-gold: #d4af37;       \/* Gold *\/\n        --hr-gold-light: #f3e5ab; \/* Pale Gold *\/\n        --hr-border: #e6e6e6;\n        \n        \/* Layout Reset *\/\n        background-color: var(--hr-bg-light);\n        width: 100%;\n        padding: 80px 0;\n        font-family: var(--hr-font-body);\n        color: var(--hr-text-main);\n        box-sizing: border-box;\n        line-height: 1.6;\n        overflow-x: hidden;\n        position: relative;\n    }\n\n    \/* Protection against global styles *\/\n    #doms-hr-root * { box-sizing: border-box; }\n    #doms-hr-root img { max-width: 100%; display: block; }\n\n    \/* --- BACKGROUND PATTERN (Subtle Connections) --- *\/\n    #doms-hr-root::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        \/* Subtle geometric pattern *\/\n        background-image: \n            radial-gradient(circle at 100% 100%, rgba(212, 175, 55, 0.05) 0%, transparent 20%),\n            radial-gradient(circle at 0% 0%, rgba(128, 0, 0, 0.03) 0%, transparent 20%),\n            linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);\n        background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    \/* Container *\/\n    .doms-hr-container {\n        max-width: 1280px;\n        margin: 0 auto;\n        padding: 0 24px;\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* --- HERO GRID (Slideshow Left, Text Right) --- *\/\n    .doms-hr-hero-grid {\n        display: grid;\n        grid-template-columns: 1.3fr 0.7fr; \/* 65% Slideshow, 35% Text *\/\n        gap: 60px;\n        align-items: center;\n        margin-bottom: 80px;\n    }\n\n    \/* 1. Left: Slideshow *\/\n    .doms-hr-slider-wrapper {\n        position: relative;\n        width: 100%;\n        height: 500px;\n        border-radius: 100px; \/* Soft rounding *\/\n        overflow: hidden;\n        box-shadow: 20px 20px 0px rgba(212, 175, 55, 0.15); \/* Stylish offset shadow *\/\n        background: #fff;\n    }\n\n    .doms-hr-slide {\n        display: none;\n        width: 100%;\n        height: 100%;\n        position: relative;\n         filter:none !important;\n    }\n\n    .doms-hr-slide.active {\n        display: block;\n        animation: hrFade 1.2s ease-in-out;\n    }\n    @keyframes hrFade { from { opacity: 0.6; } to { opacity: 1; } }\n\n    .doms-hr-slide img {\n         filter:none !important;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    \/* Slide Caption *\/\n    .doms-hr-caption {\n        position: absolute;\n        bottom: 30px;\n        left: 0;\n        background: rgba(255, 255, 255, 0.95);\n        padding: 15px 30px;\n        font-family: var(--hr-font-head);\n        font-size: 1.1rem;\n        color: var(--hr-maroon);\n        font-weight: 700;\n        border-right: 5px solid var(--hr-gold);\n        box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n    }\n\n    \/* Slide Controls *\/\n    .doms-hr-nav-btn {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 45px; height: 45px;\n        background: #fff;\n        border: 1px solid var(--hr-border);\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: 0.3s ease;\n        z-index: 10;\n        color: var(--hr-text-main);\n        box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n    }\n    .doms-hr-nav-btn:hover { background: var(--hr-maroon); color: #fff; border-color: var(--hr-maroon); }\n    .doms-hr-prev { left: 20px; }\n    .doms-hr-next { right: 20px; }\n\n    \/* 2. Right: Content *\/\n    .doms-hr-content {\n        padding-left: 10px;\n    }\n\n    .doms-hr-eyebrow {\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        color: var(--hr-gold);\n        font-weight: 700;\n        display: block;\n        margin-bottom: 15px;\n    }\n\n    .doms-hr-heading {\n        font-family: var(--hr-font-head);\n        font-size: 3rem;\n        line-height: 1.1;\n        color: var(--hr-maroon);\n        margin: 0 0 25px 0;\n        font-weight: 700;\n    }\n\n    .doms-hr-body {\n        font-size: 1.05rem;\n        color: var(--hr-text-sub);\n        margin-bottom: 25px;\n        text-align: justify;\n    }\n\n    .doms-hr-list-box {\n        background: #fff;\n        border: 1px solid var(--hr-border);\n        padding: 25px;\n        border-radius: 6px;\n        border-left: 4px solid var(--hr-gold);\n    }\n\n    .doms-hr-list-title {\n        font-family: var(--hr-font-head);\n        font-size: 1.2rem;\n        margin-bottom: 15px;\n        color: var(--hr-text-main);\n    }\n\n    .doms-hr-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n\n    .doms-hr-list li {\n        position: relative;\n        padding-left: 20px;\n        margin-bottom: 10px;\n        font-size: 0.95rem;\n        color: var(--hr-text-sub);\n        line-height: 1.5;\n    }\n\n    .doms-hr-list li::before {\n        content: \"\u2022\";\n        color: var(--hr-maroon);\n        font-weight: bold;\n        position: absolute;\n        left: 0;\n        top: 0px;\n    }\n\n    \/* --- TEAM SECTION --- *\/\n    .doms-hr-team-section {\n        border-top: 1px solid rgba(0,0,0,0.05);\n        padding-top: 60px;\n    }\n\n    .doms-hr-team-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        margin-bottom: 40px;\n    }\n\n    .doms-hr-team-title {\n        font-family: var(--hr-font-head);\n        font-size: 2.2rem;\n        color: var(--hr-text-main);\n        margin: 0;\n    }\n\n    \/* Scroll Buttons *\/\n    .doms-hr-controls { display: flex; gap: 12px; }\n\n    .doms-hr-scroll-btn {\n        width: 44px; height: 44px;\n        background: #fff;\n        border: 1px solid var(--hr-border);\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: all 0.3s;\n        color: var(--hr-text-main);\n    }\n\n    .doms-hr-scroll-btn:hover {\n        background: var(--hr-maroon);\n        color: #fff;\n        border-color: var(--hr-maroon);\n        transform: translateY(-2px);\n    }\n\n    \/* Track *\/\n    .doms-hr-track {\n        display: flex;\n        gap: 25px;\n        overflow-x: auto;\n        padding: 10px 0 30px 0;\n        scroll-behavior: smooth;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n        scroll-snap-type: x mandatory;\n        padding-left: 2px;\n    }\n    .doms-hr-track::-webkit-scrollbar { display: none; }\n\n    \/* Card Styling *\/\n    .doms-hr-card {\n        flex: 0 0 240px; \/* Compact size *\/\n        scroll-snap-align: start;\n        background: var(--hr-bg-card);\n        border: 1px solid var(--hr-border);\n        border-radius: 6px;\n        overflow: hidden;\n        cursor: pointer;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n    }\n\n    .doms-hr-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 10px 25px rgba(0,0,0,0.08);\n        border-color: var(--hr-gold);\n    }\n\n    .doms-hr-img-box {\n        width: 100%;\n        aspect-ratio: 3 \/ 4;\n        overflow: hidden;\n        background: #f0f0f0;\n        position: relative;\n    }\n\n    .doms-hr-img-box img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.5s ease;\n        filter: grayscale(10%); \/* Subtle desaturation *\/\n         filter:none !important\n    }\n\n    .doms-hr-card:hover .doms-hr-img-box img {\n        transform: scale(1.05);\n        filter: grayscale(0%);\n    }\n\n    .doms-hr-info {\n        padding: 16px;\n        text-align: center;\n        border-top: 1px solid var(--hr-border);\n    }\n\n    .doms-hr-name {\n        font-family: var(--hr-font-head);\n        font-size: 1.15rem;\n        margin: 0 0 5px 0;\n        color: var(--hr-maroon);\n        font-weight: 700;\n    }\n\n    .doms-hr-role {\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        color: var(--hr-text-sub);\n        margin: 0;\n        font-weight: 600;\n    }\n\n    \/* =========================================\n       RESPONSIVE DESIGN\n       ========================================= *\/\n    \n    @media (max-width: 1024px) {\n        .doms-hr-hero-grid {\n            grid-template-columns: 1fr; \/* Stack vertically on tablet *\/\n            gap: 40px;\n        }\n        .doms-hr-slider-wrapper { height: 400px; }\n        .doms-hr-content { padding-left: 0; }\n    }\n\n    @media (max-width: 600px) {\n        #doms-hr-root { padding: 50px 0; }\n        \n        .doms-hr-heading { font-size: 2.4rem; }\n        \n        \/* Mobile Slideshow *\/\n        .doms-hr-slider-wrapper {\n            height: 280px; \/* Compact height for mobile *\/\n            box-shadow: none; \/* Remove offset shadow on mobile for cleanliness *\/\n            margin-bottom: 20px;\n        }\n        \n        \/* Stack Header *\/\n        .doms-hr-team-header {\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 15px;\n        }\n        .doms-hr-team-title { font-size: 2rem; }\n\n        \/* Mobile Card Sizing *\/\n        .doms-hr-track { gap: 15px; padding-right: 20px; }\n        .doms-hr-card { \n            flex: 0 0 75vw; \/* Proportional width *\/\n            scroll-snap-align: center;\n        }\n    }\n\n<\/style>\n<\/head>\n<body>\n\n<div id=\"doms-hr-root\">\n    <div class=\"doms-hr-container\">\n\n        <div class=\"doms-hr-hero-grid\">\n            \n            <div class=\"doms-hr-slider-wrapper\">\n                \n                <div class=\"doms-hr-slide active\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/forume1.jpg\" alt=\"HR Workshop\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1269px; --smush-placeholder-aspect-ratio: 1269\/1280;\">\n                    <div class=\"doms-hr-caption\">HR Workshops & Training<\/div>\n                <\/div>\n\n                <div class=\"doms-hr-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/forum3.jpg\" alt=\"Group Discussion\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/1280;\">\n                    <div class=\"doms-hr-caption\">Active Industry Discussions<\/div>\n                <\/div>\n\n                <div class=\"doms-hr-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/forum2.jpg\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/749;\">\n                    <div class=\"doms-hr-caption\">Leadership Talks<\/div>\n                <\/div>\n\n                <button class=\"doms-hr-nav-btn doms-hr-prev\" onclick=\"hrPlusSlides(-1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n                <\/button>\n                <button class=\"doms-hr-nav-btn doms-hr-next\" onclick=\"hrPlusSlides(1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n                <\/button>\n            <\/div>\n\n            <div class=\"doms-hr-content\">\n                <span class=\"doms-hr-eyebrow\">Student Club<\/span>\n                <h1 class=\"doms-hr-heading\">HR - FoHRum<\/h1>\n                \n                <p class=\"doms-hr-body\">\n                    FoHRum, the HR club of DoMS IIT Madras aims to provide a greater exposure to the students in the field of Human resources. We are a platform for all HR enthusiasts to come forward and exchange their ideas relating to the latest trends in HR.\n                <\/p>\n\n                <div class=\"doms-hr-list-box\">\n                    <h4 class=\"doms-hr-list-title\">Key Activities:<\/h4>\n                    <ul class=\"doms-hr-list\">\n                        <li>Organizing quizzes, talks and debates<\/li>\n                        <li>Informing students about opportunities (Webinars\/Competitions)<\/li>\n                        <li>Active discussion about developments in the field<\/li>\n                        <li>Knowledge sharing with HR clubs of other colleges<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"doms-hr-team-section\">\n            <div class=\"doms-hr-team-header\">\n                <h2 class=\"doms-hr-team-title\">Conveners<\/h2>\n                <div class=\"doms-hr-controls\">\n                    <button id=\"hr-scroll-left\" class=\"doms-hr-scroll-btn\" aria-label=\"Scroll Left\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n                    <\/button>\n                    <button id=\"hr-scroll-right\" class=\"doms-hr-scroll-btn\" aria-label=\"Scroll Right\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-hr-track\" id=\"hr-track\">\n                \n                <div class=\"doms-hr-card\">\n                    <div class=\"doms-hr-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Kurian-scaled.jpg\" alt=\"Kurian Philip\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-hr-info\">\n                        <h4 class=\"doms-hr-name\">Kurian Philip<\/h4>\n                        <p class=\"doms-hr-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-hr-card\">\n                    <div class=\"doms-hr-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Sai-scaled.jpg\" alt=\"S Sai Niharika\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-hr-info\">\n                        <h4 class=\"doms-hr-name\">S Sai Niharika<\/h4>\n                        <p class=\"doms-hr-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-hr-card\">\n                    <div class=\"doms-hr-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Olivia-scaled.jpg\" alt=\"Olivia Joshi T\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-hr-info\">\n                        <h4 class=\"doms-hr-name\">Olivia Joshi T<\/h4>\n                        <p class=\"doms-hr-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <!--<div class=\"doms-hr-card\">-->\n                <!--    <div class=\"doms-hr-img-box\">-->\n                <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1519085360753-af0119f7cbe7?w=500&auto=format&fit=crop&q=60\" alt=\"Core Team\">-->\n                <!--    <\/div>-->\n                <!--    <div class=\"doms-hr-info\">-->\n                <!--        <h4 class=\"doms-hr-name\">Join Us<\/h4>-->\n                <!--        <p class=\"doms-hr-role\">Member<\/p>-->\n                <!--    <\/div>-->\n                <!--<\/div>-->\n\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/\/ --- 1. Slideshow Logic ---\n        let hrSlideIndex = 1;\n\n        \/\/ Global function for onclick (namespaced)\n        window.hrPlusSlides = function(n) {\n            showHrSlides(hrSlideIndex += n);\n        }\n\n        function showHrSlides(n) {\n            let i;\n            let slides = document.querySelectorAll(\".doms-hr-slide\");\n            if (!slides.length) return;\n\n            if (n > slides.length) {hrSlideIndex = 1}    \n            if (n < 1) {hrSlideIndex = slides.length}\n            \n            for (i = 0; i < slides.length; i++) {\n                slides[i].style.display = \"none\";  \n                slides[i].classList.remove(\"active\");\n            }\n            slides[hrSlideIndex-1].style.display = \"block\";  \n            slides[hrSlideIndex-1].classList.add(\"active\");\n        }\n\n        \/\/ --- 2. Initialization & Scroll ---\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \n            \/\/ Start Slideshow\n            showHrSlides(hrSlideIndex);\n            \n            \/\/ Auto Play (5s)\n            setInterval(function() {\n                window.hrPlusSlides(1);\n            }, 5000);\n\n            \/\/ Scroll Logic\n            const track = document.getElementById('hr-track');\n            const btnLeft = document.getElementById('hr-scroll-left');\n            const btnRight = document.getElementById('hr-scroll-right');\n\n            if (track && btnLeft && btnRight) {\n                btnRight.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-hr-card');\n                    const gap = 25; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 260;\n                    track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n                });\n\n                btnLeft.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-hr-card');\n                    const gap = 25; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 260;\n                    track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n                });\n            }\n        });\n    })();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bea1446 e-con-full e-flex e-con e-parent\" data-id=\"bea1446\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-920e0c6 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"920e0c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* =========================================\r\n       CSS ISOLATION: DoMS Marketing Club (Mercado)\r\n       ========================================= *\/\r\n\r\n    #doms-mkt-root {\r\n        \/* --- Theme Variables (Dark Editorial) --- *\/\r\n        --mkt-font-head: 'Playfair Display', serif;\r\n        --mkt-font-body: 'Lato', sans-serif;\r\n        \r\n        \/* Backgrounds *\/\r\n        --mkt-bg-dark: #111827;   \/* Deep Gunmetal\/Navy - \"Bit Dark\" *\/\r\n        --mkt-bg-card: #1f2937;   \/* Slightly lighter for cards *\/\r\n        \r\n        \/* Text *\/\r\n        --mkt-text-main: #f9fafb; \/* Off-white for high contrast *\/\r\n        --mkt-text-sub: #d1d5db;  \/* Light grey for body *\/\r\n        --mkt-text-gold: #fbbf24; \/* Bright Gold accent *\/\r\n        \r\n        \/* Accents *\/\r\n        --mkt-maroon: #991b1b;    \/* Deep Red\/Maroon *\/\r\n        --mkt-gold: #d4af37;      \/* Classic Gold *\/\r\n        --mkt-border: #374151;    \/* Subtle border *\/\r\n        \r\n        \/* Layout Reset *\/\r\n        background-color: var(--mkt-bg-dark);\r\n        width: 100%;\r\n        padding: 80px 0;\r\n        font-family: var(--mkt-font-body);\r\n        color: var(--mkt-text-main);\r\n        box-sizing: border-box;\r\n        line-height: 1.6;\r\n        overflow-x: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    \/* Scope Protection *\/\r\n    #doms-mkt-root * { box-sizing: border-box; }\r\n    #doms-mkt-root img { max-width: 100%; display: block; }\r\n\r\n    \/* --- BACKGROUND TEXTURE (Interesting Marketing \"Buzz\") --- *\/\r\n    #doms-mkt-root::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        \/* Abstract digital noise\/gradient pattern *\/\r\n        background: \r\n            radial-gradient(circle at 15% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 40%), \/* Gold glow left *\/\r\n            radial-gradient(circle at 85% 20%, rgba(153, 27, 27, 0.1) 0%, transparent 40%),  \/* Maroon glow right *\/\r\n            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n        background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;\r\n        z-index: 0;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* Container *\/\r\n    .doms-mkt-container {\r\n        max-width: 1280px;\r\n        margin: 0 auto;\r\n        padding: 0 24px;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* --- HERO GRID --- *\/\r\n    .doms-mkt-hero-grid {\r\n        display: grid;\r\n        \/* Layout: Text Left (35%), Slideshow Right (65%) *\/\r\n        grid-template-columns: 0.8fr 1.2fr; \r\n        gap: 60px;\r\n        align-items: center;\r\n        margin-bottom: 80px;\r\n    }\r\n\r\n    \/* Left: Text Content *\/\r\n    .doms-mkt-content { padding-right: 10px; }\r\n\r\n    .doms-mkt-tag {\r\n        display: inline-block;\r\n        font-size: 0.75rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: var(--mkt-text-gold);\r\n        font-weight: 700;\r\n        margin-bottom: 20px;\r\n        border: 1px solid var(--mkt-text-gold);\r\n        padding: 6px 12px;\r\n        border-radius: 50px;\r\n    }\r\n\r\n    .doms-mkt-heading {\r\n        font-family: var(--mkt-font-head);\r\n        font-size: 3.2rem;\r\n        line-height: 1.1;\r\n        color: #ffffff;\r\n        margin: 0 0 30px 0;\r\n        font-weight: 700;\r\n        \/* Text gradient for style *\/\r\n        background: linear-gradient(to right, #ffffff, #e5e7eb);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n    }\r\n\r\n    .doms-mkt-block {\r\n        margin-bottom: 30px;\r\n        border-left: 3px solid var(--mkt-maroon);\r\n        padding-left: 20px;\r\n    }\r\n\r\n    .doms-mkt-subhead {\r\n        font-family: var(--mkt-font-head);\r\n        font-size: 1.3rem;\r\n        color: var(--mkt-text-gold);\r\n        margin-bottom: 10px;\r\n        font-weight: 400;\r\n        font-style: italic;\r\n    }\r\n\r\n    .doms-mkt-body {\r\n        font-size: 1.05rem;\r\n        color: var(--mkt-text-sub);\r\n        margin: 0;\r\n        text-align: justify;\r\n    }\r\n\r\n    \/* Right: Slideshow Frame *\/\r\n    .doms-mkt-slider-wrapper {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 550px; \/* Large, immersive height *\/\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); \/* Deep shadow *\/\r\n        border-radius: 50px;\r\n        overflow: hidden;\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    .doms-mkt-slide {\r\n        display: none;\r\n        width: 100%;\r\n        height: 100%;\r\n        position: relative;\r\n         filter:none !important\r\n    }\r\n    \r\n    .doms-mkt-slide.active {\r\n        display: block;\r\n        animation: mktFade 1s ease-in-out;\r\n    }\r\n    @keyframes mktFade { from { opacity: 0.6; } to { opacity: 1; } }\r\n\r\n    .doms-mkt-slide img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n         filter:none !important\r\n    }\r\n\r\n    \/* Slide Overlay & Caption *\/\r\n    .doms-mkt-caption {\r\n        position: absolute;\r\n        bottom: 0; left: 0; width: 100%;\r\n        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);\r\n        color: #fff;\r\n        padding: 60px 30px 25px 30px;\r\n        font-family: var(--mkt-font-head);\r\n        font-size: 1.25rem;\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* Navigation Buttons *\/\r\n    .doms-mkt-nav-btn {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 50px; height: 50px;\r\n        background: rgba(255, 255, 255, 0.1); \/* Glassy *\/\r\n        backdrop-filter: blur(5px);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        cursor: pointer;\r\n        display: flex; align-items: center; justify-content: center;\r\n        transition: 0.3s ease;\r\n        z-index: 10;\r\n        color: #fff;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .doms-mkt-nav-btn:hover { background: var(--mkt-text-gold); color: #000; border-color: var(--mkt-text-gold); }\r\n    .doms-mkt-prev { left: 20px; }\r\n    .doms-mkt-next { right: 20px; }\r\n\r\n    \/* --- TEAM SECTION --- *\/\r\n    .doms-mkt-team-section {\r\n        border-top: 1px solid var(--mkt-border);\r\n        padding-top: 60px;\r\n    }\r\n\r\n    .doms-mkt-team-header {\r\n        display: flex; justify-content: space-between; align-items: flex-end;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .doms-mkt-team-title {\r\n        font-family: var(--mkt-font-head);\r\n        font-size: 2.5rem;\r\n        color: #fff;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* Controls *\/\r\n    .doms-mkt-scroll-controls { display: flex; gap: 12px; }\r\n\r\n    .doms-mkt-scroll-btn {\r\n        width: 44px; height: 44px;\r\n        border: 1px solid var(--mkt-border);\r\n        background: rgba(255,255,255,0.05);\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        display: flex; align-items: center; justify-content: center;\r\n        transition: all 0.2s;\r\n        color: #fff;\r\n    }\r\n\r\n    .doms-mkt-scroll-btn:hover {\r\n        border-color: var(--mkt-text-gold);\r\n        color: var(--mkt-text-gold);\r\n        background: rgba(251, 191, 36, 0.1);\r\n    }\r\n\r\n    \/* Track *\/\r\n    .doms-mkt-track {\r\n        display: flex;\r\n        gap: 25px;\r\n        overflow-x: auto;\r\n        padding-bottom: 30px;\r\n        scroll-behavior: smooth;\r\n        scrollbar-width: none;\r\n        -ms-overflow-style: none;\r\n        scroll-snap-type: x mandatory;\r\n        padding-left: 2px;\r\n    }\r\n    .doms-mkt-track::-webkit-scrollbar { display: none; }\r\n\r\n    \/* Team Card *\/\r\n    .doms-mkt-card {\r\n        flex: 0 0 240px; \/* Fixed, proportional width *\/\r\n        scroll-snap-align: start;\r\n        background: var(--mkt-bg-card);\r\n        border: 1px solid var(--mkt-border);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        cursor: pointer;\r\n        border-radius: 6px;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .doms-mkt-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 10px 25px rgba(0,0,0,0.5); \/* Strong shadow on dark bg *\/\r\n        border-color: var(--mkt-text-gold);\r\n    }\r\n\r\n    .doms-mkt-img-wrap {\r\n        width: 100%; aspect-ratio: 3 \/ 4;\r\n        overflow: hidden; background: #000; position: relative;\r\n    }\r\n    \r\n    .doms-mkt-img-wrap img {\r\n        width: 100%; height: 100%; object-fit: cover;\r\n        transition: transform 0.5s ease;\r\n        filter: grayscale(20%); \/* Artistic touch *\/\r\n         filter:none !important;\r\n    }\r\n    \r\n    .doms-mkt-card:hover .doms-mkt-img-wrap img {\r\n        transform: scale(1.05);\r\n        filter: grayscale(0%);\r\n         filter:none !important;\r\n    }\r\n\r\n    .doms-mkt-info {\r\n        padding: 18px; text-align: center;\r\n        background: var(--mkt-bg-card);\r\n        border-top: 1px solid rgba(255,255,255,0.05);\r\n    }\r\n\r\n    .doms-mkt-name {\r\n        font-family: var(--mkt-font-head);\r\n        font-size: 1.15rem;\r\n        margin: 0 0 5px 0;\r\n        color: #fff;\r\n        font-weight: 700;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .doms-mkt-role {\r\n        font-size: 0.75rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        color: var(--mkt-text-gold);\r\n        margin: 0;\r\n        font-weight: 600;\r\n    }\r\n\r\n    \/* =========================================\r\n       RESPONSIVE DESIGN\r\n       ========================================= *\/\r\n    \r\n    @media (max-width: 1024px) {\r\n        .doms-mkt-hero-grid { \r\n            grid-template-columns: 1fr; \/* Stack vertically on tablet *\/\r\n            gap: 50px; \r\n        }\r\n        \r\n        \/* Reorder so Image is on top, Text below for better mobile flow *\/\r\n        .doms-mkt-slider-wrapper { order: 1; height: 450px; }\r\n        .doms-mkt-content { order: 2; padding-right: 0; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        #doms-mkt-root { padding: 50px 0; }\r\n        \r\n        .doms-mkt-heading { font-size: 2.5rem; }\r\n        \r\n        .doms-mkt-slider-wrapper { \r\n            height: 300px; \/* Smaller height on mobile *\/\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .doms-mkt-team-header { \r\n            flex-direction: column; align-items: flex-start; gap: 15px; \r\n        }\r\n        .doms-mkt-team-title { font-size: 2rem; }\r\n\r\n        \/* Mobile Card Sizing *\/\r\n        .doms-mkt-track { gap: 15px; padding-right: 20px; }\r\n        .doms-mkt-card { \r\n            flex: 0 0 75vw; \/* 75% width for peek effect *\/\r\n            scroll-snap-align: center; \r\n        }\r\n    }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"doms-mkt-root\">\r\n    <div class=\"doms-mkt-container\">\r\n\r\n        <div class=\"doms-mkt-hero-grid\">\r\n            \r\n            <div class=\"doms-mkt-content\">\r\n                <span class=\"doms-mkt-tag\">Mercado<\/span>\r\n                <h1 class=\"doms-mkt-heading\">Marketing - The Kotler\u2019s Club<\/h1>\r\n                \r\n                <div class=\"doms-mkt-block\">\r\n                    <h3 class=\"doms-mkt-subhead\">What do we do?<\/h3>\r\n                    <p class=\"doms-mkt-body\">\r\n                        We strive to provide a platform for active discussions to ignite the minds of the marketing enthusiasts and to keep them abreast with the latest buzz around the Marketing world for them to truly unleash in them the \u201cMarketing extraordinaire\u201d. We also keep the students proactively engaged through various social media handles, games & activities. At its core, Mercado aims to aid student community in understanding the know-hows of Marketing concepts & jargons and to put them to practice.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"doms-mkt-block\">\r\n                    <h3 class=\"doms-mkt-subhead\">What do we aim to do?<\/h3>\r\n                    <p class=\"doms-mkt-body\">\r\n                        Mercado aims to explore new avenues to impart holistic and field-based knowledge through the many activities to abridge the gap between theoretical and practical knowledge in the ever-pulsating field of marketing.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"doms-mkt-slider-wrapper\">\r\n                \r\n                <!--<div class=\"doms-mkt-slide active\">-->\r\n                <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1557804506-669a67965ba0?q=80&w=1200&auto=format&fit=crop\" alt=\"Marketing Strategy\">-->\r\n                <!--    <div class=\"doms-mkt-caption\">Unleashing Marketing Extraordinaire<\/div>-->\r\n                <!--<\/div>-->\r\n\r\n                <!--<div class=\"doms-mkt-slide\">-->\r\n                <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?q=80&w=1200&auto=format&fit=crop\" alt=\"Creative Discussion\">-->\r\n                <!--    <div class=\"doms-mkt-caption\">Igniting Minds & Discussions<\/div>-->\r\n                <!--<\/div>-->\r\n\r\n                <div class=\"doms-mkt-slide\">\r\n                    <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/DoMS-League-1-scaled.jpg\" alt=\"Marketing Games\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <!--<div class=\"doms-mkt-caption\">Engaging Games & Activities<\/div>-->\r\n                <\/div>\r\n\r\n                <button class=\"doms-mkt-nav-btn doms-mkt-prev\" onclick=\"mktPlusSlides(-1)\">\r\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\r\n                <\/button>\r\n                <button class=\"doms-mkt-nav-btn doms-mkt-next\" onclick=\"mktPlusSlides(1)\">\r\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n                <\/button>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"doms-mkt-team-section\">\r\n            <div class=\"doms-mkt-team-header\">\r\n                <h2 class=\"doms-mkt-team-title\">Conveners<\/h2>\r\n                <div class=\"doms-mkt-scroll-controls\">\r\n                    <button id=\"mkt-scroll-left\" class=\"doms-mkt-scroll-btn\" aria-label=\"Previous\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\r\n                    <\/button>\r\n                    <button id=\"mkt-scroll-right\" class=\"doms-mkt-scroll-btn\" aria-label=\"Next\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"doms-mkt-track\" id=\"mkt-track\">\r\n                \r\n                <div class=\"doms-mkt-card\">\r\n                    <div class=\"doms-mkt-img-wrap\">\r\n                        <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/Derick-scaled.jpg\" alt=\"Derick Martin\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <\/div>\r\n                    <div class=\"doms-mkt-info\">\r\n                        <h4 class=\"doms-mkt-name\">Derick Martin<\/h4>\r\n                        <p class=\"doms-mkt-role\">Convener<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"doms-mkt-card\">\r\n                    <div class=\"doms-mkt-img-wrap\">\r\n                        <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/ShinjiniRoy-scaled.jpg\" alt=\"Shinjini Roy\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <\/div>\r\n                    <div class=\"doms-mkt-info\">\r\n                        <h4 class=\"doms-mkt-name\">Shinjini Roy<\/h4>\r\n                        <p class=\"doms-mkt-role\">Convener<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"doms-mkt-card\">\r\n                    <div class=\"doms-mkt-img-wrap\">\r\n                        <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/Sankalp-scaled.jpg\" alt=\"Sankalp Kaldate\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <\/div>\r\n                    <div class=\"doms-mkt-info\">\r\n                        <h4 class=\"doms-mkt-name\">Sankalp Kaldate<\/h4>\r\n                        <p class=\"doms-mkt-role\">Convener<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!--<div class=\"doms-mkt-card\">-->\r\n                <!--    <div class=\"doms-mkt-img-wrap\">-->\r\n                <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?w=500&auto=format&fit=crop&q=60\" alt=\"Join the team\">-->\r\n                <!--    <\/div>-->\r\n                <!--    <div class=\"doms-mkt-info\">-->\r\n                <!--        <h4 class=\"doms-mkt-name\">Join Mercado<\/h4>-->\r\n                <!--        <p class=\"doms-mkt-role\">Member<\/p>-->\r\n                <!--    <\/div>-->\r\n                <!--<\/div>-->\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        \/\/ --- 1. Slideshow Logic ---\r\n        let mktSlideIndex = 1;\r\n\r\n        window.mktPlusSlides = function(n) {\r\n            showMktSlides(mktSlideIndex += n);\r\n        }\r\n\r\n        function showMktSlides(n) {\r\n            let i;\r\n            let slides = document.querySelectorAll(\".doms-mkt-slide\");\r\n            \r\n            if (!slides.length) return;\r\n\r\n            if (n > slides.length) {mktSlideIndex = 1}    \r\n            if (n < 1) {mktSlideIndex = slides.length}\r\n            \r\n            \/\/ Hide all\r\n            for (i = 0; i < slides.length; i++) {\r\n                slides[i].style.display = \"none\";  \r\n                slides[i].classList.remove(\"active\");\r\n            }\r\n            \r\n            \/\/ Show active\r\n            slides[mktSlideIndex-1].style.display = \"block\";  \r\n            slides[mktSlideIndex-1].classList.add(\"active\");\r\n        }\r\n\r\n        \/\/ --- 2. Initialization & Scroll ---\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            \r\n            \/\/ Start Slideshow\r\n            showMktSlides(mktSlideIndex);\r\n            \r\n            \/\/ Auto Play (4.5 seconds for snappy feel)\r\n            setInterval(function() {\r\n                window.mktPlusSlides(1);\r\n            }, 4500);\r\n\r\n            \/\/ Scroll Buttons\r\n            const track = document.getElementById('mkt-track');\r\n            const btnLeft = document.getElementById('mkt-scroll-left');\r\n            const btnRight = document.getElementById('mkt-scroll-right');\r\n\r\n            if (track && btnLeft && btnRight) {\r\n                \r\n                btnRight.addEventListener('click', () => {\r\n                    \/\/ Card width + Gap calculation\r\n                    const card = track.querySelector('.doms-mkt-card');\r\n                    const gap = 25; \r\n                    const scrollAmount = card ? (card.offsetWidth + gap) : 265;\r\n                    \r\n                    track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\r\n                });\r\n\r\n                btnLeft.addEventListener('click', () => {\r\n                    const card = track.querySelector('.doms-mkt-card');\r\n                    const gap = 25; \r\n                    const scrollAmount = card ? (card.offsetWidth + gap) : 265;\r\n                    \r\n                    track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\r\n                });\r\n            }\r\n        });\r\n    })();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0e5a6ed e-con-full e-flex e-con e-parent\" data-id=\"0e5a6ed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c18b067 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"c18b067\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* =========================================\n       CSS ISOLATION: DoMS Operations Club (Opera House)\n       ========================================= *\/\n\n    #doms-ops-root {\n        \/* --- Theme Variables --- *\/\n        --ops-font-head: 'Playfair Display', serif;\n        --ops-font-body: 'Lato', sans-serif;\n        \n        \/* Palette *\/\n        --ops-bg-light: #f9fafb;  \/* Very subtle grey-white *\/\n        --ops-bg-card: #ffffff;   \/* Pure White *\/\n        --ops-text-main: #111827; \/* Near Black *\/\n        --ops-text-sub: #4b5563;  \/* Cool Grey *\/\n        \n        \/* Accents *\/\n        --ops-maroon: #800000;    \/* IITM Maroon *\/\n        --ops-gold: #c29d47;      \/* Muted Gold *\/\n        --ops-border: #e5e7eb;    \/* Light Grey Border *\/\n        --ops-dot-color: #cbd5e1; \/* Visible technical dots *\/\n\n        \/* Layout Reset *\/\n        background-color: var(--ops-bg-light);\n        width: 100%;\n        padding: 100px 0;\n        font-family: var(--ops-font-body);\n        color: var(--ops-text-main);\n        box-sizing: border-box;\n        line-height: 1.6;\n        overflow-x: hidden;\n        position: relative;\n    }\n\n    #doms-ops-root * { box-sizing: border-box; }\n    #doms-ops-root img { max-width: 100%; display: block; }\n\n    \/* --- BACKGROUND: Technical Dotted Grid with Vignette --- *\/\n    #doms-ops-root::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        \/* Dotted Pattern *\/\n        background-image: radial-gradient(var(--ops-dot-color) 2px, transparent 2px);\n        background-size: 30px 30px; \n        opacity: 0.7;\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    \/* Soft Vignette Overlay for Depth *\/\n    #doms-ops-root::after {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: radial-gradient(circle at center, transparent 50%, rgba(249,250,251, 0.9) 100%);\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    \/* Container *\/\n    .doms-ops-container {\n        max-width: 1380px; \/* Extra wide for the big slideshow *\/\n        margin: 0 auto;\n        padding: 0 30px;\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* --- HERO SECTION GRID --- *\/\n    .doms-ops-hero-grid {\n        display: grid;\n        \/* 65% Slideshow | 35% Text -> Big Visual Impact *\/\n        grid-template-columns: 1.6fr 1fr; \n        gap: 80px;\n        align-items: center; \/* Vertically Center Text *\/\n        margin-bottom: 100px;\n    }\n\n    \/* 1. Left: Massive Slideshow *\/\n    .doms-ops-slider-wrapper {\n        position: relative;\n        width: 100%;\n        height: 640px; \/* Highly Paid Designer Height *\/\n        border-radius: 60px;\n        overflow: hidden;\n        \/* Multi-layered shadow for pop *\/\n        box-shadow: \n            0 20px 25px -5px rgba(0, 0, 0, 0.1), \n            0 10px 10px -5px rgba(0, 0, 0, 0.04),\n            0 0 0 1px rgba(0,0,0,0.05);\n        background: #000;\n    }\n\n    .doms-ops-slide {\n        display: none;\n        width: 100%;\n        height: 100%;\n        position: relative;\n    }\n\n    .doms-ops-slide.active {\n        display: block;\n        animation: opsFade 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    @keyframes opsFade { from { opacity: 0.8; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }\n\n    .doms-ops-slide img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        filter:none!important;\n    }\n\n    \/* Caption Card *\/\n    .doms-ops-caption {\n        position: absolute;\n        bottom: 50px;\n        left: 0;\n        background: rgba(255, 255, 255, 0.96);\n        padding: 20px 40px;\n        border-top-right-radius: 4px;\n        border-bottom-right-radius: 4px;\n        border-left: 6px solid var(--ops-maroon);\n        font-family: var(--ops-font-head);\n        font-size: 1.3rem;\n        color: var(--ops-text-main);\n        font-weight: 700;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n        backdrop-filter: blur(5px);\n    }\n\n    \/* Controls *\/\n    .doms-ops-nav-btn {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 64px; height: 64px;\n        background: #fff;\n        border: 1px solid var(--ops-border);\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: 0.3s ease;\n        z-index: 10;\n        color: var(--ops-text-main);\n        box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n    }\n    .doms-ops-nav-btn:hover { background: var(--ops-maroon); color: #fff; border-color: var(--ops-maroon); transform: translateY(-50%) scale(1.1); }\n    .doms-ops-prev { left: 30px; }\n    .doms-ops-next { right: 30px; }\n\n\n    \/* 2. Right: Text Content (Aligned & Styled) *\/\n    .doms-ops-content {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        padding-right: 20px;\n    }\n\n    .doms-ops-tag {\n        display: inline-block;\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 3px;\n        color: var(--ops-maroon);\n        font-weight: 800;\n        margin-bottom: 25px;\n        position: relative;\n        padding-left: 50px;\n    }\n\n    \/* Decorative line before tag *\/\n    .doms-ops-tag::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 50%;\n        width: 40px;\n        height: 2px;\n        background: var(--ops-gold);\n    }\n\n    .doms-ops-heading {\n        font-family: var(--ops-font-head);\n        font-size: 3.8rem;\n        line-height: 1.05;\n        color: var(--ops-text-main);\n        margin: 0 0 35px 0;\n        font-weight: 700;\n        letter-spacing: -1px;\n    }\n\n    .doms-ops-body {\n        font-size: 1.1rem;\n        color: var(--ops-text-sub);\n        margin-bottom: 35px;\n        text-align: justify;\n        font-weight: 300;\n    }\n\n    \/* List Box *\/\n    .doms-ops-list-box {\n        background: #fff;\n        border: 1px solid var(--ops-border);\n        padding: 35px;\n        border-radius: 4px;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.03);\n        border-top: 3px solid var(--ops-gold);\n    }\n\n    .doms-ops-list-title {\n        font-family: var(--ops-font-head);\n        font-size: 1.25rem;\n        margin-bottom: 20px;\n        color: var(--ops-text-main);\n        font-weight: 700;\n        font-style: italic;\n    }\n\n    .doms-ops-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n\n    .doms-ops-list li {\n        position: relative;\n        padding-left: 28px;\n        margin-bottom: 12px;\n        font-size: 1rem;\n        color: var(--ops-text-sub);\n        line-height: 1.5;\n    }\n\n    \/* Technical Square Bullet *\/\n    .doms-ops-list li::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 8px;\n        width: 10px;\n        height: 10px;\n        border: 2px solid var(--ops-gold);\n    }\n\n    \/* --- TEAM SECTION --- *\/\n    .doms-ops-team-section {\n        border-top: 1px solid var(--ops-border);\n        padding-top: 80px;\n    }\n\n    .doms-ops-team-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        margin-bottom: 50px;\n    }\n\n    .doms-ops-team-title {\n        font-family: var(--ops-font-head);\n        font-size: 2.5rem;\n        color: var(--ops-text-main);\n        margin: 0;\n        font-weight: 700;\n    }\n\n    \/* Scroll Controls *\/\n    .doms-ops-controls { display: flex; gap: 12px; }\n\n    .doms-ops-scroll-btn {\n        width: 50px; height: 50px;\n        background: #fff;\n        border: 1px solid var(--ops-border);\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: all 0.3s;\n        color: var(--ops-text-main);\n    }\n\n    .doms-ops-scroll-btn:hover {\n        background: var(--ops-maroon);\n        color: #fff;\n        border-color: var(--ops-maroon);\n    }\n\n    \/* Track *\/\n    .doms-ops-track {\n        display: flex;\n        gap: 30px;\n        overflow-x: auto;\n        padding: 10px 0 40px 0;\n        scroll-behavior: smooth;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n        scroll-snap-type: x mandatory;\n        padding-left: 2px;\n    }\n    .doms-ops-track::-webkit-scrollbar { display: none; }\n\n    \/* Card Styling *\/\n    .doms-ops-card {\n        flex: 0 0 260px;\n        scroll-snap-align: start;\n        background: var(--ops-bg-card);\n        border: 1px solid var(--ops-border);\n        border-radius: 4px;\n        overflow: hidden;\n        cursor: pointer;\n        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;\n    }\n\n    .doms-ops-card:hover {\n        transform: translateY(-10px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n        border-color: var(--ops-gold);\n    }\n\n    .doms-ops-img-box {\n        width: 100%;\n        aspect-ratio: 3 \/ 4;\n        overflow: hidden;\n        background: #f0f0f0;\n        position: relative;\n    }\n\n    .doms-ops-img-box img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.6s ease;\n        filter: grayscale(100%);\n        filter:none!important;\n    }\n\n    .doms-ops-card:hover .doms-ops-img-box img {\n        transform: scale(1.08);\n        filter: grayscale(0%);\n    }\n\n    .doms-ops-info {\n        padding: 20px;\n        text-align: center;\n        border-top: 1px solid var(--ops-border);\n        background: #fff;\n        position: relative;\n        z-index: 2;\n    }\n\n    .doms-ops-name {\n        font-family: var(--ops-font-head);\n        font-size: 1.2rem;\n        margin: 0 0 5px 0;\n        color: var(--ops-maroon);\n        font-weight: 700;\n    }\n\n    .doms-ops-role {\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        color: var(--ops-text-sub);\n        margin: 0;\n        font-weight: 600;\n    }\n\n    \/* =========================================\n       RESPONSIVE DESIGN\n       ========================================= *\/\n    \n    @media (max-width: 1024px) {\n        .doms-ops-hero-grid {\n            grid-template-columns: 1fr; \/* Stack vertically *\/\n            gap: 50px;\n        }\n        .doms-ops-slider-wrapper { height: 500px; }\n        .doms-ops-content { \n            padding-left: 0; \n            max-width: 800px; \/* Readability max-width *\/\n        }\n    }\n\n    @media (max-width: 600px) {\n        #doms-ops-root { padding: 60px 0; }\n        \n        .doms-ops-heading { font-size: 2.8rem; }\n        \n        \/* Mobile Slideshow *\/\n        .doms-ops-slider-wrapper {\n            height: 350px; \n            margin-bottom: 30px;\n        }\n\n        .doms-ops-nav-btn { width: 50px; height: 50px; }\n        .doms-ops-prev { left: 15px; } .doms-ops-next { right: 15px; }\n        .doms-ops-caption { padding: 15px 20px; font-size: 1rem; bottom: 30px; }\n\n        .doms-ops-team-header {\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 15px;\n        }\n        .doms-ops-team-title { font-size: 2.2rem; }\n\n        .doms-ops-track { gap: 15px; padding-right: 20px; }\n        .doms-ops-card { \n            flex: 0 0 80vw;\n            scroll-snap-align: center; \n        }\n    }\n\n<\/style>\n<\/head>\n<body>\n\n<div id=\"doms-ops-root\">\n    <div class=\"doms-ops-container\">\n\n        <div class=\"doms-ops-hero-grid\">\n            \n            <div class=\"doms-ops-slider-wrapper\">\n                \n                <div class=\"doms-ops-slide active\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/opera1.jpg\" alt=\"Supply Chain Operations\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 790px; --smush-placeholder-aspect-ratio: 790\/784;\">\n                    <div class=\"doms-ops-caption\">Modern Supply Chain Insights<\/div>\n                <\/div>\n\n                <div class=\"doms-ops-slide\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/opera2.jpg\" alt=\"Industrial Operations\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 853px; --smush-placeholder-aspect-ratio: 853\/715;\">\n                    <div class=\"doms-ops-caption\">Industry Adaptability<\/div>\n                <\/div>\n\n                <!--<div class=\"doms-ops-slide\">-->\n                <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531403009284-440f080d1e12?q=80&w=1200&auto=format&fit=crop\" alt=\"Operations Case Study\">-->\n                <!--    <div class=\"doms-ops-caption\">Case Studies & Competitions<\/div>-->\n                <!--<\/div>-->\n\n                <button class=\"doms-ops-nav-btn doms-ops-prev\" onclick=\"opsPlusSlides(-1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n                <\/button>\n                <button class=\"doms-ops-nav-btn doms-ops-next\" onclick=\"opsPlusSlides(1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n                <\/button>\n            <\/div>\n\n            <div class=\"doms-ops-content\">\n                <span class=\"doms-ops-tag\">Student Club<\/span>\n                <h1 class=\"doms-ops-heading\">Operations - Opera House<\/h1>\n                \n                <p class=\"doms-ops-body\">\n                    The Operations club of DoMS, IITM focuses on bringing new insights in the domain of operations, outside the curriculum. Our main focus will be to learn about the changing circumstances and adaptability in the operations of various industries.\n                <\/p>\n\n                <div class=\"doms-ops-list-box\">\n                    <h4 class=\"doms-ops-list-title\">The club will mainly focus on:<\/h4>\n                    <ul class=\"doms-ops-list\">\n                        <li>Bringing awareness about the vastness that is operations<\/li>\n                        <li>Application oriented concepts and reasons behind it<\/li>\n                        <li>Newest industry update and its adaptability<\/li>\n                        <li>Organizing talks, competitions, case studies, etc.<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"doms-ops-team-section\">\n            <div class=\"doms-ops-team-header\">\n                <h2 class=\"doms-ops-team-title\">Conveners<\/h2>\n                <div class=\"doms-ops-controls\">\n                    <button id=\"ops-scroll-left\" class=\"doms-ops-scroll-btn\" aria-label=\"Scroll Left\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n                    <\/button>\n                    <button id=\"ops-scroll-right\" class=\"doms-ops-scroll-btn\" aria-label=\"Scroll Right\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-ops-track\" id=\"ops-track\">\n                \n                <div class=\"doms-ops-card\">\n                    <div class=\"doms-ops-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Hardik-Kulshrestha-scaled.jpg\" alt=\"Convener\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-ops-info\">\n                        <h4 class=\"doms-ops-name\">Hardik Kulshrestha<\/h4>\n                        <p class=\"doms-ops-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-ops-card\">\n                    <div class=\"doms-ops-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Hoysala-S-G-scaled.jpg\" alt=\"Convener\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-ops-info\">\n                        <h4 class=\"doms-ops-name\">Hoysala S G<\/h4>\n                        <p class=\"doms-ops-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-ops-card\">\n                    <div class=\"doms-ops-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Manahar-scaled.jpg\" alt=\"Convener\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-ops-info\">\n                        <h4 class=\"doms-ops-name\">Manhar Parakkal<\/h4>\n                        <p class=\"doms-ops-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-ops-card\">\n                    <div class=\"doms-ops-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Sanskar-Dhakulkar-scaled.jpg\" alt=\"Convener\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;\">\n                    <\/div>\n                    <div class=\"doms-ops-info\">\n                        <h4 class=\"doms-ops-name\">Sanskar Dhakulkar<\/h4>\n                        <p class=\"doms-ops-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/\/ --- 1. Slideshow Logic ---\n        let opsSlideIndex = 1;\n\n        window.opsPlusSlides = function(n) {\n            showOpsSlides(opsSlideIndex += n);\n        }\n\n        function showOpsSlides(n) {\n            let i;\n            let slides = document.querySelectorAll(\".doms-ops-slide\");\n            if (!slides.length) return;\n\n            if (n > slides.length) {opsSlideIndex = 1}    \n            if (n < 1) {opsSlideIndex = slides.length}\n            \n            for (i = 0; i < slides.length; i++) {\n                slides[i].style.display = \"none\";  \n                slides[i].classList.remove(\"active\");\n            }\n            slides[opsSlideIndex-1].style.display = \"block\";  \n            slides[opsSlideIndex-1].classList.add(\"active\");\n        }\n\n        \/\/ --- 2. Initialization & Scroll ---\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \n            \/\/ Start Slideshow\n            showOpsSlides(opsSlideIndex);\n            \n            \/\/ Auto Play (5s)\n            setInterval(function() {\n                window.opsPlusSlides(1);\n            }, 5000);\n\n            \/\/ Scroll Logic\n            const track = document.getElementById('ops-track');\n            const btnLeft = document.getElementById('ops-scroll-left');\n            const btnRight = document.getElementById('ops-scroll-right');\n\n            if (track && btnLeft && btnRight) {\n                btnRight.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-ops-card');\n                    const gap = 30; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 290;\n                    track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n                });\n\n                btnLeft.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-ops-card');\n                    const gap = 30; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 290;\n                    track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n                });\n            }\n        });\n    })();\n<\/script>\n\n<\/body>\n<\/html>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d60e5df e-con-full e-flex e-con e-parent\" data-id=\"d60e5df\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66f332b elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"66f332b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* =========================================\r\n       CSS ISOLATION: DoMS Consulting (Cognora)\r\n       ========================================= *\/\r\n\r\n    #doms-cognora-root {\r\n        \/* --- Theme Variables --- *\/\r\n        --cog-font-head: 'Playfair Display', serif;\r\n        --cog-font-body: 'Lato', sans-serif;\r\n        \r\n        \/* Palette: \"Bit Dark\" *\/\r\n        --cog-bg-dark: #1e293b;   \/* Deep Slate Blue\/Charcoal *\/\r\n        --cog-bg-card: #334155;   \/* Lighter Slate for cards *\/\r\n        \r\n        \/* Text *\/\r\n        --cog-text-main: #f8fafc; \/* Off-white for readability *\/\r\n        --cog-text-sub: #cbd5e1;  \/* Light grey-blue *\/\r\n        \r\n        \/* Accents *\/\r\n        --cog-maroon: #991b1b;    \/* Deep Red\/Maroon Accent *\/\r\n        --cog-gold: #fbbf24;      \/* Bright Gold *\/\r\n        --cog-border: #475569;    \/* Subtle border *\/\r\n        --cog-graphic: rgba(255, 255, 255, 0.03); \/* Graphic pattern color *\/\r\n\r\n        \/* Layout Reset *\/\r\n        background-color: var(--cog-bg-dark);\r\n        width: 100%;\r\n        padding: 90px 0;\r\n        font-family: var(--cog-font-body);\r\n        color: var(--cog-text-main);\r\n        box-sizing: border-box;\r\n        line-height: 1.6;\r\n        overflow-x: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    \/* CSS Scope Protection *\/\r\n    #doms-cognora-root * { box-sizing: border-box; }\r\n    #doms-cognora-root img { max-width: 100%; display: block; }\r\n\r\n    \/* --- BACKGROUND GRAPHICS (Network\/Strategy Nodes) --- *\/\r\n    #doms-cognora-root::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        \r\n        \/* Complex Geometric Pattern *\/\r\n        background-image: \r\n            radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,0.02) 21%, rgba(255,255,255,0.02) 34%, transparent 35%, transparent),\r\n            radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,0.02) 21%, rgba(255,255,255,0.02) 34%, transparent 35%, transparent),\r\n            linear-gradient(60deg, var(--cog-graphic) 25%, transparent 25.5%, transparent 75%, var(--cog-graphic) 75.5%),\r\n            linear-gradient(60deg, var(--cog-graphic) 25%, transparent 25.5%, transparent 75%, var(--cog-graphic) 75.5%);\r\n        background-size: 100% 100%, 100% 100%, 60px 100px, 60px 100px;\r\n        background-position: 0 0, 0 0, 0 0, 30px 50px;\r\n        opacity: 0.6;\r\n        z-index: 0;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* Container *\/\r\n    .doms-cog-container {\r\n        max-width: 1280px;\r\n        margin: 0 auto;\r\n        padding: 0 30px;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* --- HERO GRID (Text Left, Slideshow Right) --- *\/\r\n    .doms-cog-hero-grid {\r\n        display: grid;\r\n        grid-template-columns: 0.8fr 1.2fr; \/* 40% Text, 60% Slideshow *\/\r\n        gap: 70px;\r\n        align-items: center;\r\n        margin-bottom: 90px;\r\n    }\r\n\r\n    \/* 1. Left: Text Content *\/\r\n    .doms-cog-content {\r\n        padding-right: 10px;\r\n    }\r\n\r\n    .doms-cog-eyebrow {\r\n        display: inline-block;\r\n        font-size: 0.75rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: var(--cog-gold);\r\n        font-weight: 700;\r\n        margin-bottom: 20px;\r\n        border-bottom: 1px solid var(--cog-border);\r\n        padding-bottom: 5px;\r\n    }\r\n\r\n    .doms-cog-heading {\r\n        font-family: var(--cog-font-head);\r\n        font-size: 3.5rem;\r\n        line-height: 1.1;\r\n        color: #ffffff;\r\n        margin: 0 0 30px 0;\r\n        font-weight: 700;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    .doms-cog-heading span {\r\n        font-style: italic;\r\n        font-weight: 400;\r\n        color: var(--cog-text-sub);\r\n    }\r\n\r\n    .doms-cog-body {\r\n        font-size: 1.1rem;\r\n        color: var(--cog-text-sub);\r\n        margin-bottom: 30px;\r\n        text-align: justify;\r\n        font-weight: 300;\r\n        border-left: 3px solid var(--cog-maroon);\r\n        padding-left: 20px;\r\n    }\r\n\r\n    \/* 2. Right: Big Slideshow *\/\r\n    .doms-cog-slider-wrapper {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 580px; \/* Big vertical presence *\/\r\n        border-radius: 80px;\r\n        overflow: hidden;\r\n        \/* Premium shadow *\/\r\n        box-shadow: \r\n            0 25px 50px -12px rgba(0, 0, 0, 0.5), \r\n            0 0 0 1px rgba(255,255,255,0.05);\r\n        background: #0f172a;\r\n    }\r\n\r\n    .doms-cog-slide {\r\n        display: none;\r\n        width: 100%;\r\n        height: 100%;\r\n        position: relative;\r\n    }\r\n\r\n    .doms-cog-slide.active {\r\n        display: block;\r\n        animation: cogFade 1.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n    @keyframes cogFade { from { opacity: 0.5; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }\r\n\r\n    .doms-cog-slide img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    \/* Caption Overlay *\/\r\n    .doms-cog-caption {\r\n        position: absolute;\r\n        bottom: 0; left: 0; width: 100%;\r\n        background: linear-gradient(to top, rgba(15, 23, 42, 0.95), transparent);\r\n        padding: 80px 40px 30px 40px;\r\n        font-family: var(--cog-font-head);\r\n        font-size: 1.3rem;\r\n        color: #fff;\r\n        font-weight: 700;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* Controls *\/\r\n    .doms-cog-nav-btn {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 54px; height: 54px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        backdrop-filter: blur(4px);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        display: flex; align-items: center; justify-content: center;\r\n        transition: 0.3s ease;\r\n        z-index: 10;\r\n        color: #fff;\r\n    }\r\n    .doms-cog-nav-btn:hover { background: var(--cog-gold); color: #000; border-color: var(--cog-gold); }\r\n    .doms-cog-prev { left: 20px; }\r\n    .doms-cog-next { right: 20px; }\r\n\r\n\r\n    \/* --- TEAM SECTION --- *\/\r\n    .doms-cog-team-section {\r\n        border-top: 1px solid var(--cog-border);\r\n        padding-top: 70px;\r\n    }\r\n\r\n    .doms-cog-team-header {\r\n        display: flex; justify-content: space-between; align-items: flex-end;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .doms-cog-team-title {\r\n        font-family: var(--cog-font-head);\r\n        font-size: 2.5rem;\r\n        color: #fff;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* Scroll Controls *\/\r\n    .doms-cog-controls { display: flex; gap: 12px; }\r\n\r\n    .doms-cog-scroll-btn {\r\n        width: 44px; height: 44px;\r\n        background: transparent;\r\n        border: 1px solid var(--cog-border);\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        display: flex; align-items: center; justify-content: center;\r\n        transition: all 0.2s;\r\n        color: var(--cog-text-sub);\r\n    }\r\n\r\n    .doms-cog-scroll-btn:hover {\r\n        border-color: var(--cog-gold);\r\n        color: var(--cog-gold);\r\n        background: rgba(251, 191, 36, 0.05);\r\n    }\r\n\r\n    \/* Track *\/\r\n    .doms-cog-track {\r\n        display: flex;\r\n        gap: 25px;\r\n        overflow-x: auto;\r\n        padding-bottom: 30px;\r\n        scroll-behavior: smooth;\r\n        scrollbar-width: none;\r\n        -ms-overflow-style: none;\r\n        scroll-snap-type: x mandatory;\r\n        padding-left: 2px;\r\n    }\r\n    .doms-cog-track::-webkit-scrollbar { display: none; }\r\n\r\n    \/* Card Styling *\/\r\n    .doms-cog-card {\r\n        flex: 0 0 250px; \/* Fixed Width *\/\r\n        scroll-snap-align: start;\r\n        background: var(--cog-bg-card);\r\n        border: 1px solid var(--cog-border);\r\n        border-radius: 4px;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n\r\n    .doms-cog-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 15px 30px rgba(0,0,0,0.3);\r\n        border-color: var(--cog-gold);\r\n    }\r\n\r\n    .doms-cog-img-box {\r\n        width: 100%;\r\n        aspect-ratio: 3 \/ 4;\r\n        overflow: hidden;\r\n        background: #1e293b;\r\n        position: relative;\r\n    }\r\n\r\n    .doms-cog-img-box img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 0.5s ease;\r\n        filter: grayscale(100%); \/* Strategic B&W look *\/\r\n    }\r\n\r\n    .doms-cog-card:hover .doms-cog-img-box img {\r\n        transform: scale(1.05);\r\n        filter: grayscale(0%); \/* Reveal color on hover *\/\r\n    }\r\n\r\n    .doms-cog-info {\r\n        padding: 18px;\r\n        text-align: center;\r\n        border-top: 1px solid rgba(255,255,255,0.05);\r\n        background: var(--cog-bg-card);\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .doms-cog-name {\r\n        font-family: var(--cog-font-head);\r\n        font-size: 1.2rem;\r\n        margin: 0 0 5px 0;\r\n        color: #fff;\r\n        font-weight: 700;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .doms-cog-role {\r\n        font-size: 0.75rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        color: var(--cog-gold);\r\n        margin: 0;\r\n        font-weight: 600;\r\n    }\r\n\r\n    \/* =========================================\r\n       RESPONSIVE DESIGN\r\n       ========================================= *\/\r\n    \r\n    @media (max-width: 1024px) {\r\n        .doms-cog-hero-grid {\r\n            grid-template-columns: 1fr; \/* Stack vertically *\/\r\n            gap: 50px;\r\n        }\r\n        \/* Mobile Order: Slideshow First, Text Second? Or Text First? \r\n           Generally Text First for context, but bigger slideshow requested.\r\n           Let's keep text top for mobile readability. *\/\r\n        .doms-cog-slider-wrapper { height: 450px; }\r\n        .doms-cog-content { padding-right: 0; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        #doms-cognora-root { padding: 60px 0; }\r\n        \r\n        .doms-cog-heading { font-size: 2.8rem; }\r\n        \r\n        \/* Mobile Slideshow *\/\r\n        .doms-cog-slider-wrapper {\r\n            height: 320px; \r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .doms-cog-team-header {\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            gap: 15px;\r\n        }\r\n        .doms-cog-team-title { font-size: 2.2rem; }\r\n\r\n        \/* Mobile Card Sizing *\/\r\n        .doms-cog-track { gap: 15px; padding-right: 20px; }\r\n        .doms-cog-card { \r\n            flex: 0 0 80vw;\r\n            scroll-snap-align: center; \r\n        }\r\n    }\r\n\r\n<\/style>\r\n\r\n<div id=\"doms-cognora-root\">\r\n    <div class=\"doms-cog-container\">\r\n\r\n        <div class=\"doms-cog-hero-grid\">\r\n            \r\n            <div class=\"doms-cog-content\">\r\n                <span class=\"doms-cog-eyebrow\">Strategic Management<\/span>\r\n                <h1 class=\"doms-cog-heading\">Consulting - Cognora<\/h1>\r\n                \r\n                <p class=\"doms-cog-body\">\r\n                    Cognora is a platform for students in pursuit of excellence in management consulting and strategic management while keeping themselves abreast with the technological trends in industry.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"doms-cog-slider-wrapper\">\r\n                \r\n                <div class=\"doms-cog-slide active\">\r\n                    <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/cognora.jpg\"style=\"filter:none\" alt=\"Consulting Strategy Meeting\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <div class=\"doms-cog-caption\">Excellence in Management Consulting<\/div>\r\n                <\/div>\r\n\r\n                <div class=\"doms-cog-slide\">\r\n                    <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/cognora2.jpg\"\r\n                    style=\"filter:none\"alt=\"Technological Trends\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <div class=\"doms-cog-caption\">Adapting to Technological Trends<\/div>\r\n                <\/div>\r\n\r\n                <!--<div class=\"doms-cog-slide\">-->\r\n                <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507679799987-c73779587ccf?q=80&w=1200&auto=format&fit=crop\" alt=\"Strategic Leadership\">-->\r\n                <!--    <div class=\"doms-cog-caption\">Strategic Leadership & Growth<\/div>-->\r\n                <!--<\/div>-->\r\n\r\n                <button class=\"doms-cog-nav-btn doms-cog-prev\" onclick=\"cogPlusSlides(-1)\">\r\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\r\n                <\/button>\r\n                <button class=\"doms-cog-nav-btn doms-cog-next\" onclick=\"cogPlusSlides(1)\">\r\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n                <\/button>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"doms-cog-team-section\">\r\n            <div class=\"doms-cog-team-header\">\r\n                <h2 class=\"doms-cog-team-title\">Conveners<\/h2>\r\n                <div class=\"doms-cog-controls\">\r\n                    <button id=\"cog-scroll-left\" class=\"doms-cog-scroll-btn\" aria-label=\"Scroll Left\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\r\n                    <\/button>\r\n                    <button id=\"cog-scroll-right\" class=\"doms-cog-scroll-btn\" aria-label=\"Scroll Right\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"doms-cog-track\" id=\"cog-track\">\r\n                \r\n                <div class=\"doms-cog-card\">\r\n                    <div class=\"doms-cog-img-box\">\r\n                        <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/Akshay-R-Copy-scaled.jpg\"style=\"filter:none\" alt=\"Akshay R\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <\/div>\r\n                    <div class=\"doms-cog-info\">\r\n                        <h4 class=\"doms-cog-name\">Akshay R<\/h4>\r\n                        <p class=\"doms-cog-role\">Convener<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"doms-cog-card\">\r\n                    <div class=\"doms-cog-img-box\">\r\n                        <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/Haritha-s-scaled.jpg\"style=\"filter:none\" alt=\"Haritha Shambhavi\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <\/div>\r\n                    <div class=\"doms-cog-info\">\r\n                        <h4 class=\"doms-cog-name\">Haritha Shambhavi<\/h4>\r\n                        <p class=\"doms-cog-role\">Convener<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"doms-cog-card\">\r\n                    <div class=\"doms-cog-img-box\">\r\n                        <img decoding=\"async\" data-src=\"http:\/\/10.24.5.60\/wordpress\/wp-content\/uploads\/2026\/01\/Supratim-scaled.jpg\"style=\"filter:none\" alt=\"Supratim\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\r\n                    <\/div>\r\n                    <div class=\"doms-cog-info\">\r\n                        <h4 class=\"doms-cog-name\">Supratim<\/h4>\r\n                        <p class=\"doms-cog-role\">Convener<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!--<div class=\"doms-cog-card\">-->\r\n                <!--    <div class=\"doms-cog-img-box\">-->\r\n                <!--        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556761175-5973dc0f32e7?w=500&auto=format&fit=crop&q=60\" alt=\"Join Team\">-->\r\n                <!--    <\/div>-->\r\n                <!--    <div class=\"doms-cog-info\">-->\r\n                <!--        <h4 class=\"doms-cog-name\">Join Cognora<\/h4>-->\r\n                <!--        <p class=\"doms-cog-role\">Member<\/p>-->\r\n                <!--    <\/div>-->\r\n                <!--<\/div>-->\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        \/\/ --- 1. Slideshow Logic ---\r\n        let cogSlideIndex = 1;\r\n\r\n        \/\/ Global function for onclick (namespaced)\r\n        window.cogPlusSlides = function(n) {\r\n            showCogSlides(cogSlideIndex += n);\r\n        }\r\n\r\n        function showCogSlides(n) {\r\n            let i;\r\n            let slides = document.querySelectorAll(\".doms-cog-slide\");\r\n            if (!slides.length) return;\r\n\r\n            if (n > slides.length) {cogSlideIndex = 1}    \r\n            if (n < 1) {cogSlideIndex = slides.length}\r\n            \r\n            for (i = 0; i < slides.length; i++) {\r\n                slides[i].style.display = \"none\";  \r\n                slides[i].classList.remove(\"active\");\r\n            }\r\n            slides[cogSlideIndex-1].style.display = \"block\";  \r\n            slides[cogSlideIndex-1].classList.add(\"active\");\r\n        }\r\n\r\n        \/\/ --- 2. Initialization & Scroll ---\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            \r\n            \/\/ Start Slideshow\r\n            showCogSlides(cogSlideIndex);\r\n            \r\n            \/\/ Auto Play (5s)\r\n            setInterval(function() {\r\n                window.cogPlusSlides(1);\r\n            }, 5000);\r\n\r\n            \/\/ Scroll Logic\r\n            const track = document.getElementById('cog-track');\r\n            const btnLeft = document.getElementById('cog-scroll-left');\r\n            const btnRight = document.getElementById('cog-scroll-right');\r\n\r\n            if (track && btnLeft && btnRight) {\r\n                btnRight.addEventListener('click', () => {\r\n                    const card = track.querySelector('.doms-cog-card');\r\n                    const gap = 25; \r\n                    const scrollAmount = card ? (card.offsetWidth + gap) : 275;\r\n                    track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\r\n                });\r\n\r\n                btnLeft.addEventListener('click', () => {\r\n                    const card = track.querySelector('.doms-cog-card');\r\n                    const gap = 25; \r\n                    const scrollAmount = card ? (card.offsetWidth + gap) : 275;\r\n                    track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\r\n                });\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-add849d e-flex e-con-boxed e-con e-parent\" data-id=\"add849d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0dc1c4 elementor-widget elementor-widget-html\" data-id=\"e0dc1c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* =========================================\n       CSS ISOLATION: DoMS Vanguard (ThinkStreet)\n       ========================================= *\/\n\n    #doms-vanguard-root {\n        \/* --- Theme Variables --- *\/\n        --van-font-head: 'Playfair Display', serif;\n        --van-font-body: 'Lato', sans-serif;\n        \n        \/* Palette: Stylish Light *\/\n        --van-bg-light: #fcfcfc;  \/* Ultra-clean white *\/\n        --van-bg-card: #ffffff;   \/* Pure White *\/\n        \n        \/* Text *\/\n        --van-text-main: #111111; \/* Jet Black *\/\n        --van-text-sub: #555555;  \/* Medium Grey *\/\n        \n        \/* Accents *\/\n        --van-maroon: #800000;    \/* IITM Maroon *\/\n        --van-gold: #c5a059;      \/* Muted Gold *\/\n        --van-border: #eaeaea;    \/* Soft border *\/\n        --van-graphic: rgba(0, 0, 0, 0.04); \/* Pattern color *\/\n\n        \/* Layout Reset *\/\n        background-color: var(--van-bg-light);\n        width: 100%;\n        padding: 100px 0;\n        font-family: var(--van-font-body);\n        color: var(--van-text-main);\n        box-sizing: border-box;\n        line-height: 1.6;\n        overflow-x: hidden;\n        position: relative;\n    }\n\n    #doms-vanguard-root * { box-sizing: border-box; }\n    #doms-vanguard-root img { max-width: 100%; display: block; }\n\n    \/* --- BACKGROUND GRAPHICS (Subtle Structure) --- *\/\n    #doms-vanguard-root::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        \/* Architectural Grid Pattern *\/\n        background-image: \n            linear-gradient(var(--van-graphic) 1px, transparent 1px),\n            linear-gradient(90deg, var(--van-graphic) 1px, transparent 1px);\n        background-size: 50px 50px;\n        opacity: 0.6;\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    \/* Container *\/\n    .doms-van-container {\n        max-width: 1400px; \/* Extra wide for big layout *\/\n        margin: 0 auto;\n        padding: 0 40px;\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* --- HERO GRID --- *\/\n    .doms-van-hero-grid {\n        display: grid;\n        \/* 65% Slideshow (Left) | 35% Text (Right) *\/\n        grid-template-columns: 1.6fr 1fr; \n        gap: 80px;\n        align-items: center; \/* Vertical Center *\/\n        margin-bottom: 100px;\n    }\n\n    \/* 1. Left: BIG Slideshow *\/\n    .doms-van-slider-wrapper {\n        position: relative;\n        width: 100%;\n        height: 650px; \/* Tall, Cinematic Height *\/\n        border-radius: 100px;\n        overflow: hidden;\n        \/* Elegant Shadow *\/\n        box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.12);\n        background: #f0f0f0;\n    }\n\n    .doms-van-slide {\n        display: none;\n        width: 100%;\n        height: 100%;\n        position: relative;\n    }\n\n    .doms-van-slide.active {\n        display: block;\n        animation: vanZoom 8s infinite alternate; \/* Subtle zoom effect *\/\n    }\n    @keyframes vanZoom { from { transform: scale(1); } to { transform: scale(1.03); } }\n\n    .doms-van-slide img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    \/* Caption Card *\/\n    .doms-van-caption {\n        position: absolute;\n        bottom: 40px;\n        left: 0;\n        background: rgba(255, 255, 255, 0.95);\n        padding: 20px 40px;\n        border-left: 6px solid var(--van-maroon);\n        font-family: var(--van-font-head);\n        font-size: 1.25rem;\n        color: var(--van-text-main);\n        font-weight: 700;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        backdrop-filter: blur(5px);\n        max-width: 80%;\n    }\n\n    \/* Navigation Controls *\/\n    .doms-van-nav-btn {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 60px; height: 60px;\n        background: #fff;\n        border: 1px solid var(--van-border);\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: 0.3s ease;\n        z-index: 10;\n        color: var(--van-text-main);\n        box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n    }\n    .doms-van-nav-btn:hover { background: var(--van-maroon); color: #fff; border-color: var(--van-maroon); transform: translateY(-50%) scale(1.1); }\n    .doms-van-prev { left: 30px; }\n    .doms-van-next { right: 30px; }\n\n\n    \/* 2. Right: Text Content *\/\n    .doms-van-content {\n        padding-left: 10px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    .doms-van-eyebrow {\n        display: inline-block;\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 3px;\n        color: var(--van-gold);\n        font-weight: 800;\n        margin-bottom: 25px;\n        position: relative;\n        padding-left: 60px;\n    }\n    \n    .doms-van-eyebrow::before {\n        content: ''; position: absolute; left: 0; top: 50%; \n        width: 50px; height: 2px; background: var(--van-maroon);\n    }\n\n    .doms-van-heading {\n        font-family: var(--van-font-head);\n        font-size: 3.8rem;\n        line-height: 1.1;\n        color: var(--van-text-main);\n        margin: 0 0 30px 0;\n        font-weight: 700;\n        letter-spacing: -1px;\n    }\n\n    .doms-van-body {\n        font-size: 1.15rem;\n        color: var(--van-text-sub);\n        margin-bottom: 35px;\n        text-align: justify;\n        font-weight: 300;\n    }\n\n    \/* Info Box *\/\n    .doms-van-info-box {\n        background: #fff;\n        border: 1px solid var(--van-border);\n        border-left: 4px solid var(--van-gold);\n        padding: 30px;\n        box-shadow: 0 15px 40px rgba(0,0,0,0.03);\n    }\n\n    .doms-van-point {\n        margin-bottom: 15px;\n        font-size: 1rem;\n        color: var(--van-text-sub);\n        line-height: 1.6;\n    }\n    \n    .doms-van-label {\n        color: var(--van-maroon);\n        font-weight: 700;\n        font-family: var(--van-font-head);\n        margin-right: 6px;\n        font-size: 1.1rem;\n    }\n\n    .doms-van-quote {\n        font-family: var(--van-font-head);\n        font-style: italic;\n        font-size: 1.4rem;\n        color: var(--van-text-main);\n        margin-top: 30px;\n        line-height: 1.4;\n        opacity: 0.9;\n    }\n\n    \/* --- TEAM SECTION --- *\/\n    .doms-van-team-section {\n        border-top: 1px solid var(--van-border);\n        padding-top: 80px;\n    }\n\n    .doms-van-team-header {\n        display: flex; justify-content: space-between; align-items: flex-end;\n        margin-bottom: 50px;\n    }\n\n    .doms-van-team-title {\n        font-family: var(--van-font-head);\n        font-size: 2.8rem;\n        color: var(--van-text-main);\n        margin: 0;\n        font-weight: 700;\n    }\n\n    \/* Scroll Controls *\/\n    .doms-van-controls { display: flex; gap: 12px; }\n\n    .doms-van-scroll-btn {\n        width: 52px; height: 52px;\n        background: #fff;\n        border: 1px solid var(--van-border);\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex; align-items: center; justify-content: center;\n        transition: all 0.2s;\n        color: var(--van-text-main);\n        font-size: 1.2rem;\n    }\n\n    .doms-van-scroll-btn:hover {\n        border-color: var(--van-gold);\n        background: var(--van-gold);\n        color: #fff;\n    }\n\n    \/* Track *\/\n    .doms-van-track {\n        display: flex;\n        gap: 30px;\n        overflow-x: auto;\n        padding: 10px 0 40px 0;\n        scroll-behavior: smooth;\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n        scroll-snap-type: x mandatory;\n        padding-left: 2px;\n    }\n    .doms-van-track::-webkit-scrollbar { display: none; }\n\n    \/* Card Styling *\/\n    .doms-van-card {\n        flex: 0 0 260px; \/* Fixed Width *\/\n        scroll-snap-align: start;\n        background: var(--van-bg-card);\n        border: 1px solid var(--van-border);\n        border-radius: 2px;\n        overflow: hidden;\n        cursor: pointer;\n        transition: transform 0.4s ease, box-shadow 0.4s ease;\n    }\n\n    .doms-van-card:hover {\n        transform: translateY(-10px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n        border-color: var(--van-gold);\n    }\n\n    .doms-van-img-box {\n        width: 100%;\n        aspect-ratio: 3 \/ 4;\n        overflow: hidden;\n        background: #f4f4f4;\n        position: relative;\n    }\n\n    .doms-van-img-box img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.6s ease;\n        filter: grayscale(100%);\n    }\n\n    .doms-van-card:hover .doms-van-img-box img {\n        transform: scale(1.08);\n        filter: grayscale(0%);\n    }\n\n    .doms-van-info {\n        padding: 20px;\n        text-align: center;\n        border-top: 1px solid var(--van-border);\n        background: var(--van-bg-card);\n        position: relative;\n        z-index: 2;\n    }\n\n    .doms-van-name {\n        font-family: var(--van-font-head);\n        font-size: 1.2rem;\n        margin: 0 0 5px 0;\n        color: var(--van-maroon);\n        font-weight: 700;\n    }\n\n    .doms-van-role {\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        color: var(--van-text-sub);\n        margin: 0;\n        font-weight: 600;\n    }\n\n    \/* =========================================\n       RESPONSIVE DESIGN\n       ========================================= *\/\n    \n    @media (max-width: 1024px) {\n        .doms-van-hero-grid {\n            grid-template-columns: 1fr; \/* Stack vertically *\/\n            gap: 60px;\n        }\n        .doms-van-slider-wrapper { height: 500px; }\n        .doms-van-content { padding-left: 0; }\n    }\n\n    @media (max-width: 600px) {\n        #doms-vanguard-root { padding: 60px 0; }\n        \n        .doms-van-heading { font-size: 3rem; }\n        \n        \/* Mobile Slideshow *\/\n        .doms-van-slider-wrapper {\n            height: 350px; \n            margin-bottom: 30px;\n        }\n\n        .doms-van-nav-btn { width: 45px; height: 45px; }\n        .doms-van-prev { left: 15px; } .doms-van-next { right: 15px; }\n        \n        .doms-van-caption { \n            width: 90%; \n            font-size: 1rem; \n            padding: 15px 20px; \n            bottom: 20px; \n        }\n\n        .doms-van-team-header {\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 15px;\n        }\n        .doms-van-team-title { font-size: 2.2rem; }\n\n        \/* Mobile Card Sizing *\/\n        .doms-van-track { gap: 15px; padding-right: 20px; }\n        .doms-van-card { \n            flex: 0 0 80vw;\n            scroll-snap-align: center; \n        }\n    }\n\n<\/style>\n<\/head>\n<body>\n\n<div id=\"doms-vanguard-root\">\n    <div class=\"doms-van-container\">\n\n        <div class=\"doms-van-hero-grid\">\n            \n            <div class=\"doms-van-slider-wrapper\">\n                \n                <div class=\"doms-van-slide active\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-122509.png\"style=\"--smush-placeholder-width: 1083px; --smush-placeholder-aspect-ratio: 1083\/763;filter:none\" alt=\"Consulting Strategy Meeting\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                    <div class=\"doms-van-caption\">Real-World Industry Projects<\/div>\n                <\/div>\n\n                <!--<div class=\"doms-van-slide\">-->\n                <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop\" alt=\"Technological Trends\">-->\n                <!--    <div class=\"doms-van-caption\">Hands-On Industry Exposure<\/div>-->\n                <!--<\/div>-->\n\n                <!--<div class=\"doms-van-slide\">-->\n                <!--    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507679799987-c73779587ccf?q=80&w=1200&auto=format&fit=crop\" alt=\"Strategic Leadership\">-->\n                <!--    <div class=\"doms-van-caption\">Future Managers in Action<\/div>-->\n                <!--<\/div>-->\n\n                <button class=\"doms-van-nav-btn doms-van-prev\" onclick=\"vanPlusSlides(-1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n                <\/button>\n                <button class=\"doms-van-nav-btn doms-van-next\" onclick=\"vanPlusSlides(1)\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n                <\/button>\n            <\/div>\n\n            <div class=\"doms-van-content\">\n                <span class=\"doms-van-eyebrow\">Bridging Industry & Academia<\/span>\n                <h1 class=\"doms-van-heading\">Vanguard - ThinkStreet<\/h1>\n                \n                <p class=\"doms-van-body\">\n                    Vanguard bridges the gap between academia and industry by actively sourcing real-world projects through our alumni network and partner companies across diverse domains such as business consulting, marketing, finance, operations, and analytics.\n                <\/p>\n\n                <div class=\"doms-van-info-box\">\n                    <div class=\"doms-van-point\">\n                        <span class=\"doms-van-label\">Students:<\/span>\n                        Explore interests and gain hands-on industry exposure.\n                    <\/div>\n                    <div class=\"doms-van-point\">\n                        <span class=\"doms-van-label\">Companies:<\/span>\n                        Gain fresh perspectives on existing challenges.\n                    <\/div>\n                    <div class=\"doms-van-point\">\n                        <span class=\"doms-van-label\">Institute:<\/span>\n                        Deepen understanding of evolving industry expectations.\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-van-quote\">\n                    \"An opportunity to become a better manager, one project at a time.\"\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"doms-van-team-section\">\n            <div class=\"doms-van-team-header\">\n                <h2 class=\"doms-van-team-title\">Conveners<\/h2>\n                <div class=\"doms-van-controls\">\n                    <button id=\"van-scroll-left\" class=\"doms-van-scroll-btn\" aria-label=\"Scroll Left\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n                    <\/button>\n                    <button id=\"van-scroll-right\" class=\"doms-van-scroll-btn\" aria-label=\"Scroll Right\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-van-track\" id=\"van-track\">\n                \n                <div class=\"doms-van-card\">\n                    <div class=\"doms-van-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Aryan-scaled.jpg\"style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;filter:none\" alt=\"Aryan Rajaram Gaikwad\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                    <\/div>\n                    <div class=\"doms-van-info\">\n                        <h4 class=\"doms-van-name\">Aryan Rajaram Gaikwad<\/h4>\n                        <p class=\"doms-van-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-van-card\">\n                    <div class=\"doms-van-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Amalwin-Copy-scaled.jpg\"style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;filter:none\" alt=\"Amalwin Joe J\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                    <\/div>\n                    <div class=\"doms-van-info\">\n                        <h4 class=\"doms-van-name\">Amalwin Joe J<\/h4>\n                        <p class=\"doms-van-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-van-card\">\n                    <div class=\"doms-van-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/karan-1-scaled.jpg\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;filter:none\"alt=\"Karan Gohil\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                    <\/div>\n                    <div class=\"doms-van-info\">\n                        <h4 class=\"doms-van-name\">Karan Gohil<\/h4>\n                        <p class=\"doms-van-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-van-card\">\n                    <div class=\"doms-van-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Nirmal-Joseph-scaled.jpg\"style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;filter:none\" alt=\"Nirmal Joseph V Ukken\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                    <\/div>\n                    <div class=\"doms-van-info\">\n                        <h4 class=\"doms-van-name\">Nirmal Joseph V Ukken<\/h4>\n                        <p class=\"doms-van-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-van-card\">\n                    <div class=\"doms-van-img-box\">\n                        <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Rama-scaled.jpg\"style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/1600;filter:none\" alt=\"Rama Anirudh\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                    <\/div>\n                    <div class=\"doms-van-info\">\n                        <h4 class=\"doms-van-name\">Rama Anirudh<\/h4>\n                        <p class=\"doms-van-role\">Convener<\/p>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        \/\/ --- 1. Slideshow Logic ---\n        let vanSlideIndex = 1;\n\n        window.vanPlusSlides = function(n) {\n            showVanSlides(vanSlideIndex += n);\n        }\n\n        function showVanSlides(n) {\n            let i;\n            let slides = document.querySelectorAll(\".doms-van-slide\");\n            if (!slides.length) return;\n\n            if (n > slides.length) {vanSlideIndex = 1}    \n            if (n < 1) {vanSlideIndex = slides.length}\n            \n            for (i = 0; i < slides.length; i++) {\n                slides[i].style.display = \"none\";  \n                slides[i].classList.remove(\"active\");\n            }\n            slides[vanSlideIndex-1].style.display = \"block\";  \n            slides[vanSlideIndex-1].classList.add(\"active\");\n        }\n\n        \/\/ --- 2. Initialization & Scroll ---\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \n            \/\/ Start Slideshow\n            showVanSlides(vanSlideIndex);\n            \n            \/\/ Auto Play (5s)\n            setInterval(function() {\n                window.vanPlusSlides(1);\n            }, 5000);\n\n            \/\/ Scroll Logic\n            const track = document.getElementById('van-track');\n            const btnLeft = document.getElementById('van-scroll-left');\n            const btnRight = document.getElementById('van-scroll-right');\n\n            if (track && btnLeft && btnRight) {\n                btnRight.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-van-card');\n                    const gap = 30; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 290;\n                    track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n                });\n\n                btnLeft.addEventListener('click', () => {\n                    const card = track.querySelector('.doms-van-card');\n                    const gap = 30; \n                    const scrollAmount = card ? (card.offsetWidth + gap) : 290;\n                    track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n                });\n            }\n        });\n    })();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eeba10d e-flex e-con-boxed e-con e-parent\" data-id=\"eeba10d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c18d60e elementor-widget elementor-widget-html\" data-id=\"c18d60e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* =========================================\n       CSS ISOLATION: DoMS Research Forum\n       ========================================= *\/\n\n    #doms-research-root {\n        \/* --- Theme Variables --- *\/\n        --res-font-head: 'Playfair Display', serif;\n        --res-font-body: 'Lato', sans-serif;\n        \n        \/* Palette *\/\n        --res-bg-light: #f9f9f6;  \/* Soft \"Vellum\" White *\/\n        --res-bg-card: #ffffff;   \/* Pure White *\/\n        \n        \/* Text *\/\n        --res-text-main: #111111; \/* Jet Black *\/\n        --res-text-sub: #555555;  \/* Editorial Grey *\/\n        \n        \/* Accents *\/\n        --res-maroon: #800000;    \/* IITM Maroon *\/\n        --res-gold: #c5a059;      \/* Muted Gold *\/\n        --res-pattern: #222222;   \/* Pattern Color *\/\n        \n        \/* Layout Reset *\/\n        background-color: var(--res-bg-light);\n        width: 100%;\n        padding: 100px 0;\n        font-family: var(--res-font-body);\n        color: var(--res-text-main);\n        box-sizing: border-box;\n        line-height: 1.8;\n        overflow-x: hidden;\n        position: relative;\n    }\n\n    #doms-research-root * { box-sizing: border-box; }\n    #doms-research-root img { max-width: 100%; display: block; }\n\n    \/* --- BACKGROUND PATTERN (Dark Micro-Dots) --- *\/\n    #doms-research-root::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        \/* Technical Dot Matrix Pattern *\/\n        background-image: radial-gradient(var(--res-pattern) 1.5px, transparent 1.5px);\n        background-size: 24px 24px;\n        opacity: 0.08; \/* Subtle texture *\/\n        z-index: 0;\n        pointer-events: none;\n    }\n\n    \/* Container *\/\n    .doms-res-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 30px;\n        position: relative;\n        z-index: 1;\n    }\n\n    \/* --- STYLISH DECORATIVE HEADER --- *\/\n    .doms-res-header-wrapper {\n        display: flex;\n        justify-content: center;\n        margin-bottom: 100px;\n    }\n\n    .doms-res-header {\n        position: relative;\n        text-align: center;\n        max-width: 900px;\n        width: 100%;\n        padding: 50px 40px;\n        background: #ffffff;\n        \n        \/* The Triple Border Effect *\/\n        border: 1px solid var(--res-gold); \/* Inner Gold Line *\/\n        outline: 6px solid #ffffff; \/* White Gap *\/\n        box-shadow: \n            0 0 0 8px var(--res-maroon), \/* Outer Maroon Border *\/\n            0 30px 60px rgba(0,0,0,0.08); \/* Lifted Shadow *\/\n    }\n\n    \/* Top & Bottom Ornamental Icons *\/\n    .doms-res-header::before, \n    .doms-res-header::after {\n        content: \"\u2756\"; \/* Diamond Ornament *\/\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        background: #ffffff;\n        padding: 0 15px;\n        color: var(--res-gold);\n        font-size: 1.5rem;\n        line-height: 1;\n        z-index: 2;\n    }\n\n    .doms-res-header::before { top: -14px; }\n    .doms-res-header::after { bottom: -14px; }\n\n    \/* Typography inside Header *\/\n    .doms-res-eyebrow {\n        display: block;\n        font-family: var(--res-font-body);\n        font-size: 0.9rem;\n        text-transform: uppercase;\n        letter-spacing: 4px;\n        color: var(--res-text-sub);\n        margin-bottom: 15px;\n        font-weight: 700;\n    }\n\n    .doms-res-main-title {\n        font-family: var(--res-font-head);\n        font-size: 5.8rem;\n        color: var(--res-maroon);\n        margin: 0;\n        font-weight: 700;\n        line-height: 1.1;\n        letter-spacing: -1px;\n    }\n\n    \/* --- CLUB ROW LAYOUT (Zig-Zag) --- *\/\n    .doms-res-club-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 80px;\n        align-items: center;\n        margin-bottom: 120px;\n    }\n\n    \/* Alternating Order *\/\n    .doms-res-club-row.alt .doms-res-visual { order: 2; }\n    .doms-res-club-row.alt .doms-res-content { order: 1; }\n\n    \/* 1. Visual Side *\/\n    .doms-res-visual {\n        position: relative;\n        height: 420px;\n    }\n\n    .doms-res-visual-inner {\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        \/* Frame Effect *\/\n        border: 1px solid rgba(0,0,0,0.1);\n        box-shadow: 20px 20px 0px var(--res-maroon); \/* Block Shadow *\/\n        position: relative;\n        z-index: 2;\n        background: #fff;\n    }\n\n    .doms-res-visual img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        filter: grayscale(20%) sepia(10%); \/* Vintage Academic feel *\/\n    }\n\n    .doms-res-club-row:hover .doms-res-visual img {\n        transform: scale(1.08);\n        filter: grayscale(0%);\n    }\n\n    \/* 2. Content Side *\/\n    .doms-res-content {\n        padding: 10px;\n    }\n\n    .doms-res-club-name {\n        font-family: var(--res-font-head);\n        font-size: 2.4rem;\n        color: var(--res-text-main);\n        margin: 0 0 25px 0;\n        line-height: 1.2;\n        font-weight: 700;\n        position: relative;\n        display: inline-block;\n    }\n\n    \/* Elegant Underline *\/\n    .doms-res-club-name::after {\n        content: '';\n        display: block;\n        width: 100%;\n        height: 1px;\n        background: var(--res-gold);\n        margin-top: 5px;\n        transform: scaleX(0.3);\n        transform-origin: left;\n        transition: transform 0.4s ease;\n    }\n\n    .doms-res-club-row:hover .doms-res-club-name::after {\n        transform: scaleX(1);\n    }\n\n    .doms-res-club-desc {\n        font-size: 1.1rem;\n        color: var(--res-text-sub);\n        text-align: justify;\n        margin-bottom: 0;\n        font-weight: 400;\n        font-family: var(--res-font-body);\n    }\n\n    \/* --- RESPONSIVE DESIGN --- *\/\n    @media (max-width: 1024px) {\n        .doms-res-club-row { gap: 50px; }\n        .doms-res-visual { height: 350px; }\n        .doms-res-main-title { font-size: 3rem; }\n    }\n\n    @media (max-width: 900px) {\n        #doms-research-root { padding: 60px 0; }\n\n        .doms-res-club-row {\n            grid-template-columns: 1fr; \/* Stack *\/\n            gap: 40px;\n            margin-bottom: 80px;\n        }\n\n        \/* Mobile Order Reset: Visual First, Text Second *\/\n        .doms-res-club-row.alt .doms-res-visual { order: 1; }\n        .doms-res-club-row.alt .doms-res-content { order: 2; }\n        \n        .doms-res-visual { order: 1; height: 280px; width: 100%; }\n        .doms-res-content { order: 2; padding: 0; }\n\n        \/* Adjust Header for Mobile *\/\n        .doms-res-header { padding: 30px 20px; outline: 4px solid #ffffff; }\n        .doms-res-main-title { font-size: 2.2rem; }\n        .doms-res-header::before, .doms-res-header::after { font-size: 1.2rem; }\n        \n        .doms-res-club-name { font-size: 1.8rem; }\n    }\n\n<\/style>\n<\/head>\n<body>\n\n<div id=\"doms-research-root\">\n    <div class=\"doms-res-container\">\n\n        <div class=\"doms-res-header-wrapper\">\n            <div class=\"doms-res-header\">\n                <span class=\"doms-res-eyebrow\">Centres of Excellence<\/span>\n                <h1 class=\"doms-res-main-title\">Research Forum<\/h1>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-res-club-row\">\n            <div class=\"doms-res-visual\">\n                <div class=\"doms-res-visual-inner\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/hr.jpg\"style=\"--smush-placeholder-width: 849px; --smush-placeholder-aspect-ratio: 849\/732;filter:none\" alt=\"HR Club Prabodhan\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                <\/div>\n            <\/div>\n            <div class=\"doms-res-content\">\n                <h2 class=\"doms-res-club-name\">HR Club (Prabodhan)<\/h2>\n                <p class=\"doms-res-club-desc\">\n                    Prabodhan provides a platform to bring together students interested in the field of Human Resources Management. It helps them develop the interpersonal skills needed in the corporate world and encourages them to meet professionals who work in the field of Human Resources Management.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-res-club-row alt\">\n            <div class=\"doms-res-visual\">\n                <div class=\"doms-res-visual-inner\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/financeeee.jpg\"style=\"--smush-placeholder-width: 798px; --smush-placeholder-aspect-ratio: 798\/687;filter:none\" alt=\"Finance Research Club\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                <\/div>\n            <\/div>\n            <div class=\"doms-res-content\">\n                <h2 class=\"doms-res-club-name\">DoMS Finance Research Club<\/h2>\n                <p class=\"doms-res-club-desc\">\n                    The Finance Research Club is a student-run club that seeks to help in the professional development of those researchers interested in finance careers, to foster the information sharing on finance topics to the entire DoMS community and to build the relationship between DoMS research community and Finance practitioners.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-res-club-row\">\n            <div class=\"doms-res-visual\">\n                <div class=\"doms-res-visual-inner\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-125206.png\"style=\"--smush-placeholder-width: 1262px; --smush-placeholder-aspect-ratio: 1262\/544;filter:none\" alt=\"Operations Research Forum\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                <\/div>\n            <\/div>\n            <div class=\"doms-res-content\">\n                <h2 class=\"doms-res-club-name\">DoMS Operations Research Forum (DORF)<\/h2>\n                <p class=\"doms-res-club-desc\">\n                    The DoMS Operations Research Forum (DORF) is an initiative by the research scholars of DoMS for the areas of Supply Chain, Operations Research, and Manufacturing Studies. This club provides a platform for scholars to review their research problems and contemporary issues in operations management.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"doms-res-club-row alt\">\n            <div class=\"doms-res-visual\">\n                <div class=\"doms-res-visual-inner\">\n                    <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wp-content\/uploads\/2026\/01\/marketing.jpg\"style=\"--smush-placeholder-width: 1280px; --smush-placeholder-aspect-ratio: 1280\/853;filter:none\" alt=\"Marketing Club MarkIIT\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n                <\/div>\n            <\/div>\n            <div class=\"doms-res-content\">\n                <h2 class=\"doms-res-club-name\">Marketing Club (MarkIIT)<\/h2>\n                <p class=\"doms-res-club-desc\">\n                    MarkIIT, the marketing club of DoMS IIT Madras, provides a platform to strengthen the marketing concept as well as promote innovative marketing thoughts and ideas through discussions of concepts, cases and quizzes.\n                <\/p>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<\/body>\n<\/html>\n\n\t\t\t\t<\/div>\n\t\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>Beyond Academics DoMS IIT Madras Kalakriti. Celebrating creativity beyond the classroom. What do we do? We provide a platform which goes beyond academics and keeps the students engaged in creative activities amidst rigorous schedules. What do we aim for? Make recreational activities a part of life at DoMS. Support and promote art enthusiasts to grow&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":59230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-58904","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58904","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=58904"}],"version-history":[{"count":625,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58904\/revisions"}],"predecessor-version":[{"id":75453,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58904\/revisions\/75453"}],"up":[{"embeddable":true,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/59230"}],"wp:attachment":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/media?parent=58904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}