{"id":58398,"date":"2025-12-13T18:25:29","date_gmt":"2025-12-13T12:55:29","guid":{"rendered":"https:\/\/doms.iitm.ac.in\/wordpress\/?page_id=58398"},"modified":"2026-03-03T11:43:04","modified_gmt":"2026-03-03T06:13:04","slug":"doms-galley","status":"publish","type":"page","link":"https:\/\/doms.iitm.ac.in\/index.php\/about-us\/doms-galley\/","title":{"rendered":"DoMS Galley"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"58398\" class=\"elementor elementor-58398\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8b5617 e-flex e-con-boxed e-con e-parent\" data-id=\"d8b5617\" 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-09b60e1 elementor-widget elementor-widget-html\" data-id=\"09b60e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,500&family=Cinzel:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\n<div id=\"doms-gallery-hero-v7\" class=\"dgh7-root-container\">\n  \n  <div class=\"dgh7-inner-grid\">\n    \n    <div class=\"dgh7-text-panel\">\n      <div class=\"dgh7-content-box\">\n        \n        <span class=\"dgh7-eyebrow\">The Visual Archives<\/span>\n        \n        <h1 class=\"dgh7-hero-title\">\n          <span class=\"dgh7-line-primary\">Life in<\/span>\n          <span class=\"dgh7-line-secondary\" style=\"color:#C5A059\">Motion<\/span>\n        <\/h1>\n        \n        <div class=\"dgh7-gold-divider\"><\/div>\n        \n        <p class=\"dgh7-description\">\n          A curated collection of our heritage, academic excellence, and the vibrant culture that defines DoMS.\n        <\/p>\n\n        <a href=\"#gallery-start\" class=\"dgh7-cta-btn\">\n          <span class=\"dgh7-btn-text\">Explore Collection<\/span>\n          <span class=\"dgh7-btn-icon\">\u2193<\/span>\n        <\/a>\n\n      <\/div>\n    <\/div>\n\n    <div class=\"dgh7-visual-panel\">\n      <div class=\"dgh7-image-frame\">\n        <div class=\"dgh7-image-bg lazyload\" style=\"background-image:inherit;\" data-bg-image=\"url(&#039;https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/02\/IMG_1508-scaled-e1771332555464.jpg&#039;)\"><\/div>\n        <div class=\"dgh7-image-overlay\"><\/div>\n      <\/div>\n\n      \n    <\/div>\n\n  <\/div>\n<\/div>\n\n<style>\n\/* ==========================================================================\n   ISOLATION SCOPE: #doms-gallery-hero-v7\n   ========================================================================== \n*\/\n\n\/* 1. SAFER FULL-WIDTH BREAKOUT *\/\n#doms-gallery-hero-v7.dgh7-root-container {\n  width: 100vw !important;\n  position: relative !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  \n  \/* Dimensions *\/\n  min-height: 85vh !important;\n  background-color: #fdfbf7 !important; \/* Cream Background *\/\n  overflow: hidden !important;\n  display: flex !important;\n  align-items: center !important;\n  box-sizing: border-box !important;\n  z-index: 1 !important;\n}\n\n\/* 2. LAYOUT GRID *\/\n#doms-gallery-hero-v7 .dgh7-inner-grid {\n  display: flex !important;\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 85vh !important;\n  max-width: 1600px !important; \/* Cap width on ultra-wide screens *\/\n  margin: 0 auto !important;\n}\n\n\/* 3. LEFT PANEL (Text) *\/\n#doms-gallery-hero-v7 .dgh7-text-panel {\n  width: 45% !important;\n  padding: 80px 60px !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  background: #fdfbf7 !important;\n  position: relative !important;\n  z-index: 2 !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-content-box {\n  width: 100% !important;\n  max-width: 500px !important;\n  \/* Visibility Safety: No opacity:0 here *\/\n  position: relative !important;\n}\n\n\/* Typography *\/\n#doms-gallery-hero-v7 .dgh7-eyebrow {\n  display: block !important;\n  font-family: \"Manrope\", sans-serif !important;\n  font-size: 0.85rem !important;\n  letter-spacing: 3px !important;\n  color: #cfaa56 !important; \/* Gold *\/\n  font-weight: 700 !important;\n  text-transform: uppercase !important;\n  margin-bottom: 25px !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-hero-title {\n  margin: 0 0 30px 0 !important;\n  line-height: 1 !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-line-primary {\n  display: block !important;\n  font-family: \"Cinzel\", serif !important;\n  font-size: clamp(3rem, 5vw, 4.5rem) !important;\n  color: #4a0e12 !important; \/* Maroon *\/\n  font-weight: 400 !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-line-secondary {\n  display: block !important;\n  font-family: \"Playfair Display\", serif !important;\n  font-style: italic !important;\n  font-size: clamp(4rem, 6vw, 6rem) !important;\n  color: #C5A059 !important; \/* Maroon *\/\n  font-weight: 500 !important;\n  margin-left: 20px !important;\n  margin-top: 5px !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-gold-divider {\n  width: 80px !important;\n  height: 3px !important;\n  background: #cfaa56 !important;\n  margin-bottom: 35px !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-description {\n  font-family: \"Manrope\", sans-serif !important;\n  font-size: 1.15rem !important;\n  color: #555555 !important; \/* Dark Grey *\/\n  line-height: 1.6 !important;\n  margin-bottom: 50px !important;\n}\n\n\/* CTA Button *\/\n#doms-gallery-hero-v7 .dgh7-cta-btn {\n  display: inline-flex !important;\n  align-items: center !important;\n  gap: 15px !important;\n  text-decoration: none !important;\n  padding: 15px 30px !important;\n  border: 1px solid #cfaa56 !important;\n  border-radius: 2px !important;\n  transition: all 0.3s ease !important;\n}\n#doms-gallery-hero-v7 .dgh7-cta-btn:hover {\n  background: #cfaa56 !important;\n  transform: translateY(-3px) !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-btn-text {\n  font-family: \"Manrope\", sans-serif !important;\n  font-size: 0.85rem !important;\n  text-transform: uppercase !important;\n  letter-spacing: 1px !important;\n  font-weight: 700 !important;\n  color: #4a0e12 !important;\n}\n#doms-gallery-hero-v7 .dgh7-btn-icon {\n  font-size: 1.2rem !important;\n  color: #4a0e12 !important;\n}\n\n\/* 4. RIGHT PANEL (Visual) *\/\n#doms-gallery-hero-v7 .dgh7-visual-panel {\n  width: 55% !important;\n  position: relative !important;\n  height: auto !important;\n  min-height: 600px !important; \/* Ensure height *\/\n  overflow: hidden !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-image-frame {\n  width: 100% !important;\n  height: 100% !important;\n  position: absolute !important;\n  top: 0 !important; left: 0 !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-image-bg {\n  width: 100% !important;\n  height: 100% !important;\n  background-size: cover !important;\n  background-position: center !important;\n  transform: scale(1.05) !important;\n  \/* Cinematic Zoom - Safe Animation *\/\n  animation: dgh7-zoom 20s ease-in-out infinite alternate !important;\n}\n@keyframes dgh7-zoom {\n  0% { transform: scale(1); }\n  100% { transform: scale(1.1); }\n}\n\n#doms-gallery-hero-v7 .dgh7-image-overlay {\n  position: absolute !important;\n  top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;\n  \/* Subtle gradient to blend left edge *\/\n  background: linear-gradient(90deg, #fdfbf7 0%, transparent 10%) !important;\n}\n\n\/* Badge *\/\n#doms-gallery-hero-v7 .dgh7-float-badge {\n  position: absolute !important;\n  bottom: 60px !important;\n  left: -50px !important; \/* Overlap the seam *\/\n  width: 100px !important;\n  height: 100px !important;\n  border-radius: 50% !important;\n  background: #4a0e12 !important; \/* Solid Maroon fallback *\/\n  background: rgba(74, 14, 18, 0.95) !important;\n  border: 1px solid rgba(255,255,255,0.2) !important;\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: center !important;\n  justify-content: center !important;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;\n  z-index: 10 !important;\n}\n\n#doms-gallery-hero-v7 .dgh7-badge-top {\n  font-family: \"Playfair Display\", serif !important;\n  font-style: italic !important;\n  color: #cfaa56 !important;\n  font-size: 0.9rem !important;\n}\n#doms-gallery-hero-v7 .dgh7-badge-bot {\n  font-family: \"Manrope\", sans-serif !important;\n  font-weight: 700 !important;\n  color: #ffffff !important;\n  font-size: 1.2rem !important;\n}\n\n\/* ==========================================================================\n   RESPONSIVE LOGIC\n   ========================================================================== \n*\/\n@media screen and (max-width: 900px) {\n  #doms-gallery-hero-v7.dgh7-root-container {\n    height: auto !important;\n    min-height: auto !important;\n  }\n\n  #doms-gallery-hero-v7 .dgh7-inner-grid {\n    flex-direction: column-reverse !important;\n  }\n\n  \/* Text Section Mobile *\/\n  #doms-gallery-hero-v7 .dgh7-text-panel {\n    width: 100% !important;\n    padding: 60px 25px !important;\n    text-align: center !important;\n  }\n  \n  #doms-gallery-hero-v7 .dgh7-content-box {\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n  }\n\n  #doms-gallery-hero-v7 .dgh7-gold-divider {\n    margin: 0 auto 30px auto !important;\n  }\n  \n  #doms-gallery-hero-v7 .dgh7-line-secondary {\n    margin-left: 0 !important;\n  }\n\n  \/* Visual Section Mobile *\/\n  #doms-gallery-hero-v7 .dgh7-visual-panel {\n    width: 100% !important;\n    height: 400px !important;\n    min-height: 400px !important;\n  }\n\n  #doms-gallery-hero-v7 .dgh7-image-overlay {\n    background: linear-gradient(0deg, #fdfbf7 0%, transparent 15%) !important;\n  }\n  \n  \/* Hide badge on mobile to prevent layout breakage *\/\n  #doms-gallery-hero-v7 .dgh7-float-badge {\n    display: none !important;\n  }\n}\n<\/style>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    <style>\/* =========================================\n   1. VARIABLES & RESET\n   ========================================= *\/\n:root {\n    --maroon: #560000;\n    --maroon-dark: #2a0000;\n    --maroon-gradient: linear-gradient(135deg, #560000 0%, #350000 100%);\n    --gold: #C5A059;\n    --gold-light: #F2D28C;\n    --gold-metallic: linear-gradient(45deg, #C5A059, #F2D28C, #C5A059);\n    --cream: #F9F8F4;\n    --white: #ffffff;\n    --text-dark: #1a1a1a;\n    --text-grey: #555;\n   \n    --font-serif: 'Playfair Display', serif;\n    --font-sans: 'Lato', sans-serif;\n    --font-deco: 'Cinzel', serif;\n   \n    --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);\n    --shadow-card: 0 15px 35px rgba(0,0,0,0.15);\n}\n\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: var(--font-sans); color: var(--text-dark); background: var(--white); overflow-x: hidden; line-height: 1.6; }\n\n\nh1, h2, h3, h4, h5 { font-family: var(--font-serif); color: var(--maroon); font-weight: 700; }\n.stylish-char { font-family: var(--font-deco); color: var(--gold); font-size: 1.4em; margin-right: 2px; }\n.gold-text { color: var(--gold); font-style: italic; }\n.white { color: var(--white); }\n.text-center { text-align: center; }\n\n\n.section-label { font-family: var(--font-deco); color: var(--gold); text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 10px; display: block; }\n.section-heading { font-size: 2.5rem; margin-bottom: 20px; }\n.section-desc { max-width: 700px; margin: 0 auto; color: var(--text-grey); font-size: 1.1rem; }\n.lead-text { font-size: 1.2rem; color: var(--text-grey); margin-bottom: 30px; }\n\n\n.divider-center { width: 80px; height: 3px; background: var(--gold); margin: 0 auto 30px; }\n.divider-gold { width: 100px; height: 3px; background: var(--gold); margin: 20px 0; }\n\n\n.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }\n.bg-cream { background: var(--cream); }\n.bg-maroon-dark { background: var(--maroon-dark); }\n\n\n\/* =========================================\n   2. NAVBAR\n   ========================================= *\/\n.navbar { padding: 15px 0; background: var(--white); position: sticky; top: 0; z-index: 1000; border-bottom: 3px solid var(--gold); box-shadow: var(--shadow-soft); }\n.nav-flex { display: flex; justify-content: space-between; align-items: center; }\n.brand { display: flex; align-items: center; gap: 15px; }\n.logo-box { background: var(--maroon); color: var(--gold); font-family: var(--font-deco); padding: 8px 12px; font-weight: bold; font-size: 1.2rem; border-radius: 2px; }\n.brand-text { display: flex; flex-direction: column; line-height: 1.1; }\n.brand-text span { font-family: var(--font-serif); font-weight: 700; color: var(--maroon); }\n.sub-brand { font-size: 0.8rem; color: var(--gold) !important; text-transform: uppercase; letter-spacing: 1px; }\n\n\n.nav-links { display: flex; gap: 30px; list-style: none; align-items: center; }\n.nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; transition: 0.3s; }\n.nav-links a.active { color: var(--maroon); }\n.btn-gold { border: 1px solid var(--gold); padding: 8px 20px; border-radius: 50px; color: var(--gold) !important; }\n.btn-gold:hover { background: var(--gold); color: var(--white) !important; }\n\n\n\/* =========================================\n   3. HERO SECTION\n   ========================================= *\/\n.gallery-hero {\n    height: 85vh;\n    background: var(--maroon-gradient);\n    position: relative; display: flex; align-items: center; justify-content: center; text-align: center;\n    color: var(--white); overflow: hidden;\n}\n.hero-overlay {\n    position: absolute; inset: 0;\n    \/* Elegant Frame Pattern *\/\n    background-image:\n        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);\n    background-size: 50px 50px;\n}\n.hero-content { position: relative; z-index: 2; max-width: 900px; }\n.pre-title { font-family: var(--font-deco); letter-spacing: 4px; color: var(--gold); margin-bottom: 10px; }\n.hero-title { font-size: 5rem; line-height: 1; margin-bottom: 20px; }\n.hero-subtitle { font-family: var(--font-sans); font-weight: 300; font-size: 1.8rem; margin-bottom: 40px; color: rgba(255,255,255,0.9); }\n.scroll-btn { color: var(--gold); border: 1px solid var(--gold); padding: 12px 30px; text-transform: uppercase; text-decoration: none; letter-spacing: 2px; font-size: 0.9rem; transition: 0.3s; display: inline-block; }\n.scroll-btn:hover { background: var(--gold); color: var(--maroon); }\n\n\n\/* Animation Classes *\/\n.fade-in { opacity: 0; transition: opacity 1s ease, transform 1s ease; transform: translateY(20px); }\n.delay-1 { transition-delay: 0.2s; }\n.delay-2 { transition-delay: 0.4s; }\n.delay-3 { transition-delay: 0.6s; }\n\n\n\/* =========================================\n   4. INTRO GALLERY (Grid Collage)\n   ========================================= *\/\n.intro-gallery-section { padding: 100px 0; background: var(--white); }\n.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }\n\n\n.badges-row { display: flex; gap: 15px; margin-top: 20px; }\n.badge { background: var(--maroon); color: var(--gold); padding: 5px 15px; border-radius: 4px; font-size: 0.8rem; text-transform: uppercase; font-weight: bold; }\n\n\n.collage-grid {\n    display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 200px); gap: 15px;\n}\n.c-img {\n    background: #ccc; border-radius: 4px; position: relative; overflow: hidden;\n    background: linear-gradient(135deg, #e0e0e0, #d0d0d0);\n    display: flex; align-items: center; justify-content: center;\n    color: #555; font-weight: bold; font-size: 0.8rem;\n    transition: transform 0.4s ease;\n}\n.c-img:hover { transform: scale(1.02); box-shadow: var(--shadow-soft); }\n.c-img::after { content: attr(data-label); padding: 10px; text-align: center; }\n.c-1 { grid-row: span 2; background: linear-gradient(135deg, #ddd, #ccc); } \/* Tall *\/\n.c-2 { grid-column: 2; }\n.c-3 { grid-column: 2; }\n\n\n\/* =========================================\n   5. FESTIVALS (Mosaic Layout)\n   ========================================= *\/\n.festivals-section { padding: 100px 0; background: var(--maroon-dark); position: relative; }\n.mosaic-gallery {\n    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 10px;\n    margin-top: 50px;\n}\n.m-item {\n    background: #555; position: relative; overflow: hidden; cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    background: linear-gradient(45deg, #444, #333);\n}\n.m-item::before { content: attr(data-label); color: rgba(255,255,255,0.3); font-size: 0.8rem; position: absolute; }\n\n\n.wide { grid-column: span 2; }\n.tall { grid-row: span 2; }\n\n\n.overlay {\n    position: absolute; inset: 0; background: rgba(197, 160, 89, 0.9); \/* Gold Overlay *\/\n    display: flex; align-items: center; justify-content: center;\n    opacity: 0; transition: 0.4s; transform: translateY(20px);\n}\n.m-item:hover .overlay { opacity: 1; transform: translateY(0); }\n.overlay h4 { color: var(--maroon); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }\n\n\n\/* =========================================\n   6. FILTERABLE STUDENT LIFE\n   ========================================= *\/\n.student-life-section { padding: 100px 0; }\n.gallery-filters { margin: 40px 0; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }\n.filter-btn {\n    background: transparent; border: 2px solid var(--maroon); color: var(--maroon);\n    padding: 8px 25px; border-radius: 30px; font-weight: bold; cursor: pointer; transition: 0.3s;\n    font-family: var(--font-sans); text-transform: uppercase; font-size: 0.85rem;\n}\n.filter-btn.active, .filter-btn:hover { background: var(--maroon); color: var(--white); }\n\n\n.life-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }\n.life-item {\n    background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-soft);\n    transition: transform 0.3s, opacity 0.3s;\n}\n.life-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }\n\n\n.life-img {\n    height: 220px; background: #ddd; position: relative;\n    display: flex; align-items: center; justify-content: center; color: #666; font-size: 0.8rem;\n}\n.life-img::after { content: attr(data-label); font-weight: bold; }\n.life-caption { padding: 15px; text-align: center; color: var(--maroon); font-weight: bold; font-family: var(--font-serif); }\n\n\n\/* =========================================\n   7. AWARDS SECTION\n   ========================================= *\/\n.awards-section { padding: 100px 0; background: var(--white); }\n.awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 50px; }\n\n\n.award-card {\n    text-align: center; padding: 40px 20px; border: 1px solid #eee; border-radius: 8px;\n    transition: 0.3s; position: relative; overflow: hidden;\n}\n.award-card:hover { border-color: var(--gold); background: #fffcf5; box-shadow: var(--shadow-soft); }\n\n\n.award-icon-box {\n    width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%;\n    background: var(--maroon); color: var(--gold); display: grid; place-items: center; font-size: 2rem;\n    box-shadow: 0 0 0 5px rgba(197, 160, 89, 0.2);\n}\n.award-year {\n    position: absolute; top: 10px; right: 10px; background: var(--gold); color: var(--white);\n    padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: bold;\n}\n.award-card h4 { font-size: 1.3rem; margin-bottom: 5px; }\n.award-body { display: block; font-size: 0.85rem; text-transform: uppercase; color: var(--gold); font-weight: bold; margin-bottom: 15px; }\n.award-card p { font-size: 0.9rem; color: var(--text-grey); }\n\n\n\/* =========================================\n   8. MEDIA GALLERY (Video)\n   ========================================= *\/\n.media-section { padding: 100px 0; }\n.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; }\n\n\n.video-card { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s; }\n.video-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); }\n\n\n.video-thumb {\n    height: 180px; background: #222; border-radius: 4px; position: relative;\n    display: flex; align-items: center; justify-content: center; cursor: pointer;\n    background-size: cover; overflow: hidden;\n}\n.video-thumb::before { content: attr(data-label); color: #aaa; font-size: 0.8rem; position: absolute; bottom: 10px; left: 10px; z-index: 1; }\n.play-btn {\n    width: 50px; height: 50px; background: rgba(197, 160, 89, 0.8); border-radius: 50%;\n    display: grid; place-items: center; color: white; font-size: 1.2rem; transition: 0.3s; z-index: 2;\n}\n.video-thumb:hover .play-btn { background: var(--gold); transform: scale(1.1); }\n.vid-duration {\n    position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white;\n    padding: 2px 6px; font-size: 0.7rem; border-radius: 3px; z-index: 2;\n}\n\n\n.video-info { margin-top: 15px; color: white; }\n.video-info h4 { color: var(--gold); font-size: 1.1rem; margin-bottom: 5px; }\n.video-info p { font-size: 0.85rem; color: #ccc; }\n\n\n\/* =========================================\n   9. FOOTER\n   ========================================= *\/\n.gallery-footer {\n    padding: 100px 0 30px; background: #111; position: relative; text-align: center; color: white;\n    border-top: 5px solid var(--gold);\n}\n.footer-overlay { position: absolute; inset: 0; background: radial-gradient(circle, #222 0%, #000 100%); opacity: 0.9; }\n.footer-content-centered { position: relative; z-index: 2; }\n.footer-content-centered h2 { color: var(--gold); font-size: 2.5rem; margin-bottom: 20px; }\n.footer-content-centered p { font-size: 1.2rem; margin-bottom: 40px; color: #ccc; }\n\n\n.cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 60px; }\n.btn-gold-solid { background: var(--gold-metallic); color: var(--maroon); padding: 15px 40px; font-weight: bold; border-radius: 50px; text-decoration: none; text-transform: uppercase; transition: 0.3s; }\n.btn-gold-solid:hover { transform: translateY(-3px); box-shadow: 0 0 20px rgba(197, 160, 89, 0.5); }\n.btn-outline-light { border: 2px solid rgba(255,255,255,0.3); color: white; padding: 13px 40px; font-weight: bold; border-radius: 50px; text-decoration: none; text-transform: uppercase; transition: 0.3s; }\n.btn-outline-light:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }\n.copyright { font-size: 0.8rem; color: #666; }\n\n\n\/* =========================================\n   10. RESPONSIVE\n   ========================================= *\/\n@media (max-width: 900px) {\n    .intro-grid { grid-template-columns: 1fr; }\n    .hero-title { font-size: 3.5rem; }\n    .mosaic-gallery { grid-template-columns: repeat(2, 1fr); }\n    .wide { grid-column: span 2; }\n    .tall { grid-row: span 1; }\n}\n\n\n@media (max-width: 600px) {\n    .hero-title { font-size: 2.5rem; }\n    .mosaic-gallery { grid-template-columns: 1fr; }\n    .wide, .tall { grid-column: span 1; grid-row: span 1; }\n    .cta-buttons { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto 40px; }\n}<\/style>\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-88adb16 e-flex e-con-boxed e-con e-parent\" data-id=\"88adb16\" 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-66400f7 elementor-widget elementor-widget-html\" data-id=\"66400f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Cinzel:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n\n<section id=\"doms-intro-gallery-v2\" class=\"dig2-wrapper force-full-width\">\n  \n  <div class=\"dig2-bg-layer\">\n    <div class=\"dig2-grid-pattern\"><\/div>\n  <\/div>\n\n  <div class=\"dig2-container\">\n    \n    <div class=\"dig2-text-col\">\n      <div class=\"dig2-header-group\">\n        <span class=\"dig2-eyebrow\">Department of Management Studies<\/span>\n        <h2 class=\"dig2-headline\">\n          Cultivating <span class=\"dig2-italic-accent\">Leaders<\/span>\n        <\/h2>\n        <div class=\"dig2-gold-separator\"><\/div>\n      <\/div>\n\n      <div class=\"dig2-body-content\">\n        <p class=\"dig2-paragraph\">\n          <span class=\"dig2-dropcap\">W<\/span>elcome to DoMS, where we cultivate tomorrow's leaders through rigorous academics, experiential learning, and world-class faculty mentorship. Our vibrant ecosystem fosters innovation, collaboration, and excellence.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"dig2-visual-col\">\n      <div class=\"dig2-collage-wrapper\">\n        \n        <div class=\"dig2-photo-card dig2-card-main\">\n          <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1764692835342.jpg\" \n               alt=\"Academic Rigor\" class=\"dig2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n          <div class=\"dig2-photo-caption\">Academic Rigor<\/div>\n        <\/div>\n\n        <div class=\"dig2-photo-card dig2-card-top\">\n          <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1760385123097.jpg\" \n               alt=\"Student Collaboration\" class=\"dig2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n        <\/div>\n\n        <div class=\"dig2-photo-card dig2-card-bottom\">\n          <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1758179226967.jpg\" \n               alt=\"Mentorship\" class=\"dig2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n        <\/div>\n\n        <div class=\"dig2-deco-frame\"><\/div>\n\n      <\/div>\n      \n      <div class=\"dig2-swipe-hint\">\n        <span>Swipe to view more<\/span> &rarr;\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ==========================================================================\n   ISOLATION SCOPE: #doms-intro-gallery-v2\n   ========================================================================== \n*\/\n\n\/* 1. RESET & BREAKOUT *\/\n#doms-intro-gallery-v2.dig2-wrapper {\n  width: 100vw !important;\n  position: relative !important;\n  left: 50% !important; transform: translateX(-50%) !important;\n  background-color: #ffffff !important;\n  padding: 100px 0 !important;\n  overflow: hidden !important;\n  display: flex !important; justify-content: center !important;\n  box-sizing: border-box !important;\n  z-index: 2 !important;\n}\n\n#doms-intro-gallery-v2 * {\n  box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important;\n}\n\n\/* 2. BACKGROUND *\/\n#doms-intro-gallery-v2 .dig2-bg-layer {\n  position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;\n  pointer-events: none !important; z-index: 0 !important;\n}\n\n#doms-intro-gallery-v2 .dig2-grid-pattern {\n  width: 100% !important; height: 100% !important;\n  background-image: \n    linear-gradient(rgba(105, 28, 32, 0.1) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(105, 28, 32, 0.1) 1px, transparent 1px) !important;\n  background-size: 40px 40px !important;\n}\n\n#doms-intro-gallery-v2 .dig2-container {\n  max-width: 1300px !important; width: 100% !important; padding: 0 30px !important;\n  display: flex !important; align-items: center !important; justify-content: space-between !important;\n  position: relative !important; z-index: 2 !important;\n  gap: 60px !important;\n}\n\n\/* 3. LEFT COLUMN: TEXT *\/\n#doms-intro-gallery-v2 .dig2-text-col { width: 45% !important; }\n\n#doms-intro-gallery-v2 .dig2-eyebrow {\n  display: block !important; font-family: \"Manrope\", sans-serif !important;\n  font-size: 0.85rem !important; letter-spacing: 3px !important; color: #cfaa56 !important;\n  font-weight: 700 !important; text-transform: uppercase !important; margin-bottom: 20px !important;\n}\n\n#doms-intro-gallery-v2 .dig2-headline {\n  font-family: \"Cinzel\", serif !important; font-size: 5.3rem !important;\n  color: #4a0e12 !important; line-height: 1.1 !important; margin-bottom: 25px !important;\n}\n\n#doms-intro-gallery-v2 .dig2-italic-accent {\n  font-family: \"Playfair Display\", serif !important; font-style: italic !important; color: #4a0e12 !important;\n}\n\n#doms-intro-gallery-v2 .dig2-gold-separator {\n  width: 80px !important; height: 3px !important; background: #cfaa56 !important; margin-bottom: 35px !important;\n}\n\n#doms-intro-gallery-v2 .dig2-paragraph {\n  font-family: \"Manrope\", sans-serif !important; font-size: 1.15rem !important; color: #555 !important;\n  line-height: 1.8 !important; margin-bottom: 50px !important; text-align: justify !important;\n}\n\n#doms-intro-gallery-v2 .dig2-dropcap {\n  float: left !important; font-family: \"Cinzel\", serif !important; font-size: 3.5rem !important;\n  line-height: 0.8 !important; margin-right: 10px !important; color: #cfaa56 !important; font-weight: 700 !important;\n}\n\n\n\n\/* 5. RIGHT COLUMN: VISUAL COLLAGE *\/\n#doms-intro-gallery-v2 .dig2-visual-col {\n  width: 50% !important; position: relative !important; height: 600px !important;\n}\n\n#doms-intro-gallery-v2 .dig2-collage-wrapper {\n  width: 100% !important; height: 100% !important; position: relative !important;\n}\n\n\/* Card Styles *\/\n#doms-intro-gallery-v2 .dig2-photo-card {\n  position: absolute !important; background: #fff !important; padding: 8px !important;\n  box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;\n  transition: transform 0.5s ease, z-index 0s 0.2s !important; cursor: pointer !important;\n}\n#doms-intro-gallery-v2 .dig2-img {\n  width: 100% !important; height: 100% !important; object-fit: cover !important;\n  display: block !important; filter: sepia(10%) contrast(1.05) !important;\n}\n\n\/* Desktop Positioning *\/\n#doms-intro-gallery-v2 .dig2-card-main {\n  width: 65% !important; height: 70% !important; top: 15% !important; left: 0 !important;\n  z-index: 2 !important; transform: rotate(-2deg) !important;\n}\n#doms-intro-gallery-v2 .dig2-card-main:hover { transform: rotate(0deg) scale(1.02) !important; z-index: 10 !important; }\n\n#doms-intro-gallery-v2 .dig2-card-top {\n  width: 50% !important; height: 40% !important; top: 0 !important; right: 0 !important;\n  z-index: 1 !important; transform: rotate(3deg) !important;\n}\n#doms-intro-gallery-v2 .dig2-card-top:hover { transform: rotate(0deg) scale(1.05) !important; z-index: 10 !important; }\n\n#doms-intro-gallery-v2 .dig2-card-bottom {\n  width: 45% !important; height: 40% !important; bottom: 0 !important; right: 10% !important;\n  z-index: 3 !important; transform: rotate(2deg) !important;\n}\n#doms-intro-gallery-v2 .dig2-card-bottom:hover { transform: rotate(0deg) scale(1.05) !important; z-index: 10 !important; }\n\n#doms-intro-gallery-v2 .dig2-photo-caption {\n  position: absolute !important; bottom: 20px !important; left: -20px !important;\n  background: #4a0e12 !important; color: #fff !important; padding: 8px 20px !important;\n  font-family: \"Manrope\", sans-serif !important; font-size: 0.8rem !important; text-transform: uppercase !important;\n  letter-spacing: 1px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;\n}\n\n#doms-intro-gallery-v2 .dig2-deco-frame {\n  position: absolute !important; top: 10% !important; left: 10% !important;\n  width: 70% !important; height: 80% !important; border: 1px solid rgba(207, 170, 86, 0.4) !important;\n  z-index: 0 !important; pointer-events: none !important;\n}\n\n#doms-intro-gallery-v2 .dig2-swipe-hint { display: none !important; }\n\n\/* ==========================================================================\n   RESPONSIVE LOGIC\n   ========================================================================== \n*\/\n@media screen and (max-width: 1024px) {\n  #doms-intro-gallery-v2 .dig2-container { gap: 40px !important; }\n  #doms-intro-gallery-v2 .dig2-visual-col { height: 500px !important; }\n}\n\n@media screen and (max-width: 900px) {\n  #doms-intro-gallery-v2.dig2-wrapper { padding: 60px 0 !important; }\n  #doms-intro-gallery-v2 .dig2-container { flex-direction: column !important; padding: 0 20px !important; }\n  \n  \/* Text Column Mobile *\/\n  #doms-intro-gallery-v2 .dig2-text-col { width: 100% !important; text-align: left !important; }\n  #doms-intro-gallery-v2 .dig2-headline { font-size: 2.5rem !important; }\n  #doms-intro-gallery-v2 .dig2-paragraph { text-align: left !important; margin-bottom: 30px !important; }\n  \n  \/* Stamps Mobile *\/\n  #doms-intro-gallery-v2 .dig2-stamps-row { flex-direction: row !important; flex-wrap: wrap !important; gap: 20px !important; }\n  \n  \/* --- MOBILE SWIPE GALLERY (The Key Fix) --- *\/\n  #doms-intro-gallery-v2 .dig2-visual-col {\n    width: 100vw !important; margin-left: -20px !important; \/* Counter container pad *\/\n    height: auto !important; padding: 20px 20px 40px 20px !important;\n  }\n  \n  #doms-intro-gallery-v2 .dig2-collage-wrapper {\n    display: flex !important; gap: 15px !important;\n    overflow-x: auto !important; scroll-snap-type: x mandatory !important;\n    padding-bottom: 20px !important; width: 100% !important;\n    -ms-overflow-style: none !important; scrollbar-width: none !important;\n  }\n  #doms-intro-gallery-v2 .dig2-collage-wrapper::-webkit-scrollbar { display: none !important; }\n\n  \/* Reset Card Styles for Swipe *\/\n  #doms-intro-gallery-v2 .dig2-photo-card {\n    position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;\n    min-width: 280px !important; width: 280px !important; height: 350px !important;\n    transform: none !important; flex-shrink: 0 !important;\n    scroll-snap-align: start !important;\n  }\n  \n  \/* Hide desktop deco elements *\/\n  #doms-intro-gallery-v2 .dig2-deco-frame { display: none !important; }\n  #doms-intro-gallery-v2 .dig2-photo-caption { \n    left: 10px !important; bottom: 10px !important; width: auto !important;\n  }\n  \n  \/* Show Swipe Hint *\/\n  #doms-intro-gallery-v2 .dig2-swipe-hint {\n    display: flex !important; align-items: center !important; gap: 8px !important;\n    font-family: \"Manrope\", sans-serif !important; font-size: 0.8rem !important;\n    color: #cfaa56 !important; font-weight: 700 !important; text-transform: uppercase !important;\n    justify-content: center !important; margin-top: -10px !important;\n  }\n}\n<\/style>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-22d1667 e-flex e-con-boxed e-con e-parent\" data-id=\"22d1667\" 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-57b0292 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"57b0292\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Cinzel:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\n<section id=\"doms-reel-v2-safe\" class=\"dr2-wrapper force-full-width\">\n  \n  <div class=\"dr2-bg-layer\">\n    <div class=\"dr2-grain\"><\/div>\n  <\/div>\n\n  <div class=\"dr2-container\">\n    \n    <div class=\"dr2-header\">\n      <span class=\"dr2-eyebrow\">The DoMS Archive<\/span>\n      <h2 class=\"dr2-title\">Moments in <span class=\"dr2-serif\">Perpetuity<\/span><\/h2>\n      <div class=\"dr2-gold-line\"><\/div>\n      <p class=\"dr2-desc\">A continuous visual journey through the life, energy, and spirit of our campus.<\/p>\n    <\/div>\n\n    <div class=\"dr2-reel-viewport\">\n      <div class=\"dr2-fade-left\"><\/div>\n      \n      <div class=\"dr2-track\">\n        \n        <div class=\"dr2-plate portrait\">\n          <div class=\"dr2-img-frame\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1762738776038.jpg\" class=\"dr2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <div class=\"dr2-caption\">\n              <span class=\"dr2-tag\">Community<\/span>\n              <span class=\"dr2-name\">Collaboration<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dr2-plate cinema\">\n          <div class=\"dr2-img-frame\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/convocation_2025_EMBA-scaled.jpg\" class=\"dr2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <div class=\"dr2-caption\">\n              <span class=\"dr2-tag\">Event<\/span>\n              <span class=\"dr2-name\">Convocation <\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dr2-plate standard\">\n          <div class=\"dr2-img-frame\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1756630420633.jpg\" class=\"dr2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <div class=\"dr2-caption\">\n              <span class=\"dr2-tag\">Academic<\/span>\n              <span class=\"dr2-name\">Classroom Focus<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dr2-plate portrait\">\n          <div class=\"dr2-img-frame\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1752086734601.jpg\" class=\"dr2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <div class=\"dr2-caption\">\n              <span class=\"dr2-tag\">People<\/span>\n              <span class=\"dr2-name\">Student Life<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dr2-plate cinema\">\n          <div class=\"dr2-img-frame\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1762600374903.jpg\" class=\"dr2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <div class=\"dr2-caption\">\n              <span class=\"dr2-tag\">Architecture<\/span>\n              <span class=\"dr2-name\">The Stone Walls<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dr2-plate standard\">\n          <div class=\"dr2-img-frame\">\n            <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/pic-1-1-scaled.jpeg\" class=\"dr2-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n            <div class=\"dr2-caption\">\n              <span class=\"dr2-tag\">Culture<\/span>\n              <span class=\"dr2-name\">Festive Spirit<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n      \n      <div class=\"dr2-fade-right\"><\/div>\n    <\/div>\n\n    <div class=\"dr2-footer\">\n      <div class=\"dr2-drag-hint\">\n        <span>&larr; Drag or Swipe to Explore &rarr;<\/span>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ==========================================================================\n   ISOLATION SCOPE: #doms-reel-v2-safe\n   ========================================================================== \n*\/\n\n\/* 1. RESET & BREAKOUT (The Bulletproof Fix) *\/\n#doms-reel-v2-safe.dr2-wrapper {\n  \/* Dimensions & Positioning *\/\n  width: 100vw !important;\n  position: relative !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  \n  \/* Appearance *\/\n  background-color: #111111 !important; \/* Cinematic Dark *\/\n  padding: 50px 0 50px 0 !important;\n  overflow: hidden !important; \/* Hide vertical scrollbars *\/\n  box-sizing: border-box !important;\n  z-index: 2 !important;\n  color: #ffffff !important;\n}\n\n#doms-reel-v2-safe * {\n  box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important;\n}\n\n\/* 2. BACKGROUND *\/\n#doms-reel-v2-safe .dr2-bg-layer {\n  position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;\n  pointer-events: none !important; z-index: 0 !important;\n}\n#doms-reel-v2-safe .dr2-grain {\n  width: 100% !important; height: 100% !important; opacity: 0.07 !important;\n  background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'\/%3E%3C\/svg%3E\");\n}\n\n\/* 3. HEADER *\/\n#doms-reel-v2-safe .dr2-header {\n  text-align: center !important; margin-bottom: 60px !important; position: relative !important; z-index: 2 !important;\n  max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 20px !important;\n}\n\n#doms-reel-v2-safe .dr2-eyebrow {\n  display: block !important; font-family: \"Manrope\", sans-serif !important;\n  font-size: 0.85rem !important; letter-spacing: 3px !important; color: #cfaa56 !important;\n  font-weight: 700 !important; text-transform: uppercase !important; margin-bottom: 20px !important;\n}\n\n#doms-reel-v2-safe .dr2-title {\n  font-family: \"Cinzel\", serif !important; font-size: 4.2rem !important; color: #ffffff !important;\n  margin: 0 0 20px 0 !important; line-height: 1.9 !important;\n}\n#doms-reel-v2-safe .dr2-serif {\n  font-family: \"Playfair Display\", serif !important; font-style: italic !important; color: #cfaa56 !important;\n}\n\n#doms-reel-v2-safe .dr2-gold-line {\n  width: 60px !important; height: 2px !important; background: #cfaa56 !important; margin: 0 auto 30px auto !important;\n}\n\n#doms-reel-v2-safe .dr2-desc {\n  font-family: \"Manrope\", sans-serif !important; font-size: 1.1rem !important; color: #999 !important;\n}\n\n\/* 4. THE REEL VIEWPORT *\/\n#doms-reel-v2-safe .dr2-reel-viewport {\n  position: relative !important; width: 100% !important; z-index: 2 !important;\n}\n\n\/* Fade Edges (The Artistic Touch) *\/\n#doms-reel-v2-safe .dr2-fade-left,\n#doms-reel-v2-safe .dr2-fade-right {\n  position: absolute !important; top: 0 !important; bottom: 0 !important; width: 15% !important; z-index: 5 !important; pointer-events: none !important;\n}\n#doms-reel-v2-safe .dr2-fade-left {\n  left: 0 !important; background: linear-gradient(to right, #111 0%, transparent 100%) !important;\n}\n#doms-reel-v2-safe .dr2-fade-right {\n  right: 0 !important; background: linear-gradient(to left, #111 0%, transparent 100%) !important;\n}\n\n\/* The Track (Scroll Logic) *\/\n#doms-reel-v2-safe .dr2-track {\n  display: flex !important;\n  gap: 40px !important; \/* Space between photos *\/\n  overflow-x: auto !important;\n  padding: 20px 10vw 60px 10vw !important; \/* Left\/Right padding to center start *\/\n  scroll-snap-type: x mandatory !important;\n  -webkit-overflow-scrolling: touch !important;\n  scrollbar-width: thin !important;\n  scrollbar-color: #cfaa56 #222 !important;\n}\n\n\/* Custom Scrollbar for Webkit *\/\n#doms-reel-v2-safe .dr2-track::-webkit-scrollbar { height: 6px !important; }\n#doms-reel-v2-safe .dr2-track::-webkit-scrollbar-track { background: #222 !important; }\n#doms-reel-v2-safe .dr2-track::-webkit-scrollbar-thumb { background: #cfaa56 !important; border-radius: 3px !important; }\n\n\/* 5. THE PLATES (Cards) *\/\n#doms-reel-v2-safe .dr2-plate {\n  flex: 0 0 auto !important; \/* CRITICAL: Prevents squashing in WordPress *\/\n  position: relative !important;\n  scroll-snap-align: center !important;\n  transition: transform 0.4s ease !important;\n}\n\n\/* Sizes *\/\n#doms-reel-v2-safe .portrait { width: 320px !important; height: 480px !important; }\n#doms-reel-v2-safe .standard { width: 450px !important; height: 350px !important; align-self: center !important; }\n#doms-reel-v2-safe .cinema { width: 600px !important; height: 400px !important; align-self: center !important; }\n\n\/* Image Frame *\/\n#doms-reel-v2-safe .dr2-img-frame {\n  width: 100% !important; height: 100% !important;\n  position: relative !important; overflow: hidden !important;\n  border: 1px solid rgba(255,255,255,0.1) !important;\n  border-radius: 2px !important;\n  background: #000 !important;\n}\n\n#doms-reel-v2-safe .dr2-img {\n  width: 100% !important; height: 100% !important; object-fit: cover !important;\n  filter: grayscale(40%) contrast(1.1) !important; \/* Archival Look *\/\n  transition: transform 0.6s ease, filter 0.6s ease !important;\n}\n\n\n#doms-reel-v2-safe .dr2-caption {\n  position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important;\n  padding: 20px !important;\n  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent) !important;\n  display: flex !important; flex-direction: column !important;\n  opacity: 0 !important; transform: translateY(10px) !important;\n  transition: all 0.4s ease !important;\n}\n\n\n#doms-reel-v2-safe .dr2-tag {\n  font-family: \"Manrope\", sans-serif !important; font-size: 0.7rem !important; color: #cfaa56 !important;\n  text-transform: uppercase !important; letter-spacing: 1px !important; font-weight: 700 !important;\n}\n#doms-reel-v2-safe .dr2-name {\n  font-family: \"Cinzel\", serif !important; font-size: 1.2rem !important; color: #fff !important;\n}\n\n\/* 6. FOOTER \/ HINT *\/\n#doms-reel-v2-safe .dr2-footer {\n  text-align: center !important; margin-top: 40px !important;\n}\n#doms-reel-v2-safe .dr2-drag-hint {\n  font-family: \"Manrope\", sans-serif !important; font-size: 0.8rem !important;\n  text-transform: uppercase !important; letter-spacing: 2px !important; color: #666 !important;\n}\n\n\/* ==========================================================================\n   RESPONSIVE LOGIC\n   ========================================================================== \n*\/\n@media screen and (max-width: 900px) {\n  #doms-reel-v2-safe .dr2-header { padding: 0 20px !important; }\n  #doms-reel-v2-safe .dr2-title { font-size: 2.2rem !important; }\n  \n  \/* On Mobile, standardize heights slightly for better swipe feel *\/\n  #doms-reel-v2-safe .dr2-track { padding: 20px 20px 40px 20px !important; gap: 20px !important; }\n  \n  \/* Make items large enough to see *\/\n  #doms-reel-v2-safe .portrait { width: 260px !important; height: 380px !important; }\n  #doms-reel-v2-safe .standard { width: 300px !important; height: 280px !important; }\n  #doms-reel-v2-safe .cinema { width: 320px !important; height: 260px !important; }\n  \n  \/* Always show caption on mobile *\/\n  #doms-reel-v2-safe .dr2-caption { opacity: 1 !important; transform: translateY(0) !important; padding: 15px !important; }\n  #doms-reel-v2-safe .dr2-img { filter: grayscale(0%) !important; }\n  \n  \/* Reduce fade width on mobile *\/\n  #doms-reel-v2-safe .dr2-fade-left, #doms-reel-v2-safe .dr2-fade-right { width: 5% !important; }\n}\n<\/style>\n\n\n\n\n\n\n\n\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-3d80172 e-con-full e-flex e-con e-parent\" data-id=\"3d80172\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aec1a93 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"aec1a93\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Cinzel:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n\n<section id=\"doms-gallery-v3-mobile\" class=\"dmg3-wrapper force-full-width\">\n  \n  <div class=\"dmg3-bg-texture\"><\/div>\n\n  <div class=\"dmg3-container\">\n    \n    <div class=\"dmg3-header\">\n      <span class=\"dmg3-eyebrow\">The DoMS Archive<\/span>\n      <h2 class=\"dmg3-title\">Moments that <span class=\"dmg3-serif\">Matter<\/span><\/h2>\n      <div class=\"dmg3-gold-line\"><\/div>\n    <\/div>\n\n    <div class=\"dmg3-tabs-wrapper\">\n      <div class=\"dmg3-tabs-scroll\">\n        <button class=\"dmg3-tab active\" data-filter=\"all\">All Collection<\/button>\n        <button class=\"dmg3-tab\" data-filter=\"clubs\">Student Clubs<\/button>\n        <button class=\"dmg3-tab\" data-filter=\"events\">Major Events<\/button>\n        <button class=\"dmg3-tab\" data-filter=\"sports\">Sports<\/button>\n        <button class=\"dmg3-tab\" data-filter=\"cultural\">Cultural<\/button>\n      <\/div>\n      <div class=\"dmg3-tab-fade\"><\/div>\n    <\/div>\n\n    <div class=\"dmg3-grid\" id=\"dmg3-gallery-grid\">\n      \n      <article class=\"dmg3-card dmg3-wide\" data-category=\"events\">\n        <div class=\"dmg3-img-wrap\">\n          <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-19-113212.png\" class=\"dmg3-img lazyload\" alt=\"Convocation\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n          <div class=\"dmg3-overlay\">\n            <span class=\"dmg3-cat-tag\">Events<\/span>\n            <h3 class=\"dmg3-card-title\">Convocation 2024<\/h3>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"dmg3-card dmg3-tall\" data-category=\"events\">\n        <div class=\"dmg3-img-wrap\">\n          <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/1763015570728-e1768803008581.jpg\" class=\"dmg3-img lazyload\" alt=\"Cu Dance\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n          <div class=\"dmg3-overlay\">\n            <span class=\"dmg3-cat-tag\">Competitions<\/span>\n            <h3 class=\"dmg3-card-title\">Samanvay Night<\/h3>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"dmg3-card\" data-category=\"sports\">\n        <div class=\"dmg3-img-wrap\">\n          <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/DOMS-LE-1.jpeg\" class=\"dmg3-img lazyload\" alt=\"Cricket Match\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n          <div class=\"dmg3-overlay\">\n            <span class=\"dmg3-cat-tag\">Sports<\/span>\n            <h3 class=\"dmg3-card-title\">DoMS Premier League<\/h3>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"dmg3-card\" data-category=\"clubs\">\n        <div class=\"dmg3-img-wrap\">\n          <img decoding=\"async\" data-src=\"https:\/\/doms.iitm.ac.in\/wordpress\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-19-114249.png\" class=\"dmg3-img lazyload\" alt=\"Club Meeting\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\">\n          <div class=\"dmg3-overlay\">\n            <span class=\"dmg3-cat-tag\">Clubs<\/span>\n            <h3 class=\"dmg3-card-title\">Fin-Club Workshop<\/h3>\n          <\/div>\n        <\/div>\n      <\/article>\n\n     \n\n     \n\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ==========================================================================\n   ISOLATION SCOPE: #doms-gallery-v3-mobile\n   ========================================================================== \n*\/\n\n\/* 1. RESET & BREAKOUT *\/\n#doms-gallery-v3-mobile.dmg3-wrapper {\n  width: 100vw !important;\n  position: relative !important;\n  left: 50% !important; transform: translateX(-50%) !important;\n  background-color: #fdfbf7 !important; \/* Alabaster Paper *\/\n  padding: 100px 0 120px 0 !important;\n  overflow: hidden !important;\n  box-sizing: border-box !important;\n  color: #1a1a1a !important;\n}\n\n#doms-gallery-v3-mobile * {\n  box-sizing: border-box !important; \n  margin: 0 !important; \n  padding: 0  !important; \n  \n  line-height: 1.4 !important;\n}\n\n\/* Texture *\/\n#doms-gallery-v3-mobile .dmg3-bg-texture {\n  position: absolute !important; \n  top: 0 !important; \n  left: 0 !important; \n  width: 100% !important; \n  height: 100% !important;\n  opacity: 0.4 !important; \n  pointer-events: none !important;\n  background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'\/%3E%3C\/svg%3E\");\n}\n\n#doms-gallery-v3-mobile .dmg3-container {\n  max-width: 1350px !important; \n  margin: 0 auto !important; \n  padding: 0 0px !important;\n  position: relative !important; \n  z-index: 2 !important;\n}\n\n\/* 2. HEADER *\/\n#doms-gallery-v3-mobile .dmg3-header {\n  text-align: center !important; margin-bottom: 50px !important;\n}\n\n#doms-gallery-v3-mobile .dmg3-eyebrow {\n  display: block !important; font-family: \"Manrope\", sans-serif !important;\n  font-size: 0.85rem !important; letter-spacing: 3px !important; color: #cfaa56 !important;\n  font-weight: 700 !important; text-transform: uppercase !important; margin-bottom: 15px !important;\n}\n\n#doms-gallery-v3-mobile .dmg3-title {\n  font-family: \"Cinzel\", serif !important; font-size: 3rem !important; color: #4a0e12 !important;\n  margin: 0 0 20px 0 !important; line-height: 1.1 !important;\n}\n#doms-gallery-v3-mobile .dmg3-serif {\n  font-family: \"Playfair Display\", serif !important; font-style: italic !important; color: #4a0e12 !important;\n}\n\n#doms-gallery-v3-mobile .dmg3-gold-line {\n  width: 60px !important; height: 3px !important; background: #cfaa56 !important; margin: 0 auto !important;\n}\n\n\/* 3. SCROLLABLE TABS (Mobile Optimized) *\/\n#doms-gallery-v3-mobile .dmg3-tabs-wrapper {\n  position: relative !important; margin-bottom: 60px !important;\n  max-width: 800px !important; margin-left: auto !important; margin-right: auto !important;\n}\n\n#doms-gallery-v3-mobile .dmg3-tabs-scroll {\n  display: flex !important; justify-content: center !important; gap: 15px !important;\n  overflow-x: auto !important; padding-bottom: 15px !important;\n  -ms-overflow-style: none !important; scrollbar-width: none !important;\n}\n#doms-gallery-v3-mobile .dmg3-tabs-scroll::-webkit-scrollbar { display: none !important; }\n\n#doms-gallery-v3-mobile .dmg3-tab {\n  background: none !important; border: 1px solid transparent !important;\n  padding: 10px 20px !important;\n  font-family: \"Manrope\", sans-serif !important; font-size: 0.9rem !important; font-weight: 600 !important;\n  color: #888 !important; cursor: pointer !important; transition: all 0.3s ease !important;\n  white-space: nowrap !important; border-radius: 30px !important;\n  text-transform: uppercase !important; letter-spacing: 0.5px !important;\n}\n#doms-gallery-v3-mobile .dmg3-tab:hover {\n  background: #fff !important; color: #4a0e12 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;\n}\n#doms-gallery-v3-mobile .dmg3-tab.active {\n  background: #4a0e12 !important; color: #fff !important; border-color: #4a0e12 !important;\n  box-shadow: 0 5px 15px rgba(74, 14, 18, 0.2) !important;\n}\n\n\/* 4. THE GRID *\/\n#doms-gallery-v3-mobile .dmg3-grid {\n  display: grid !important;\n  grid-template-columns: repeat(3, 1fr) !important;\n  grid-auto-rows: 280px !important;\n  gap: 25px !important;\n}\n\n\/* Transitions *\/\n#doms-gallery-v3-mobile .dmg3-card {\n  opacity: 1 !important; transform: scale(1) !important;\n  transition: opacity 0.4s ease, transform 0.4s ease !important;\n  display: block !important;\n}\n#doms-gallery-v3-mobile .dmg3-card.hidden { display: none !important; }\n#doms-gallery-v3-mobile .dmg3-card.anim-out { opacity: 0 !important; transform: scale(0.95) !important; }\n\n\/* Grid Spans *\/\n#doms-gallery-v3-mobile .dmg3-wide { grid-column: span 2 !important; }\n#doms-gallery-v3-mobile .dmg3-tall { grid-row: span 2 !important; }\n\n\/* Image Wrap *\/\n#doms-gallery-v3-mobile .dmg3-img-wrap {\n  width: 100% !important; height: 100% !important; position: relative !important;\n  border-radius: 4px !important; overflow: hidden !important;\n  background: #000 !important; box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;\n}\n\n#doms-gallery-v3-mobile .dmg3-img {\n    filter: none;\n  width: 100% !important; height: 100% !important; object-fit: cover !important;\n  transition: transform 0.6s ease !important;\n}\n\/* Desktop Hover only *\/\n\/*@media (hover: hover) {*\/\n\/*  #doms-gallery-v3-mobile .dmg3-img-wrap:hover .dmg3-img { transform: scale(1.1) !important; }*\/\n\/*}*\/\n\n\/* Overlay (Smart Mobile Logic) *\/\n#doms-gallery-v3-mobile .dmg3-overlay {\n  position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important;\n  padding: 30px !important;\n  background: linear-gradient(to top, rgba(74, 14, 18, 0.95), transparent) !important;\n  display: flex !important; flex-direction: column !important; justify-content: flex-end !important;\n  transition: all 0.4s ease !important;\n}\n\n\/* Desktop: Hide initially *\/\n@media (min-width: 901px) {\n  #doms-gallery-v3-mobile .dmg3-overlay { opacity: 0 !important; transform: translateY(20px) !important; }\n  #doms-gallery-v3-mobile .dmg3-img-wrap:hover .dmg3-overlay { opacity: 1 !important; transform: translateY(0) !important; }\n}\n\n\/* Mobile: Always Show *\/\n@media (max-width: 900px) {\n  #doms-gallery-v3-mobile .dmg3-overlay { opacity: 1 !important; transform: translateY(0) !important; padding: 20px !important; }\n}\n\n#doms-gallery-v3-mobile .dmg3-cat-tag {\n  font-family: \"Manrope\", sans-serif !important; font-size: 0.75rem !important; color: #cfaa56 !important;\n  text-transform: uppercase !important; letter-spacing: 1px !important; font-weight: 700 !important;\n  margin-bottom: 5px !important;\n}\n#doms-gallery-v3-mobile .dmg3-card-title {\n  font-family: \"Cinzel\", serif !important; font-size: 1.3rem !important; color: #fff !important; margin: 0 !important;\n}\n\n\/* 5. LOAD MORE BUTTON *\/\n#doms-gallery-v3-mobile .dmg3-footer-action {\n  text-align: center !important; margin-top: 60px !important;\n}\n\n#doms-gallery-v3-mobile .dmg3-load-btn {\n  background: transparent !important; border: 1px solid #cfaa56 !important;\n  color: #4a0e12 !important; padding: 15px 40px !important;\n  font-family: \"Manrope\", sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important;\n  letter-spacing: 1px !important; cursor: pointer !important;\n  display: inline-flex !important; align-items: center !important; gap: 10px !important; justify-content: center !important;\n  transition: all 0.3s ease !important; border-radius: 50px !important;\n}\n#doms-gallery-v3-mobile .dmg3-load-btn:hover {\n  background: #cfaa56 !important; color: #fff !important; transform: translateY(-3px) !important;\n}\n#doms-gallery-v3-mobile .dmg3-load-btn.hidden { display: none !important; }\n\n\n\/* ==========================================================================\n   RESPONSIVE LOGIC (THE FIX)\n   ========================================================================== \n*\/\n\n@media screen and (max-width: 900px) {\n  #doms-gallery-v3-mobile.dmg3-wrapper { padding: 60px 0 !important; }\n  \n  #doms-gallery-v3-mobile .dmg3-header { padding: 0 20px !important; text-align: left !important; }\n  #doms-gallery-v3-mobile .dmg3-gold-line { margin: 0 !important; }\n  #doms-gallery-v3-mobile .dmg3-title { font-size: 2.2rem !important; }\n\n  \/* Mobile Tabs - Horizontal Swipe *\/\n  #doms-gallery-v3-mobile .dmg3-tabs-scroll {\n    justify-content: flex-start !important;\n    padding: 0 20px 10px 20px !important;\n    gap: 10px !important;\n  }\n  \n  \/* Mobile Grid - Single Column Feed *\/\n  #doms-gallery-v3-mobile .dmg3-grid {\n    grid-template-columns: 1fr !important; \/* Force Single Column *\/\n    gap: 20px !important; padding: 0 20px !important;\n    grid-auto-rows: auto !important;\n  }\n  \n  \/* Reset Spans *\/\n  #doms-gallery-v3-mobile .dmg3-wide, \n  #doms-gallery-v3-mobile .dmg3-tall {\n    grid-column: auto !important; grid-row: auto !important;\n  }\n  \n  \/* Taller Images on Mobile for Impact *\/\n  #doms-gallery-v3-mobile .dmg3-img { height: 350px !important; }\n  \n  \/* Full Width Button *\/\n  #doms-gallery-v3-mobile .dmg3-load-btn {\n    width: 90% !important; max-width: 300px !important;\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const root = document.getElementById('doms-gallery-v3-mobile');\n  if(!root) return;\n\n  const tabs = root.querySelectorAll('.dmg3-tab');\n  const cards = root.querySelectorAll('.dmg3-card');\n  const loadBtn = document.getElementById('dmg3-load-more-btn');\n  \n  const ITEMS_PER_PAGE = 6;\n  let currentFilter = 'all';\n  let visibleCount = ITEMS_PER_PAGE;\n\n  function applyFilter(category) {\n    currentFilter = category;\n    visibleCount = ITEMS_PER_PAGE; \/\/ Reset count\n    \n    cards.forEach(card => {\n      const cardCat = card.getAttribute('data-category');\n      if (category === 'all' || cardCat === category) {\n        card.classList.remove('hidden');\n        card.classList.add('is-match');\n      } else {\n        card.classList.add('hidden');\n        card.classList.remove('is-match');\n      }\n    });\n    updateVisibility();\n  }\n\n  function updateVisibility() {\n    const matches = Array.from(root.querySelectorAll('.is-match'));\n    \n    matches.forEach((card, index) => {\n      if (index < visibleCount) {\n        card.classList.remove('hidden');\n        setTimeout(() => card.classList.remove('anim-out'), 50);\n      } else {\n        card.classList.add('hidden');\n      }\n    });\n\n    if (visibleCount >= matches.length) {\n      loadBtn.classList.add('hidden');\n    } else {\n      loadBtn.classList.remove('hidden');\n    }\n  }\n\n  tabs.forEach(tab => {\n    tab.addEventListener('click', () => {\n      tabs.forEach(t => t.classList.remove('active'));\n      tab.classList.add('active');\n      const category = tab.getAttribute('data-filter');\n      applyFilter(category);\n    });\n  });\n\n  loadBtn.addEventListener('click', () => {\n    visibleCount += ITEMS_PER_PAGE;\n    updateVisibility();\n  });\n\n  \/\/ Init\n  applyFilter('all');\n});\n<\/script>\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c469f2 e-con-full e-flex e-con e-parent\" data-id=\"5c469f2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-02f94e8 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"02f94e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"doms-v17-gallery-root-id\" class=\"doms-v17-isolation-wrapper\">\n\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;700;800&family=Playfair+Display:wght@700&display=swap\" rel=\"stylesheet\">\n\n\n    <div class=\"doms-v17-bg-noise\"><\/div>\n\n    <div class=\"doms-v17-main-container\">\n        <header class=\"doms-v17-header-wrapper\">\n            <span class=\"doms-v17-tag-label\">Media Gallery<\/span>\n            <div class=\"doms-v17-heading-text\">Watch & Listen<\/div>\n        <\/header>\n\n        <div class=\"doms-v17-grid-layout\">\n            \n            <div class=\"doms-v17-player-container\">\n                <div class=\"doms-v17-aspect-ratio-box\" id=\"doms-v17-click-zone\">\n                    <img decoding=\"async\" src=\"\" alt=\"Video Cover\" class=\"doms-v17-cover-image\" id=\"doms-v17-main-cover-img\">\n                    <div class=\"doms-v17-red-play-btn\" id=\"doms-v17-main-play-btn\"><\/div>\n                    <div id=\"doms-v17-iframe-box\" class=\"doms-v17-iframe-holder\"><\/div>\n                <\/div>\n                \n                <div class=\"doms-v17-meta-data-box\">\n                    <div class=\"doms-v17-meta-title\" id=\"doms-v17-active-title\">Loading...<\/div>\n                    <div class=\"doms-v17-meta-desc\" id=\"doms-v17-active-desc\">Select a video to play.<\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"doms-v17-playlist-column\">\n                \n                <div class=\"doms-v17-playlist-item\" \n                     data-doms-yt-id=\"o0sOwhtV_nU\" \n                     data-doms-yt-title=\"Samanvay \" \n                     data-doms-yt-cat=\"Events\" \n                     data-doms-yt-desc=\"Our flagship business festival exploring how students and industry leaders connect.\">\n                    <div class=\"doms-v17-thumb-wrapper\">\n                        <img decoding=\"async\" class=\"doms-v17-thumb-image\" src=\"\" alt=\"Thumb\">\n                    <\/div>\n                    <div class=\"doms-v17-item-text-wrap\">\n                        <div class=\"doms-v17-item-title\">Samanvay <\/div>\n                        <span class=\"doms-v17-item-category\">Events<\/span>\n                    <\/div>\n                <\/div>\n\n                <!--<div class=\"doms-v17-playlist-item\" -->\n                <!--     data-doms-yt-id=\"hskaUY_XWoQ\" -->\n                <!--     data-doms-yt-title=\"Placements at DoMS\" -->\n                <!--     data-doms-yt-cat=\"Career\" -->\n                <!--     data-doms-yt-desc=\"Placement process at the Department of Management Studies, IIT Madras.\">-->\n                <!--    <div class=\"doms-v17-thumb-wrapper\">-->\n                <!--        <img decoding=\"async\" class=\"doms-v17-thumb-image\" src=\"\" alt=\"Thumb\">-->\n                <!--    <\/div>-->\n                <!--    <div class=\"doms-v17-item-text-wrap\">-->\n                <!--        <div class=\"doms-v17-item-title\">Placement<\/div>-->\n                <!--        <span class=\"doms-v17-item-category\">Career<\/span>-->\n                <!--    <\/div>-->\n                <!--<\/div>-->\n\n                <div class=\"doms-v17-playlist-item\" \n                     data-doms-yt-id=\"8gzi0ULUgZQ\" \n                     data-doms-yt-title=\"Shootout at DoMS\" \n                     data-doms-yt-cat=\"Culture\" \n                     data-doms-yt-desc=\"This is a movie entry by team Shootout at DoMS - Department of Management Studies DoMS, IIT Madras for Colors of Campus 2017.\">\n                    <div class=\"doms-v17-thumb-wrapper\">\n                        <img decoding=\"async\" class=\"doms-v17-thumb-image\" src=\"\" alt=\"Thumb\">\n                    <\/div>\n                    <div class=\"doms-v17-item-text-wrap\">\n                        <div class=\"doms-v17-item-title\">Shootout at DoMS<\/div>\n                        <span class=\"doms-v17-item-category\">Students<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"doms-v17-playlist-item\" \n                     data-doms-yt-id=\"_ZV0-csv0os\" \n                     data-doms-yt-title=\"Convocation 2025\" \n                     data-doms-yt-cat=\"Research\" \n                     data-doms-yt-desc=\"IIT Madras - Department of Management Studies(DoMS) - 62nd Convocation 2025\">\n                    <div class=\"doms-v17-thumb-wrapper\">\n                        <img decoding=\"async\" class=\"doms-v17-thumb-image\" src=\"\" alt=\"Thumb\">\n                    <\/div>\n                    <div class=\"doms-v17-item-text-wrap\">\n                        <div class=\"doms-v17-item-title\">Convocation 2025<\/div>\n                        <span class=\"doms-v17-item-category\">Events<\/span>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            \/\/ Select Elements\n            const items = document.querySelectorAll('.doms-v17-playlist-item');\n            const mainCover = document.getElementById('doms-v17-main-cover-img');\n            const mainTitle = document.getElementById('doms-v17-active-title');\n            const mainDesc = document.getElementById('doms-v17-active-desc');\n            const embedBox = document.getElementById('doms-v17-iframe-box');\n            const playBtn = document.getElementById('doms-v17-main-play-btn');\n            const trigger = document.getElementById('doms-v17-click-zone');\n            \n            let activeVideoId = '';\n\n            \/\/ Helpers\n            function getThumb(id) { return `https:\/\/img.youtube.com\/vi\/${id}\/mqdefault.jpg`; }\n            function getHighRes(id) { return `https:\/\/img.youtube.com\/vi\/${id}\/maxresdefault.jpg`; }\n\n            \/\/ Initialize Playlist\n            items.forEach((item, index) => {\n                const vidId = item.getAttribute('data-doms-yt-id');\n                const img = item.querySelector('.doms-v17-thumb-image');\n                if(img) img.src = getThumb(vidId);\n\n                item.addEventListener('click', function() {\n                    loadVideo(item);\n                });\n\n                if(index === 0) loadVideo(item, false);\n            });\n\n            \/\/ Load Data\n            function loadVideo(item, scroll = true) {\n                \/\/ Set Active Class\n                items.forEach(i => i.classList.remove('doms-v17-active-state'));\n                item.classList.add('doms-v17-active-state');\n\n                \/\/ Update State\n                activeVideoId = item.getAttribute('data-doms-yt-id');\n                mainTitle.textContent = item.getAttribute('data-doms-yt-title');\n                mainDesc.textContent = item.getAttribute('data-doms-yt-desc');\n                \n                \/\/ Show Cover, Hide Iframe\n                mainCover.src = getHighRes(activeVideoId);\n                mainCover.style.display = 'block';\n                playBtn.style.display = 'block';\n                \n                embedBox.innerHTML = ''; \n                embedBox.classList.remove('doms-v17-show-video');\n\n                \/\/ Mobile Scroll\n                if(scroll && window.innerWidth < 992) {\n                    trigger.scrollIntoView({behavior:'smooth', block:'center'});\n                }\n            }\n\n            \/\/ Play Logic\n            trigger.addEventListener('click', function() {\n                if(!embedBox.classList.contains('doms-v17-show-video')) {\n                    \n                    \/\/ 1. Create Iframe\n                    const iframe = document.createElement('iframe');\n                    iframe.src = `https:\/\/www.youtube.com\/embed\/${activeVideoId}?autoplay=1&rel=0&modestbranding=1`;\n                    iframe.setAttribute('allow', 'autoplay; encrypted-media; fullscreen');\n                    iframe.style.width = '100%';\n                    iframe.style.height = '100%';\n                    iframe.style.border = 'none';\n\n                    \/\/ 2. Inject Iframe\n                    embedBox.innerHTML = '';\n                    embedBox.appendChild(iframe);\n\n                    \/\/ 3. Show Iframe, Hide Cover\n                    embedBox.classList.add('doms-v17-show-video');\n                    mainCover.style.display = 'none';\n                    playBtn.style.display = 'none';\n                }\n            });\n\n        })();\n    <\/script>\n<\/div>\n\n\n\n\n\n\n    <style>\n        \/* --- 1. VARIABLES (Unique Prefix: --doms-v17-) --- *\/\n        #doms-v17-gallery-root-id.doms-v17-isolation-wrapper {\n            --doms-v17-color-bg-deep: #120505;\n            --doms-v17-color-bg-gradient: radial-gradient(circle at 70% 20%, #4a0000 0%, #120505 95%);\n            --doms-v17-color-accent: #FFD700; \/* Gold *\/\n            --doms-v17-color-white: #ffffff;\n            --doms-v17-color-grey: #e0e0e0;\n            --doms-v17-bg-glass: rgba(255, 255, 255, 0.05);\n            --doms-v17-bg-glass-hover: rgba(255, 255, 255, 0.1);\n            --doms-v17-bg-glass-active: rgba(255, 255, 255, 0.15);\n            --doms-v17-border-light: rgba(255, 255, 255, 0.15);\n            --doms-v17-font-serif: 'Playfair Display', serif;\n            --doms-v17-font-sans: 'Manrope', sans-serif;\n        }\n\n        \/* --- 2. HARD RESET (The \"Wall\") --- *\/\n        #doms-v17-gallery-root-id.doms-v17-isolation-wrapper {\n            all: initial !important; \n            display: block !important;\n            width: 100% !important;\n            box-sizing: border-box !important;\n            background-color: var(--doms-v17-color-bg-deep) !important;\n            background-image: var(--doms-v17-color-bg-gradient) !important;\n            padding: 80px 0 !important;\n            font-family: var(--doms-v17-font-sans) !important;\n            color: var(--doms-v17-color-white) !important;\n            line-height: 1.5 !important;\n            position: relative !important;\n            overflow: hidden !important;\n            text-align: left !important;\n        }\n\n        \/* Reset all children *\/\n        .doms-v17-isolation-wrapper * {\n            box-sizing: border-box !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            border: 0 !important;\n            background: transparent !important;\n            font-size: 100% !important;\n            vertical-align: baseline !important;\n            text-decoration: none !important;\n            list-style: none !important;\n            font-family: inherit !important;\n            color: inherit !important;\n            line-height: inherit !important;\n        }\n\n        \/* --- 3. BACKGROUND TEXTURE --- *\/\n        .doms-v17-bg-noise {\n            position: absolute !important;\n            top: 0 !important;\n            left: 0 !important;\n            width: 100% !important;\n            height: 100% !important;\n            \n            opacity: 0.7 !important;\n            pointer-events: none !important;\n            z-index: 1 !important;\n        }\n\n        \/* --- 4. LAYOUT --- *\/\n        .doms-v17-main-container {\n            max-width: 1240px !important;\n            margin: 0 auto !important;\n            padding: 0 24px !important;\n            position: relative !important;\n            z-index: 5 !important;\n        }\n\n        .doms-v17-header-wrapper {\n            margin-bottom: 40px !important;\n            display: flex !important;\n            flex-direction: column !important;\n            align-items: flex-start !important;\n        }\n\n        .doms-v17-tag-label {\n            display: inline-block !important;\n            font-size: 12px !important;\n            font-weight: 800 !important;\n            text-transform: uppercase !important;\n            letter-spacing: 2px !important;\n            color: var(--doms-v17-color-accent) !important;\n            margin-bottom: 12px !important;\n            background: rgba(255, 215, 0, 0.1) !important;\n            padding: 6px 12px !important;\n            border-radius: 4px !important;\n        }\n\n        .doms-v17-heading-text {\n            font-family: var(--doms-v17-font-serif) !important;\n            font-size: 42px !important;\n            font-weight: 700 !important;\n            line-height: 1.1 !important;\n            margin-bottom: 0 !important;\n            color: var(--doms-v17-color-white) !important;\n        }\n\n        \/* --- 5. GRID --- *\/\n        .doms-v17-grid-layout {\n            display: grid !important;\n            grid-template-columns: 2.5fr 1fr !important;\n            gap: 32px !important;\n            align-items: start !important;\n        }\n\n        \/* --- 6. LEFT: PLAYER --- *\/\n        .doms-v17-player-container {\n            background: rgba(0,0,0,0.3) !important;\n            border-radius: 12px !important;\n            border: 1px solid var(--doms-v17-border-light) !important;\n            overflow: hidden !important;\n            display: flex !important;\n            flex-direction: column !important;\n        }\n\n        .doms-v17-aspect-ratio-box {\n            position: relative !important;\n            width: 100% !important;\n            padding-top: 56.25% !important; \/* 16:9 *\/\n            background: #000000 !important;\n            cursor: pointer !important;\n            overflow: hidden !important;\n        }\n\n        \/* Visual Elements *\/\n        .doms-v17-cover-image {\n            filter: none !important;\n            position: absolute !important;\n            top: 0 !important;\n            left: 0 !important;\n            width: 100% !important;\n            height: 100% !important;\n            object-fit: cover !important;\n            opacity: 1 !important;\n            transition: opacity 0.3s ease !important;\n            z-index: 5 !important;\n            display: block !important;\n        }\n\n        .doms-v17-red-play-btn {\n            position: absolute !important;\n            top: 50% !important;\n            left: 50% !important;\n            transform: translate(-50%, -50%) !important;\n            width: 68px !important;\n            height: 48px !important;\n            background-color: #FF0000 !important;\n            border-radius: 12px !important;\n            z-index: 10 !important;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;\n            display: block !important;\n            transition: transform 0.2s !important;\n        }\n        \n        .doms-v17-red-play-btn::after {\n            content: '' !important;\n            position: absolute !important;\n            top: 50% !important;\n            left: 55% !important;\n            transform: translate(-50%, -50%) !important;\n            border-style: solid !important;\n            border-width: 10px 0 10px 18px !important;\n            border-color: transparent transparent transparent white !important;\n        }\n\n        .doms-v17-aspect-ratio-box:hover .doms-v17-red-play-btn {\n            transform: translate(-50%, -50%) scale(1.15) !important;\n            background-color: #cc0000 !important;\n        }\n\n        \/* Iframe Container *\/\n        .doms-v17-iframe-holder {\n            position: absolute !important;\n            top: 0 !important;\n            left: 0 !important;\n            width: 100% !important;\n            height: 100% !important;\n            z-index: 1 !important; \/* Behind cover initially *\/\n            background: #000 !important;\n        }\n        \n        \/* Utility class to show iframe *\/\n        .doms-v17-iframe-holder.doms-v17-show-video {\n            z-index: 20 !important; \/* Moves to top *\/\n        }\n\n        \/* Meta Data *\/\n        .doms-v17-meta-data-box {\n            padding: 24px !important;\n        }\n\n        .doms-v17-meta-title {\n            font-size: 24px !important;\n            font-weight: 700 !important;\n            margin-bottom: 8px !important;\n            color: var(--doms-v17-color-white) !important;\n            font-family: var(--doms-v17-font-sans) !important;\n            display: block !important;\n        }\n\n        .doms-v17-meta-desc {\n            font-size: 15px !important;\n            color: var(--doms-v17-color-grey) !important;\n            line-height: 1.6 !important;\n            font-weight: 400 !important;\n            display: block !important;\n        }\n\n        \/* --- 7. RIGHT: PLAYLIST --- *\/\n        .doms-v17-playlist-column {\n            display: flex !important;\n            flex-direction: column !important;\n            gap: 12px !important;\n            max-height: 520px !important;\n            overflow-y: auto !important;\n            padding-right: 4px !important;\n            width: 100% !important;\n        }\n\n        .doms-v17-playlist-item {\n            display: flex !important;\n            gap: 12px !important;\n            padding: 12px !important;\n            background-color: var(--doms-v17-bg-glass) !important;\n            border: 1px solid transparent !important;\n            border-radius: 8px !important;\n            cursor: pointer !important;\n            transition: all 0.2s ease-in-out !important;\n            align-items: center !important;\n        }\n\n        .doms-v17-playlist-item:hover {\n            background-color: var(--doms-v17-bg-glass-hover) !important;\n            border-color: var(--doms-v17-border-light) !important;\n        }\n\n        .doms-v17-playlist-item.doms-v17-active-state {\n            background-color: var(--doms-v17-bg-glass-active) !important;\n            border-color: var(--doms-v17-color-accent) !important;\n            box-shadow: 0 0 15px rgba(0,0,0,0.2) !important;\n        }\n\n        .doms-v17-thumb-wrapper {\n            width: 120px !important;\n            height: 68px !important;\n            background-color: #000 !important;\n            border-radius: 4px !important;\n            overflow: hidden !important;\n            flex-shrink: 0 !important;\n            position: relative !important;\n        }\n\n        .doms-v17-thumb-image {\n            filter: none!important:\n            width: 100% !important;\n            height: 100% !important;\n            object-fit: cover !important;\n            display: block !important;\n            filter: none !important;\n        }\n\n        .doms-v17-item-text-wrap {\n            display: flex !important;\n            flex-direction: column !important;\n            justify-content: center !important;\n            flex-grow: 1 !important;\n        }\n\n        .doms-v17-item-title {\n            font-size: 14px !important;\n            font-weight: 600 !important;\n            color: var(--doms-v17-color-white) !important;\n            margin-bottom: 4px !important;\n            line-height: 1.3 !important;\n            display: block !important;\n        }\n\n        .doms-v17-item-category {\n            font-size: 11px !important;\n            color: var(--doms-v17-color-accent) !important;\n            text-transform: uppercase !important;\n            font-weight: 700 !important;\n            letter-spacing: 0.5px !important;\n            display: block !important;\n        }\n\n        \/* --- 8. RESPONSIVE --- *\/\n        @media (max-width: 992px) {\n            .doms-v17-grid-layout { \n                grid-template-columns: 1fr !important;\n                gap: 24px !important;\n            }\n            .doms-v17-playlist-column { \n                flex-direction: row !important; \n                overflow-x: auto !important; \n                padding-bottom: 16px !important;\n                max-height: none !important;\n            }\n            .doms-v17-playlist-item { \n                min-width: 280px !important; \n                flex-direction: column !important; \n                align-items: flex-start !important;\n            }\n            .doms-v17-thumb-wrapper { \n                width: 100% !important; \n                height: 157px !important;\n            }\n        }\n        \n        @media (max-width: 600px) {\n            .doms-v17-heading-text { font-size: 32px !important; }\n            #doms-v17-gallery-root-id.doms-v17-isolation-wrapper { padding: 60px 0 !important; }\n        }\n    <\/style>\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-6cd22fa e-con-full e-flex e-con e-parent\" data-id=\"6cd22fa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d258e0 elementor-widget elementor-widget-html\" data-id=\"1d258e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"doms-cta-min-v9-root\">\n    \n   \n    <div class=\"doms-cta-min-v9-container\">\n        <span class=\"doms-cta-min-v9-eyebrow\">Next Steps<\/span>\n        \n        <h2 class=\"doms-cta-min-v9-heading\">Ready to define your legacy?<\/h2>\n        \n        <p class=\"doms-cta-min-v9-desc\">\n            Join a community where academic rigour meets real-world innovation. Explore our MBA, Executive, and Doctoral programs at IIT Madras.\n        <\/p>\n        \n        <!--<div class=\"doms-cta-min-v9-actions\">-->\n        <!--    <a href=\"\/admissions\" class=\"doms-cta-min-v9-btn-primary\">Apply Now<\/a>-->\n        <!--    <a href=\"\/brochure\" class=\"doms-cta-min-v9-btn-secondary\">Download Brochure<\/a>-->\n        <!--<\/div>-->\n    <\/div>\n\n<\/div>\n\n\n\n\n <style>\n        \/* --- ISOLATION & VARIABLES --- *\/\n        .doms-cta-min-v9-root {\n            \/* Palette: Monochromatic Luxury *\/\n            --doms-v9-bg: #ffffff;\n            --doms-v9-text-dark: #111111;\n            --doms-v9-text-grey: #666666;\n            --doms-v9-accent: #800000; \/* Deep Maroon *\/\n            --doms-v9-border: #f0f0f0;\n            \n            \/* Typography: Clean & Modern *\/\n            --doms-v9-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n\n            \/* Layout *\/\n            width: 100%;\n            padding: 20px 24px; \/* Generous \"expensive\" spacing *\/\n            background-color: var(--doms-v9-bg);\n            color: var(--doms-v9-text-dark);\n            font-family: var(--doms-v9-font);\n            box-sizing: border-box;\n            border-top: 1px solid var(--doms-v9-border);\n            text-align: center;\n        }\n\n        .doms-cta-min-v9-root * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        \/* --- CONTAINER --- *\/\n        .doms-cta-min-v9-container {\n            max-width: 680px; \/* Narrow width for optimal reading line length *\/\n            margin: 0 auto;\n        }\n\n        \/* --- TYPOGRAPHY --- *\/\n        .doms-cta-min-v9-eyebrow {\n            display: block;\n            font-size: 0.75rem;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            color: var(--doms-v9-text-grey);\n            margin-bottom: 24px;\n            font-weight: 600;\n        }\n\n        .doms-cta-min-v9-heading {\n            font-size: 3rem;\n            font-weight: 500; \/* Lighter weight looks more premium *\/\n            letter-spacing: -0.5px; \/* Tighter tracking for headlines *\/\n            line-height: 1.1;\n            margin-bottom: 24px;\n            color: var(--doms-v9-text-dark);\n        }\n\n        .doms-cta-min-v9-desc {\n            font-size: 1.125rem;\n            line-height: 1.7;\n            color: var(--doms-v9-text-grey);\n            margin-bottom: 48px;\n            font-weight: 300;\n        }\n\n        \/* --- BUTTONS --- *\/\n        .doms-cta-min-v9-actions {\n            display: flex;\n            justify-content: center;\n            gap: 16px;\n        }\n\n        .doms-cta-min-v9-btn-primary {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: 16px 36px;\n            background-color: var(--doms-v9-text-dark);\n            color: #ffffff !important;\n            font-size: 1.2rem;\n            font-weight: 500;\n            text-decoration: none;\n            transition: all 0.3s ease;\n            border: 1px solid var(--doms-v9-text-dark);\n        }\n\n      \n\n        .doms-cta-min-v9-btn-secondary {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: 16px 36px;\n            background-color: transparent;\n            color: var(--doms-v9-text-dark);\n            font-size: 0.95rem;\n            font-weight: 500;\n            text-decoration: none;\n            transition: all 0.3s ease;\n            border: 1px solid #e0e0e0;\n        }\n\n        .doms-cta-min-v9-btn-secondary:hover {\n            border-color: var(--doms-v9-text-dark);\n            background-color: #fafafa;\n        }\n\n        \/* --- RESPONSIVE --- *\/\n        @media (max-width: 768px) {\n            .doms-cta-min-v9-root {\n                padding: 80px 24px;\n            }\n            .doms-cta-min-v9-heading {\n                font-size: 2.2rem;\n            }\n            .doms-cta-min-v9-actions {\n                flex-direction: column;\n                gap: 12px;\n            }\n            .doms-cta-min-v9-btn-primary, \n            .doms-cta-min-v9-btn-secondary {\n                width: 100%;\n            }\n        }\n    <\/style>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Visual Archives Life in Motion A curated collection of our heritage, academic excellence, and the vibrant culture that defines DoMS. Explore Collection \u2193 Department of Management Studies Cultivating Leaders Welcome to DoMS, where we cultivate tomorrow&#8217;s leaders through rigorous academics, experiential learning, and world-class faculty mentorship. Our vibrant ecosystem fosters innovation, collaboration, and excellence.&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":15137,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-58398","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58398","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=58398"}],"version-history":[{"count":502,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58398\/revisions"}],"predecessor-version":[{"id":75002,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/58398\/revisions\/75002"}],"up":[{"embeddable":true,"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/pages\/15137"}],"wp:attachment":[{"href":"https:\/\/doms.iitm.ac.in\/index.php\/wp-json\/wp\/v2\/media?parent=58398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}