CBE Mangalore – Loading<\/title>\n <style>\n \/* Loading Screen Styles *\/\n .loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #F5F5DC; \/* Beige background *\/\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n transition: opacity 0.5s ease, visibility 0.5s ease;\n overflow: hidden;\n }\n\n \/* Enhanced More Visible Sprinkle Effects *\/\n .loading-overlay::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n radial-gradient(circle at 15% 25%, rgba(63, 42, 29, 0.25) 2px, transparent 2px),\n radial-gradient(circle at 85% 15%, rgba(63, 42, 29, 0.22) 2.5px, transparent 2.5px),\n radial-gradient(circle at 45% 35%, rgba(63, 42, 29, 0.28) 1.8px, transparent 1.8px),\n radial-gradient(circle at 75% 65%, rgba(63, 42, 29, 0.20) 2.2px, transparent 2.2px),\n radial-gradient(circle at 25% 75%, rgba(63, 42, 29, 0.26) 2px, transparent 2px),\n radial-gradient(circle at 95% 85%, rgba(63, 42, 29, 0.18) 2.3px, transparent 2.3px),\n radial-gradient(circle at 5% 45%, rgba(63, 42, 29, 0.24) 1.9px, transparent 1.9px),\n radial-gradient(circle at 55% 85%, rgba(63, 42, 29, 0.27) 2.1px, transparent 2.1px),\n radial-gradient(circle at 35% 15%, rgba(63, 42, 29, 0.19) 2.4px, transparent 2.4px),\n radial-gradient(circle at 65% 45%, rgba(63, 42, 29, 0.30) 1.7px, transparent 1.7px);\n background-size: \n 120px 120px, 180px 180px, 95px 95px, 140px 140px, 110px 110px,\n 160px 160px, 85px 85px, 130px 130px, 170px 170px, 100px 100px;\n animation: sprinkleFloat 8s ease-in-out infinite;\n z-index: 0;\n }\n\n .loading-overlay::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n radial-gradient(circle at 20% 60%, rgba(63, 42, 29, 0.21) 2px, transparent 2px),\n radial-gradient(circle at 80% 40%, rgba(63, 42, 29, 0.23) 2.2px, transparent 2.2px),\n radial-gradient(circle at 40% 20%, rgba(63, 42, 29, 0.19) 1.9px, transparent 1.9px),\n radial-gradient(circle at 90% 70%, rgba(63, 42, 29, 0.25) 2.1px, transparent 2.1px),\n radial-gradient(circle at 10% 80%, rgba(63, 42, 29, 0.20) 2.3px, transparent 2.3px),\n radial-gradient(circle at 60% 10%, rgba(63, 42, 29, 0.28) 1.8px, transparent 1.8px),\n radial-gradient(circle at 30% 90%, rgba(63, 42, 29, 0.17) 2.4px, transparent 2.4px),\n radial-gradient(circle at 70% 30%, rgba(63, 42, 29, 0.24) 2px, transparent 2px);\n background-size: \n 150px 150px, 200px 200px, 75px 75px, 125px 125px,\n 175px 175px, 90px 90px, 160px 160px, 110px 110px;\n animation: sprinkleFloat2 10s ease-in-out infinite reverse;\n z-index: 0;\n }\n\n \/* Additional floating sprinkles layer *\/\n .sprinkle-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 0;\n }\n\n .sprinkle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: rgba(63, 42, 29, 0.35);\n border-radius: 50%;\n animation: floatSprinkle 6s ease-in-out infinite;\n box-shadow: 0 0 4px rgba(63, 42, 29, 0.2);\n }\n\n .sprinkle:nth-child(1) { top: 10%; left: 12%; animation-delay: 0s; }\n .sprinkle:nth-child(2) { top: 25%; left: 88%; animation-delay: 1s; }\n .sprinkle:nth-child(3) { top: 40%; left: 25%; animation-delay: 2s; }\n .sprinkle:nth-child(4) { top: 60%; left: 75%; animation-delay: 0.5s; }\n .sprinkle:nth-child(5) { top: 75%; left: 15%; animation-delay: 1.5s; }\n .sprinkle:nth-child(6) { top: 15%; left: 60%; animation-delay: 2.5s; }\n .sprinkle:nth-child(7) { top: 85%; left: 45%; animation-delay: 3s; }\n .sprinkle:nth-child(8) { top: 30%; left: 85%; animation-delay: 0.8s; }\n .sprinkle:nth-child(9) { top: 50%; left: 5%; animation-delay: 1.8s; }\n .sprinkle:nth-child(10) { top: 70%; left: 95%; animation-delay: 2.2s; }\n .sprinkle:nth-child(11) { top: 5%; left: 35%; animation-delay: 1.2s; }\n .sprinkle:nth-child(12) { top: 90%; left: 65%; animation-delay: 2.8s; }\n\n @keyframes sprinkleFloat {\n 0%, 100% { \n transform: translate(0, 0) rotate(0deg);\n opacity: 0.8;\n }\n 25% { \n transform: translate(5px, -3px) rotate(90deg);\n opacity: 1;\n }\n 50% { \n transform: translate(-3px, 5px) rotate(180deg);\n opacity: 0.6;\n }\n 75% { \n transform: translate(-5px, -2px) rotate(270deg);\n opacity: 0.9;\n }\n }\n\n @keyframes sprinkleFloat2 {\n 0%, 100% { \n transform: translate(0, 0) scale(1);\n opacity: 0.5;\n }\n 33% { \n transform: translate(-4px, 3px) scale(1.1);\n opacity: 0.8;\n }\n 66% { \n transform: translate(4px, -4px) scale(0.9);\n opacity: 0.6;\n }\n }\n\n @keyframes floatSprinkle {\n 0%, 100% { \n transform: translateY(0px) scale(1);\n opacity: 0.3;\n }\n 50% { \n transform: translateY(-8px) scale(1.2);\n opacity: 0.8;\n }\n }\n\n .loading-overlay.fade-out {\n opacity: 0;\n visibility: hidden;\n }\n\n \/* CBE Logo *\/\n .loading-logo {\n width: 120px;\n height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n z-index: 1;\n animation: logoFloat 3s ease-in-out infinite;\n filter: drop-shadow(0 4px 15px rgba(63, 42, 29, 0.3));\n position: relative;\n }\n\n .loading-logo::before {\n content: '';\n position: absolute;\n top: -10px;\n left: -10px;\n right: -10px;\n bottom: -10px;\n background: radial-gradient(circle, rgba(63, 42, 29, 0.1) 0%, transparent 70%);\n border-radius: 50%;\n animation: logoGlow 2s ease-in-out infinite alternate;\n z-index: -1;\n }\n\n .loading-logo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n @keyframes logoFloat {\n 0%, 100% { \n transform: translateY(0px) scale(1);\n }\n 50% { \n transform: translateY(-8px) scale(1.05);\n }\n }\n\n @keyframes logoGlow {\n 0% { opacity: 0.3; transform: scale(1); }\n 100% { opacity: 0.6; transform: scale(1.1); }\n }\n\n \/* Loading Text *\/\n .loading-text {\n color: #3F2A1D; \/* Espresso brown *\/\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 10px;\n font-family: 'Georgia', serif;\n text-align: center;\n z-index: 1;\n opacity: 0;\n animation: textReveal 1.5s ease-in forwards;\n animation-delay: 0.3s;\n text-shadow: \n 0 0 10px rgba(63, 42, 29, 0.4),\n 0 2px 4px rgba(63, 42, 29, 0.2);\n position: relative;\n }\n\n .loading-text::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -10px;\n right: -10px;\n bottom: -5px;\n background: linear-gradient(45deg, transparent, rgba(63, 42, 29, 0.05), transparent);\n border-radius: 8px;\n animation: textShimmer 3s ease-in-out infinite;\n z-index: -1;\n }\n\n .loading-subtext {\n color: #3F2A1D;\n font-size: 18px;\n font-weight: 400;\n font-family: 'Georgia', serif;\n text-align: center;\n z-index: 1;\n opacity: 0;\n animation: textReveal 1.5s ease-in forwards;\n animation-delay: 0.6s;\n text-shadow: 0 0 8px rgba(63, 42, 29, 0.3);\n }\n\n @keyframes textReveal {\n 0% { \n opacity: 0; \n transform: translateY(20px) scale(0.9);\n }\n 100% { \n opacity: 1; \n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes textShimmer {\n 0%, 100% { opacity: 0; transform: translateX(-100%); }\n 50% { opacity: 1; transform: translateX(100%); }\n }\n\n \/* Buffering Circle *\/\n .buffering-circle {\n width: 60px;\n height: 60px;\n margin: 20px auto;\n position: relative;\n z-index: 1;\n }\n\n .buffering-circle::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 4px solid rgba(63, 42, 29, 0.2);\n border-top: 4px solid #3F2A1D;\n border-radius: 50%;\n animation: bufferSpin 1s linear infinite;\n box-shadow: 0 0 15px rgba(63, 42, 29, 0.3);\n }\n\n .buffering-circle::after {\n content: '';\n position: absolute;\n top: 8px;\n left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n border: 2px solid transparent;\n border-bottom: 2px solid rgba(63, 42, 29, 0.4);\n border-radius: 50%;\n animation: bufferSpin 1.5s linear infinite reverse;\n }\n\n @keyframes bufferSpin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n .loading-bar {\n width: 240px;\n height: 6px;\n background: rgba(63, 42, 29, 0.15);\n margin-top: 24px;\n border-radius: 3px;\n overflow: hidden;\n z-index: 1;\n position: relative;\n box-shadow: \n 0 0 15px rgba(63, 42, 29, 0.2),\n inset 0 1px 3px rgba(63, 42, 29, 0.1);\n }\n\n .loading-bar::before {\n content: '';\n display: block;\n width: 35%;\n height: 100%;\n background: linear-gradient(90deg, \n rgba(63, 42, 29, 0.8) 0%, \n rgba(63, 42, 29, 1) 50%, \n rgba(63, 42, 29, 0.8) 100%);\n animation: loadBar 2s ease-in-out infinite;\n border-radius: 3px;\n box-shadow: 0 0 10px rgba(63, 42, 29, 0.4);\n position: relative;\n }\n\n .loading-bar::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(255, 255, 255, 0.2) 50%, \n transparent 100%);\n animation: barShine 2s ease-in-out infinite;\n }\n\n @keyframes loadBar {\n 0% { transform: translateX(-100%); }\n 50% { transform: translateX(280%); }\n 100% { transform: translateX(280%); }\n }\n\n @keyframes barShine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(300%); }\n }\n\n \/* Content that will be shown after loading *\/\n .main-content {\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n\n .main-content.show {\n opacity: 1;\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n .loading-logo {\n width: 90px;\n height: 90px;\n }\n\n .loading-text {\n font-size: 24px;\n }\n\n .loading-subtext {\n font-size: 15px;\n }\n\n .loading-bar {\n width: 180px;\n height: 5px;\n }\n\n .sprinkle {\n width: 2.5px;\n height: 2.5px;\n }\n\n .buffering-circle {\n width: 50px;\n height: 50px;\n }\n }\n\n @media (max-width: 480px) {\n .loading-text {\n font-size: 20px;\n }\n\n .loading-subtext {\n font-size: 13px;\n }\n\n .loading-bar {\n width: 140px;\n }\n\n .sprinkle {\n width: 2px;\n height: 2px;\n }\n\n .buffering-circle {\n width: 40px;\n height: 40px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div id=\"loadingOverlay\" class=\"loading-overlay\">\n \n <div class=\"sprinkle-layer\">\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <\/div>\n\n \n <div class=\"loading-logo\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/CBE-2.png\" alt=\"CBE Mangalore Logo\" \/>\n <\/div>\n\n \n <div class=\"loading-text\">Catholic Board of Education<\/div>\n <div class=\"loading-subtext\">Diocese of Mangalore<\/div>\n\n \n <div class=\"buffering-circle\"><\/div>\n\n \n <div class=\"loading-bar\"><\/div>\n <\/div>\n\n <script>\n \/\/ Hide loading screen after 3 seconds\n window.addEventListener('load', function() {\n setTimeout(function() {\n const loadingOverlay = document.getElementById('loadingOverlay');\n const mainContent = document.querySelectorAll('.main-content');\n\n \/\/ Fade out loading screen\n loadingOverlay.classList.add('fade-out');\n\n \/\/ Show main content after loading screen fades\n setTimeout(function() {\n loadingOverlay.style.display = 'none';\n mainContent.forEach(content => {\n content.classList.add('show');\n });\n }, 500);\n }, 5000); \/\/ 5 seconds delay\n });\n\n \/\/ Handle logo loading error\n document.querySelector('.loading-logo img').onerror = function() {\n this.style.display = 'none';\n this.parentElement.innerHTML = '<div style=\"font-size: 40px; color: #3F2A1D; font-weight: bold;\">CBE<\/div>';\n };\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Banner Slider<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-light: #F8EDEB; \/* Slightly lighter for better contrast *\/\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* Banner Slider *\/\n .banner-section {\n width: 100%;\n position: relative;\n overflow: hidden;\n min-height: 600px;\n }\n\n .banner-container {\n width: 100%;\n height: 100%;\n margin-top: 1%;\n position: relative;\n }\n\n .banner-card {\n width: 100%;\n height: 600px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n transition: opacity 1s ease-in-out;\n }\n\n .banner-card.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n .banner-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n\n .banner-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 0 20px;\n z-index: 10;\n }\n\n .banner-nav-button {\n background: rgba(0, 0, 0, 0.5);\n color: #fff;\n border: none;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n font-size: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n backdrop-filter: blur(5px);\n }\n\n .banner-nav-button:hover,\n .banner-nav-button:focus {\n background: rgba(0, 0, 0, 0.7);\n transform: scale(1.1);\n outline: none;\n }\n\n .banner-nav-button.prev i,\n .banner-nav-button.next i {\n font-size: 18px;\n }\n\n .banner-dots {\n display: flex;\n justify-content: center;\n gap: 15px;\n position: absolute;\n bottom: 30px;\n left: 0;\n right: 0;\n z-index: 10;\n }\n\n .banner-dot {\n width: 16px;\n height: 16px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n }\n\n .banner-dot:hover,\n .banner-dot:focus {\n background-color: rgba(255, 255, 255, 0.8);\n outline: none;\n }\n\n .banner-dot.active {\n background-color: var(--accent-color);\n transform: scale(1.2);\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Tablet (768px - 1024px) *\/\n @media (max-width: 1024px) {\n .banner-section {\n min-height: 500px;\n }\n .banner-card {\n height: 500px;\n }\n .banner-nav-button {\n width: 45px;\n height: 45px;\n font-size: 18px;\n }\n .banner-nav-button.prev i,\n .banner-nav-button.next i {\n font-size: 16px;\n }\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n .banner-section {\n min-height: 400px;\n }\n .banner-card {\n height: 400px;\n }\n .banner-nav-button {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n .banner-nav-button.prev i,\n .banner-nav-button.next i {\n font-size: 14px;\n }\n .banner-dots {\n bottom: 20px;\n gap: 10px;\n }\n .banner-dot {\n width: 14px;\n height: 14px;\n }\n }\n\n \/* Small mobile (max-width: 480px) *\/\n @media (max-width: 480px) {\n .banner-section {\n min-height: 300px;\n }\n .banner-card {\n height: 300px;\n }\n .banner-nav {\n padding: 0 10px;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .banner-card {\n animation: none;\n transition: none;\n }\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n\n \/* No-JS Fallback *\/\n .no-js .banner-card {\n opacity: 1 !important;\n position: static !important;\n margin-bottom: 20px;\n }\n .no-js .banner-dots {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"banner-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"banner-container\">\n <div class=\"banner-card active\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/4-1.jpg\" alt=\"Bishop addressing an educational event\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <div class=\"banner-card\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/07\/IMG_2013-1-scaled.jpg\" alt=\"Guru Vandana Award\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <div class=\"banner-card\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/stmarys4-1.jpg\" alt=\"Students at St. Mary's institution in a classroom\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <div class=\"banner-card\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/bishopmng.jpg\" alt=\"Bishop visiting an educational institution in Mangalore\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <\/div>\n <div class=\"banner-nav\">\n <button class=\"banner-nav-button prev\" aria-label=\"Previous Banner\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n <button class=\"banner-nav-button next\" aria-label=\"Next Banner\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n <\/div>\n <div class=\"banner-dots\">\n <div class=\"banner-dot active\" tabindex=\"0\" aria-label=\"Show First Banner\"><\/div>\n <div class=\"banner-dot\" tabindex=\"0\" aria-label=\"Show Second Banner\"><\/div>\n <div class=\"banner-dot\" tabindex=\"0\" aria-label=\"Show Third Banner\"><\/div>\n <div class=\"banner-dot\" tabindex=\"0\" aria-label=\"Show Fourth Banner\"><\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Banner slider\n const bannerDots = document.querySelectorAll('.banner-dot');\n const bannerCards = document.querySelectorAll('.banner-card');\n const prevBannerButton = document.querySelector('.banner-nav-button.prev');\n const nextBannerButton = document.querySelector('.banner-nav-button.next');\n let currentBanner = 0;\n\n function updateBannerSlider(index) {\n bannerDots.forEach(d => d.classList.remove('active'));\n bannerCards.forEach(c => c.classList.remove('active'));\n \n if (bannerDots[index] && bannerCards[index]) {\n bannerDots[index].classList.add('active');\n bannerCards[index].classList.add('active');\n currentBanner = index;\n }\n }\n\n bannerDots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n clearInterval(bannerAutoRotate);\n updateBannerSlider(index);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n });\n dot.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n clearInterval(bannerAutoRotate);\n updateBannerSlider(index);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n }\n });\n });\n\n prevBannerButton.addEventListener('click', () => {\n clearInterval(bannerAutoRotate);\n currentBanner = (currentBanner - 1 + bannerCards.length) % bannerCards.length;\n updateBannerSlider(currentBanner);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n });\n\n nextBannerButton.addEventListener('click', () => {\n clearInterval(bannerAutoRotate);\n currentBanner = (currentBanner + 1) % bannerCards.length;\n updateBannerSlider(currentBanner);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n });\n\n function bannerRotate() {\n currentBanner = (currentBanner + 1) % bannerCards.length;\n updateBannerSlider(currentBanner);\n }\n\n let bannerAutoRotate = setInterval(bannerRotate, 8000);\n\n \/\/ Pause auto-rotation when user hovers over the banner\n const bannerSection = document.querySelector('.banner-section');\n bannerSection.addEventListener('mouseenter', () => {\n clearInterval(bannerAutoRotate);\n });\n\n bannerSection.addEventListener('mouseleave', () => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <style>\n :root {\n --primary-color: #F5F5DC;\n --secondary-color: #4A2C2A;\n --accent-color: #4A2C2A;\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n overflow-x: hidden;\n }\n\n .section-header {\n padding: 40px 90px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 3px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n .leadership-section {\n padding: 25px 15px 15px;\n background: var(--primary-color);\n position: relative;\n width: 100%;\n }\n\n .leadership-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n min-height: 250px;\n overflow: visible;\n padding-bottom: 30px;\n }\n\n .leader-card {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 20px;\n background: #ffffff;\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n transition: all 0.3s ease;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n .leader-card.active {\n opacity: 1;\n pointer-events: auto;\n position: relative;\n }\n\n .leader-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .leader-card.president {\n flex-direction: row;\n }\n\n .leader-card.secretary {\n flex-direction: row;\n }\n\n .leader-image-container {\n flex: 0 0 40%;\n max-width: 300px;\n height: 250px;\n overflow: hidden;\n border-radius: 8px;\n }\n\n .leader-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transition: transform 0.3s ease;\n }\n\n .leader-card:hover .leader-image {\n transform: scale(1.05);\n }\n\n .leader-info {\n flex: 1;\n padding: 15px;\n color: var(--text-medium);\n }\n\n .leader-title {\n font-weight: 600;\n font-size: clamp(22px, 2.5vw, 26px);\n font-family: 'Playfair Display', 'Georgia', serif;\n line-height: 1.4;\n margin-bottom: 10px;\n color: var(--accent-color);\n }\n\n .leader-position {\n font-size: clamp(14px, 2vw, 16px);\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n color: var(--text-medium);\n margin-bottom: 10px;\n line-height: 1.4;\n }\n\n .leader-text {\n font-size: clamp(14px, 1.8vw, 16px);\n line-height: 1.7;\n color: var(--text-medium);\n text-align: left;\n }\n\n .leadership-dots {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 20px;\n position: relative;\n z-index: 10;\n }\n\n .leadership-dot {\n width: 14px;\n height: 14px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n }\n\n .leadership-dot:hover,\n .leadership-dot:focus {\n background-color: rgba(255, 255, 255, 0.8);\n outline: none;\n }\n\n .leadership-dot.active {\n background-color: var(--accent-color);\n transform: scale(1.2);\n }\n\n @media (max-width: 1024px) {\n .leadership-section {\n padding: 20px 10px 50px;\n }\n .leadership-container {\n max-width: 95%;\n min-height: 350px;\n padding-bottom: 20px;\n }\n .leader-card {\n gap: 15px;\n padding: 15px;\n }\n .leader-image-container {\n flex: 0 0 35%;\n max-width: 250px;\n height: 200px;\n }\n .leader-info {\n padding: 10px;\n }\n .leader-title {\n font-size: clamp(20px, 2.5vw, 24px);\n }\n .leader-position {\n font-size: clamp(13px, 1.8vw, 15px);\n }\n .leader-text {\n font-size: clamp(13px, 1.8vw, 15px);\n line-height: 1.6;\n }\n .leadership-dots {\n gap: 10px;\n margin-top: 15px;\n }\n .leader-card.president {\n flex-direction: row;\n }\n .leader-card.secretary {\n flex-direction: row;\n }\n }\n\n @media (max-width: 599px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(20px, 4vw, 28px);\n }\n .leadership-section {\n padding: 15px 5px 40px;\n }\n .leadership-container {\n max-width: 100%;\n min-height: auto;\n }\n .leader-card {\n gap: 10px;\n position: static;\n opacity: 1;\n pointer-events: auto;\n margin-bottom: 20px;\n padding: 10px;\n }\n .leader-card.president {\n flex-direction: row;\n }\n .leader-card.secretary {\n flex-direction: row;\n }\n .leader-card.active {\n opacity: 1;\n }\n .leader-image-container {\n flex: 0 0 50%;\n max-width: 150px;\n height: 150px;\n }\n .leader-info {\n padding: 5px;\n text-align: left;\n }\n .leader-title {\n font-size: clamp(18px, 3vw, 22px);\n }\n .leader-position {\n font-size: clamp(12px, 2vw, 14px);\n }\n .leader-text {\n font-size: clamp(12px, 2vw, 14px);\n line-height: 1.5;\n }\n .leadership-dots {\n display: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header\">\n <h3 class=\"section-title\">Our Esteemed Leadership<\/h3>\n <\/section> \n <section class=\"leadership-section\">\n <div class=\"leadership-container\">\n <div class=\"leader-card president active\">\n <div class=\"leader-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/Bp-Peter-Paul-Saldanha-2-958x1347-1-1.jpg\" alt=\"Most Rev. Dr. Peter Paul Saldanha, President & Bishop of Mangalore\" class=\"leader-image\" loading=\"lazy\">\n <\/div>\n <div class=\"leader-info\">\n <h4 class=\"leader-title\">Most Rev. Dr. Peter Paul Saldanha<\/h4>\n <p class=\"leader-position\">President & Bishop of Mangalore<\/p>\n <p class=\"leader-text\">Most Rev. Dr. Peter Paul Saldanha provides visionary leadership to the Catholic Board of Education, guiding its mission to foster holistic education rooted in moral and spiritual values. His dedication ensures our institutions nurture compassionate, capable individuals ready to contribute to society.<\/p>\n <\/div>\n <\/div>\n <div class=\"leader-card secretary\">\n <div class=\"leader-info\">\n <h4 class=\"leader-title\">Rev. Fr. Praveen Leo Lasrado<\/h4>\n <p class=\"leader-position\">Secretary<\/p>\n <p class=\"leader-text\">Rev. Fr. Praveen Leo Lasrado oversees the operational excellence of our institutions. He ensures the seamless execution of educational initiatives, fostering an environment where students and faculty thrive. His dedication drives the board’s commitment to quality education and community upliftment.<\/p>\n <\/div>\n <div class=\"leader-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/05\/secretary.jpg\" alt=\"Rev. Fr. Praveen Leo Lasrado, Secretary of Catholic Board of Education\" class=\"leader-image\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"leadership-dots\">\n <div class=\"leadership-dot active\" tabindex=\"0\" aria-label=\"Show President & Bishop Profile\"><\/div>\n <div class=\"leadership-dot\" tabindex=\"0\" aria-label=\"Show Secretary Profile\"><\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n const leadershipDots = document.querySelectorAll('.leadership-dot');\n const leaderCards = document.querySelectorAll('.leader-card');\n let currentLeader = 0;\n\n function updateLeadershipSlider(index) {\n leadershipDots.forEach(d => d.classList.remove('active'));\n leaderCards.forEach(l => l.classList.remove('active'));\n leadershipDots[index].classList.add('active');\n leaderCards[index].classList.add('active');\n currentLeader = index;\n }\n\n leadershipDots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n clearInterval(leadershipAutoRotate);\n currentLeader = index;\n updateLeadershipSlider(index);\n setTimeout(() => {\n leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n }, 10000);\n });\n dot.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n clearInterval(leadershipAutoRotate);\n currentLeader = index;\n updateLeadershipSlider(index);\n setTimeout(() => {\n leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n }, 10000);\n }\n });\n });\n\n function leadershipRotate() {\n currentLeader = (currentLeader + 1) % leaderCards.length;\n updateLeadershipSlider(currentLeader);\n }\n\n let leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n\n window.addEventListener('resize', () => {\n clearInterval(leadershipAutoRotate);\n leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <style>\n :root {\n --primary-color: #F5F5DC;\n --secondary-color: #4A2C2A;\n --accent-color: #4A2C2A;\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n .foundation-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .vision-mission-container {\n max-width: 1300px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 60px;\n }\n\n .vision-block, .mission-block {\n background: #ffffff;\n border-radius: 12px;\n padding: 0;\n text-align: center;\n transition: all 0.4s ease;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .vision-block:hover, .mission-block:hover {\n transform: translateY(-10px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .vision-image, .mission-image {\n width: 100%;\n height: 150px;\n object-fit: contain;\n border-radius: 12px 12px 0 0;\n background-color: #f8f9fa;\n }\n\n .vision-block:hover .vision-image, .mission-block:hover .mission-image {\n transform: scale(1.05);\n }\n\n .card-content {\n padding: 30px 25px;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .vision-title, .mission-title {\n display: none;\n }\n\n .vision-text, .mission-text {\n font-size: 18px;\n line-height: 1.8;\n color: var(--text-medium);\n font-weight: 400;\n text-transform: none;\n text-align: center;\n }\n\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n .foundation-section {\n padding: 20px 10px;\n }\n .vision-mission-container {\n display: block;\n position: relative;\n height: auto;\n overflow: visible;\n padding: 0 10px;\n }\n .vision-block, .mission-block {\n position: static;\n width: 100%;\n opacity: 1;\n pointer-events: auto;\n margin-bottom: 20px;\n display: block;\n }\n .vision-image, .mission-image {\n height: 200px;\n object-fit: contain;\n background-color: #f8f9fa;\n }\n .card-content {\n padding: 20px 15px;\n }\n .vision-title, .mission-title {\n display: none;\n }\n .vision-text, .mission-text {\n font-size: 16px;\n text-align: left;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header\">\n <h3 class=\"section-title\">Our Guiding Principles<\/h3>\n <\/section>\n <section class=\"foundation-section\">\n <div class=\"vision-mission-container\">\n <div class=\"vision-block active\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-25-at-11.37.21_82ed8e97.jpg\" alt=\"Vision\" class=\"vision-image\">\n <div class=\"card-content\">\n <h4 class=\"vision-title\">Vision<\/h4>\n <p class=\"vision-text\">An enlightened society for a fuller life, where education empowers individuals to live with purpose, integrity, and compassion.<\/p>\n <\/div>\n <\/div>\n <div class=\"mission-block\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-25-at-11.37.34_9ac0d0a8.jpg\" alt=\"Mission\" class=\"mission-image\">\n <div class=\"card-content\">\n <h4 class=\"mission-title\">Mission<\/h4>\n <p class=\"mission-text\">Gearing up our education apostolate through moral and spiritual values, making it life-enhancing, especially for the poor and marginalized, by fostering holistic development and opportunity.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script defer>\n \/\/ Mobile animation removed - both cards now display statically\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <style>\n :root {\n --primary-color: #F5F5DC;\n --secondary-color: #4A2C2A;\n --accent-color: #4A2C2A;\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n .slider-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .slider-container {\n width: 100%;\n margin: 0 auto;\n overflow: hidden;\n position: relative;\n touch-action: pan-y;\n }\n\n .slider-track {\n display: flex;\n gap: 1px;\n animation: slide 35s linear infinite;\n width: calc((300px + 20px) * 15);\n transition: transform 0.3s ease;\n }\n\n .slider-item {\n flex: 0 0 300px;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .slider-item img {\n max-width: 100%;\n max-height: 90%;\n object-fit: contain;\n border-radius: 50%;\n border: 5px solid #ffffff;\n background: transparent;\n }\n\n .slider-container:hover .slider-track {\n animation-play-state: paused;\n }\n\n @keyframes slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(calc(-320px * 7.5)); }\n }\n\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n .slider-section {\n padding: 15px 10px;\n }\n .slider-container {\n width: 100%;\n }\n .slider-item {\n flex: 0 260px;\n height: 160px;\n }\n .slider-track {\n width: calc((260px + 20px) * 15);\n }\n @keyframes slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(calc(-280px * 7.5)); }\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .slider-track {\n animation: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header\">\n <h3 class=\"section-title\">Our Educational Network<\/h3>\n <\/section>\n <section class=\"slider-section\">\n <div class=\"slider-container\">\n <div class=\"slider-track\">\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/14.png\" alt=\"Institution Logo 1\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/13.png\" alt=\"Institution Logo 2\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/12.png\" alt=\"Institution Logo 3\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/11.png\" alt=\"Institution Logo 4\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/10.png\" alt=\"Institution Logo 5\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/9.png\" alt=\"Institution Logo 6\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/8.png\" alt=\"Institution Logo 7\" loading=\"lazy\"><\/div>\n \n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/6.png\" alt=\"Institution Logo 9\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/5.png\" alt=\"Institution Logo 10\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/4.png\" alt=\"Institution Logo 11\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/3.png\" alt=\"Institution Logo 12\" loading=\"l\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/2.png\" alt=\"Institution Logo 13\" loading=\"la\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/1.png\" alt=\"Institution Logo 14\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/St-Alo.jpg\" alt=\"St. Aloysius Institution Logo\" loading=\"loading=\"lazy\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n const sliderContainer = document.querySelector('.slider-container');\n const sliderTrack = document.querySelector('.slider-track');\n let startX = 0;\n let currentTranslate = 0;\n let prevTranslate = 0;\n let isDragging = false;\n let velocity = 0;\n let lastMoveTime = 0;\n let totalItems = 15;\n\n function updateItemWidth() {\n const firstItem = document.querySelector('.slider-item');\n if (firstItem) {\n const style = window.getComputedStyle(firstItem);\n const width = parseFloat(style.width);\n const gap = 20;\n itemWidth = width + gap;\n sliderTrack.style.width = `calc((${width}px + ${gap}px) * ${totalItems})`;\n } else {\n itemWidth = window.innerWidth <= 767 ? 280 : 320;\n }\n }\n\n let itemWidth;\n updateItemWidth();\n window.addEventListener('resize', updateItemWidth);\n\n sliderContainer.addEventListener('touchstart', (e) => {\n startX = e.touches[0].clientX;\n isDragging = true;\n sliderTrack.style.animationPlayState = 'paused';\n prevTranslate = currentTranslate;\n velocity = 0;\n lastMoveTime = Date.now();\n });\n\n sliderContainer.addEventListener('touchmove', (e) => {\n if (!isDragging) return;\n const currentX = e.touches[0].clientX;\n const diffX = currentX - startX;\n const currentTime = Date.now();\n const timeDelta = currentTime - lastMoveTime;\n\n if (timeDelta > 0) {\n velocity = diffX \/ timeDelta;\n }\n\n currentTranslate = prevTranslate + diffX;\n sliderTrack.style.transform = `translateX(${currentTranslate}px)`;\n sliderTrack.style.transition = 'none';\n\n lastMoveTime = currentTime;\n });\n\n sliderContainer.addEventListener('touchend', () => {\n if (!isDragging) return;\n isDragging = false;\n\n const friction = 0.95;\n let momentum = velocity * 150;\n currentTranslate += momentum;\n\n const containerWidth = sliderContainer.offsetWidth;\n const trackWidth = itemWidth * totalItems;\n const maxTranslate = 0;\n const minTranslate = -(trackWidth - containerWidth);\n\n if (currentTranslate > maxTranslate) {\n currentTranslate = maxTranslate;\n } else if (currentTranslate < minTranslate) {\n currentTranslate = minTranslate;\n }\n\n const nearestItem = Math.round(currentTranslate \/ itemWidth);\n currentTranslate = nearestItem * itemWidth;\n\n sliderTrack.style.transform = `translateX(${currentTranslate}px)`;\n sliderTrack.style.transition = 'transform 0.3s ease-out';\n\n setTimeout(() => {\n if (!isDragging) {\n sliderTrack.style.animationPlayState = 'running';\n }\n }, 2000);\n });\n\n sliderContainer.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n e.preventDefault();\n const direction = e.key === 'ArrowRight' ? -1 : 1;\n currentTranslate += direction * itemWidth;\n const containerWidth = sliderContainer.offsetWidth;\n const trackWidth = itemWidth * totalItems;\n const maxTranslate = 0;\n const minTranslate = -(trackWidth - containerWidth);\n if (currentTranslate > maxTranslate) currentTranslate = maxTranslate;\n if (currentTranslate < minTranslate) currentTranslate = minTranslate;\n sliderTrack.style.transform = `translateX(${currentTranslate}px)`;\n sliderTrack.style.transition = 'transform 0.3s ease';\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Transformative Impact<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\" onload=\"this.onload=null;this.rel='stylesheet'\">\n <noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <\/noscript>\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-light: #F8EDEB; \/* Slightly lighter for better contrast *\/\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n line-height: 1.8;\n color: var(--text-medium);\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes headingFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Uniform Section Styles *\/\n .section-header {\n padding: 20px 20px 10px;\n text-align: left; \/* Left-align section header *\/\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: var(--inline-block, inline-block !important);\n margin-bottom: 15px;\n color: var(--accent-color, #000);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n opacity: 0;\n animation: headingFadeIn 0.8s ease-out forwards;\n }\n\n .section-title::after {\n content: var(--content, '');\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: calc(60px, 60px);\n height: calc(4px, 4px);\n background: var(--background, var(--accent-color));\n border-radius: calc(0px, 0px);\n }\n\n \/* Stats Section *\/\n .stats-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .stats-container {\n max-width: 1300px;\n margin: 0 auto;\n position: relative;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: nowrap;\n gap: 20px;\n padding: 20px 0;\n overflow-x: auto;\n }\n\n .stat-item {\n background: #ffffff;\n border-radius: 12px;\n padding: 25px;\n text-align: center;\n transition: all 0.4s ease;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n min-width: 200px;\n opacity: 0;\n transform: translateY(20px);\n }\n\n .stat-item.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n .stat-item:hover {\n transform: translateY(-10px) scale(1.05);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .stat-number {\n font-size: 50px;\n font-weight: 700;\n margin-bottom: 15px;\n font-family: 'Roboto', sans-serif;\n color: var(--accent-color);\n transition: all 0.3s ease;\n }\n\n .stat-label {\n font-size: 17px;\n color: var(--text-medium);\n letter-spacing: 1.5px;\n font-weight: 400;\n font-family: 'Roboto', sans-serif;\n text-transform: none;\n text-align: center;\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n\n .stats-section {\n padding: 15px 0;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n position: relative;\n height: auto;\n overflow-x: auto;\n padding: 0;\n margin: 0;\n gap: 90px;\n }\n\n .stat-item {\n position: static;\n min-width: 130px;\n opacity: 1;\n pointer-events: auto;\n transition: opacity 1s ease;\n background-color: var(--primary-color);\n padding: 15px;\n margin-bottom: 10px;\n display: none;\n }\n\n .stat-item.active {\n display: block;\n }\n\n .stat-number {\n font-size: 36px;\n }\n\n .stat-label {\n font-size: 14px;\n margin-top: 5px;\n text-align: center;\n }\n }\n\n \/* Tablet (min-width: 768px and max-width: 1024px) *\/\n @media (min-width: 768px) and (max-width: 1024px) {\n .stats-section {\n padding: 20px 20px;\n }\n\n .stats-grid.transformative {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n gap: 20px;\n overflow-x: auto;\n padding: 20px 0;\n position: static;\n height: auto;\n }\n\n .stat-item {\n position: static;\n min-width: 180px;\n opacity: 1;\n transform: translateY(0);\n transition: all 0.4s ease;\n background: #ffffff;\n padding: 25px;\n margin-bottom: 0;\n display: block;\n }\n\n .stat-item.active {\n opacity: 1;\n display: block;\n }\n\n .stat-number {\n font-size: 50px;\n }\n\n .stat-label {\n font-size: 17px;\n text-align: center;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .stat-item {\n animation: none;\n transition: none;\n }\n\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\" style=\"text-align: center;\">Transformative Impact<\/h3>\n\n <\/section>\n\n <section class=\"stats-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"stats-container\">\n <div class=\"stats-grid transformative\">\n <div class=\"stat-item active\">\n <div class=\"stat-number\">56<\/div>\n <div class=\"stat-label\">Kannada medium schools<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">36<\/div>\n <div class=\"stat-label\">English medium schools<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">4<\/div>\n <div class=\"stat-label\">CBSE schools<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">10<\/div>\n <div class=\"stat-label\">Pre-university colleges<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">5<\/div>\n <div class=\"stat-label\">Degree colleges<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Stats animation on scroll\n const statItems = document.querySelectorAll('.stat-item');\n if (statItems.length > 0) {\n const statObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n const countElement = entry.target.querySelector('.stat-number');\n if (countElement && countElement.getAttribute('data-count')) {\n const finalValue = parseInt(countElement.getAttribute('data-count'));\n const hasPlus = countElement.getAttribute('data-count').includes('+');\n let startValue = 0;\n let duration = 1500;\n let counter = setInterval(function() {\n startValue += Math.ceil(finalValue \/ (duration \/ 40));\n if (startValue >= finalValue) {\n countElement.textContent = finalValue + (hasPlus ? '+' : '');\n clearInterval(counter);\n } else {\n countElement.textContent = startValue + (hasPlus ? '+' : '');\n }\n }, 40);\n }\n statObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px 100px 0px' });\n \n statItems.forEach(item => statObserver.observe(item));\n }\n\n \/\/ Stats slider for mobile\n if (window.innerWidth <= 767) {\n const statsGrids = document.querySelectorAll('.stats-grid');\n statsGrids.forEach(grid => {\n const statItems = grid.querySelectorAll('.stat-item');\n let currentStat = 0;\n\n function updateStatsSlider(index) {\n statItems.forEach(item => {\n item.classList.remove('active');\n item.style.display = 'none';\n });\n statItems[index].classList.add('active');\n statItems[index].style.display = 'block';\n currentStat = index;\n }\n\n updateStatsSlider(0);\n\n setInterval(() => {\n currentStat = (currentStat + 1) % statItems.length;\n updateStatsSlider(currentStat);\n }, 6000);\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\n <title>Expansive Reach - Catholic Board of Education<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\" onload=\"this.onload=null;this.rel='stylesheet'\">\n <noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <\/noscript>\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-medium: #333333;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n line-height: 1.8;\n color: var(--text-medium);\n background: var(--primary-color);\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes headingFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Section Header *\/\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n opacity: 0;\n animation: headingFadeIn 0.8s ease-out forwards;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n \/* Stats Section *\/\n .stats-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .stats-container {\n max-width: 1300px;\n margin: 0 auto;\n position: relative;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: nowrap;\n gap: 20px;\n padding: 20px 0;\n overflow-x: auto;\n }\n\n .stat-item {\n background: #ffffff;\n border-radius: 12px;\n padding: 25px;\n text-align: center;\n transition: all 0.4s ease;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n min-width: 200px;\n opacity: 0;\n transform: translateY(20px);\n }\n\n .stat-item.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n .stat-item:hover {\n transform: translateY(-10px) scale(1.05);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .stat-number {\n font-size: 50px;\n font-weight: 700;\n margin-bottom: 15px;\n font-family: 'Roboto', sans-serif;\n color: var(--accent-color);\n transition: all 0.3s ease;\n }\n\n .stat-label {\n font-size: 17px;\n color: var(--text-medium);\n letter-spacing: 1.5px;\n font-weight: 400;\n font-family: 'Roboto', sans-serif;\n text-transform: none;\n text-align: center;\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n\n .stats-section {\n padding: 15px 0;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n position: relative;\n height: auto;\n overflow-x: auto;\n padding: 0;\n margin: 0;\n gap: 90px;\n }\n\n .stat-item {\n position: static;\n min-width: 13px;\n opacity: 1;\n pointer-events: auto;\n transition: opacity 1s ease;\n background-color: var(--primary-color);\n padding: 15px;\n margin-bottom: 10px;\n display: block;\n }\n\n .stat-item.active {\n display: block;\n }\n\n .stat-number {\n font-size: 36px;\n }\n\n .stat-label {\n font-size: 14px;\n margin-top: 5px;\n text-align: center;\n }\n }\n\n \/* Tablet (min-width: 768px and max-width: 1024px) *\/\n @media (min-width: 768px) and (max-width: 1024px) {\n .stats-section {\n padding: 20px 20px;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n gap: 20px;\n overflow-x: auto;\n padding: 20px 0;\n position: static;\n height: auto;\n }\n\n .stat-item {\n position: static;\n min-width: 180px;\n opacity: 1;\n transform: translateY(0);\n transition: all 0.4s ease;\n background: #ffffff;\n padding: 25px;\n margin-bottom: 0;\n display: block;\n }\n\n .stat-item.active {\n opacity: 1;\n display: block;\n }\n\n .stat-number {\n font-size: 50px;\n }\n\n .stat-label {\n font-size: 17px;\n text-align: center;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .stat-item {\n animation: none;\n transition: none;\n }\n\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n\n \/* No-JS Fallback *\/\n noscript {\n .stat-item {\n opacity: 1 !important;\n position: static !important;\n margin-bottom: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"page-container\">\n \n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\">Our Expansive Reach<\/h3>\n <\/section>\n\n <section class=\"stats-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"stats-container\">\n <div class=\"stats-grid expansive\">\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"100+\">+<\/div>\n <div class=\"stat-label\">Institutions<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"40000+\">+<\/div>\n <div class=\"stat-label\">Students<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"2000+\">+<\/div>\n <div class=\"stat-label\">Faculties<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"50+\">+<\/div>\n <div class=\"stat-label\">Locations<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Stats animation on scroll\n const statItems = document.querySelectorAll('.stat-item');\n if (statItems.length > 0) {\n const statObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n const countElement = entry.target.querySelector('.stat-number');\n if (countElement && countElement.getAttribute('data-count')) {\n const finalValue = parseInt(countElement.getAttribute('data-count'));\n const hasPlus = countElement.getAttribute('data-count').includes('+');\n let startValue = 0;\n let duration = 1500;\n let counter = setInterval(function() {\n startValue += Math.ceil(finalValue \/ (duration \/ 40));\n if (startValue >= finalValue) {\n countElement.textContent = finalValue + (hasPlus ? '+' : '');\n clearInterval(counter);\n } else {\n countElement.textContent = startValue + (hasPlus ? '+' : '');\n }\n }, 40);\n }\n statObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px 100px 0px' });\n \n statItems.forEach(item => statObserver.observe(item));\n }\n\n \/\/ Stats slider for mobile\n if (window.innerWidth <= 767) {\n const statsGrids = document.querySelectorAll('.stats-grid');\n statsGrids.forEach(grid => {\n const statItems = grid.querySelectorAll('.stat-item');\n let currentStat = 0;\n\n function updateStatsSlider(index) {\n statItems.forEach(item => {\n item.classList.remove('active');\n item.style.display = 'none';\n });\n statItems[index].classList.add('active');\n statItems[index].style.display = 'block';\n currentStat = index;\n }\n\n updateStatsSlider(0);\n\n setInterval(() => {\n currentStat = (currentStat + 1) % statItems.length;\n updateStatsSlider(currentStat);\n }, 6000);\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\n <meta name=\"description\" content=\"The Catholic Board of Education, Mangalore, fosters holistic education rooted in moral and spiritual values across 100+ institutions.\">\n <meta name=\"keywords\" content=\"Catholic Board of Education, Mangalore, holistic education, moral values, schools, colleges\">\n <title>Catholic Board of Education<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\" onload=\"this.onload=null;this.rel='stylesheet'\">\n <noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <\/noscript>\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n line-height: 1.8;\n overflow-x: hidden;\n color: var(--text-medium);\n background: url('https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-02-201650.png') no-repeat center center fixed;\n background-size: cover;\n z-index: -1;\n }\n\n \/* Main container *\/\n .page-container {\n width: 100%;\n background: var(--primary-color);\n padding: 5px 0;\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes headingFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes activitiesFade {\n 0%, 45% { opacity: 1; pointer-events: auto; }\n 50%, 95% { opacity: 0; pointer-events: none; }\n 100% { opacity: 1; pointer-events: auto; }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Uniform Section Styles *\/\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n opacity: 0;\n animation: headingFadeIn 0.8s ease-out forwards;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n \/* Education Section *\/\n .education-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .education-container {\n max-width: 100%;\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: 40px;\n background: #ffffff;\n border-radius: 12px;\n padding: 30px;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n }\n\n .education-container:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .education-image-container {\n flex: 0 0 400px;\n height: 350px;\n overflow: hidden;\n border-radius: 8px;\n }\n\n .education-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n\n .education-container:hover .education-image {\n transform: scale(1.05);\n }\n\n .education-info {\n flex: 1;\n padding: 20px;\n color: var(--text-medium);\n }\n\n .education-title {\n font-weight: 600;\n font-size: clamp(22px, 3vw, 28px);\n font-family: 'Playfair Display', 'Georgia', serif;\n line-height: 1.4;\n margin-bottom: 15px;\n color: var(--accent-color);\n }\n\n .education-text {\n font-size: 18px;\n line-height: 1.9;\n color: var(--text-medium);\n margin-bottom: 15px;\n text-align: left;\n }\n\n \/* Activities Section *\/\n .activities-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .activities-container {\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n min-height: 400px;\n }\n\n .activity-card {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 40px;\n background: #ffffff;\n border-radius: 12px;\n padding: 30px;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n transition: all 0.3s ease;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n .activity-card.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n .activity-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .activity-image-container {\n flex: 100px 100px 400px;\n height: 350px;\n overflow: hidden;\n border-radius: 8px;\n }\n\n .activity-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n\n .activity-card:hover .activity-image {\n transform: scale(1.05);\n }\n\n .activity-info {\n flex: 1;\n padding: 20px;\n color: var(--text-medium);\n }\n\n .activity-title {\n font-weight: 600;\n font-size: clamp(22px, 3vw, 28px);\n font-family: 'Playfair Display', 'Georgia', serif;\n line-height: 1.4;\n margin-bottom: 15px;\n color: var(--accent-color);\n }\n\n .activity-text {\n font-size: 18px;\n line-height: 1.9;\n color: var(--text-medium);\n text-align: left;\n }\n\n .activity-dots {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 150px;\n position: absolute;\n bottom: 30px;\n left: 0;\n right: 0;\n z-index: 10;\n }\n\n .activity-dot {\n width: 16px;\n height: 16px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n }\n\n .activity-dot:hover,\n .activity-dot:focus {\n background-color: rgba(255, 255, 255, 0.8);\n outline: none;\n }\n\n .activity-dot.active {\n background-color: var(--accent-color);\n transform: scale(1.2);\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n \/* Section Header *\/\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n\n \/* Academic Excellence *\/\n .education-section {\n padding: 15px 10px;\n }\n .education-container {\n flex-direction: column;\n gap: 20px;\n }\n .education-image-container {\n width: 100%;\n max-width: 400px;\n height: 200px;\n }\n .education-info {\n text-align: left;\n padding: 10px;\n }\n .education-title {\n font-size: clamp(18px, 3vw, 22px);\n }\n .education-text {\n font-size: 15px;\n text-align: left;\n }\n\n \/* Holistic Development *\/\n .activities-section {\n padding: 15px 10px;\n }\n .activities-container {\n min-height: auto;\n }\n .activity-card {\n flex-direction: column;\n gap: 20px;\n padding: 20px;\n position: static;\n opacity: 1;\n pointer-events: auto;\n margin-bottom: 30px;\n display: none;\n }\n .activity-card.active {\n display: block;\n }\n .activity-image-container {\n width: 100%;\n max-width: 400px;\n height: 200px;\n }\n .activity-info {\n text-align: left;\n padding: 10px;\n }\n .activity-title {\n font-size: clamp(18px, 3vw, 22px);\n }\n .activity-text {\n font-size: 15px;\n text-align: left;\n }\n .activity-dots {\n position: static;\n margin-top: 30px;\n display: flex;\n }\n }\n\n \/* Tablet (min-width: 768px and max-width: 1024px) *\/\n @media (min-width: 768px) and (max-width: 1024px) {\n \/* Academic Excellence *\/\n .education-section {\n padding: 20px 20px;\n }\n .education-container {\n flex-direction: column;\n gap: 20px;\n }\n .education-image-container {\n width: 100%;\n max-width: 400px;\n height: 250px;\n }\n\n \/* Holistic Development *\/\n .activities-section {\n padding: 20px 20px;\n }\n .activity-image-container {\n flex: 0 0 350px;\n height: 300px;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .activity-card, .animate-on-scroll {\n animation: none;\n transition: none;\n }\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n\n \/* No-JS Fallback *\/\n noscript {\n .activity-card {\n opacity: 1 !important;\n position: static !important;\n margin-bottom: 20px;\n }\n .activity-dots {\n display: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"page-container\">\n \n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\">Academic Excellence<\/h3>\n <\/section>\n\n <section class=\"education-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"education-container\">\n <div class=\"education-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/group-of-students-studying-book-at-classroom.webp\" alt=\"Students engaged in a classroom learning activity\" class=\"education-image\" loading=\"lazy\">\n <\/div>\n <div class=\"education-info\">\n <h4 class=\"education-title\">Academic Excellence<\/h4>\n <p class=\"education-text\">Our institutions deliver high-quality education that seamlessly integrates academic excellence with holistic development, preparing students for success in a dynamic, rapidly evolving world. We emphasize a curriculum that fosters critical thinking, creativity, and ethical decision-making, ensuring students are equipped with the skills and values needed for future challenges. Through dedicated faculty and innovative teaching methods, we create an environment where every student can thrive, nurturing their intellectual and personal growth.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\">Holistic Development<\/h3>\n <\/section>\n\n <section class=\"activities-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"activities-container\">\n <div class=\"activity-card active\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/chess-scaled.jpg\" alt=\"Students playing chess in a school competition\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Chess<\/h4>\n <p class=\"activity-text\">Chess classes sharpen strategic thinking and problem-solving skills. Students learn patience, focus, and planning through engaging matches. Our expert coaches guide players of all levels to excel. Tournaments foster teamwork and competitive spirit. Chess builds confidence and mental agility.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/eastern-dance-scaled.jpg\" alt=\"Students performing a cultural dance\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Dance<\/h4>\n <p class=\"activity-text\">Dance classes encourage creativity and self-expression through movement. Students explore various styles, from classical to contemporary. Our instructors nurture talent and coordination. Performances boost confidence and cultural appreciation. Dance promotes physical fitness and emotional well-being.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/singing-scaled.jpg\" alt=\"Students singing in a choir performance\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Singing<\/h4>\n <p class=\"activity-text\">Singing lessons enhance vocal skills and musicality. Students learn techniques in pitch, rhythm, and harmony. Our choir programs foster collaboration and creativity. Performances build stage presence and confidence. Singing nurtures emotional expression and joy.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/karate-scaled.jpg\" alt=\"Students practicing karate in a training session\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Karate<\/h4>\n <p class=\"activity-text\">Karate training builds discipline, strength, and self-defense skills. Students develop focus and resilience through structured practice. Our experienced instructors ensure safe learning. Belt progression motivates growth and achievement. Karate instills confidence and respect.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/public-speaking-scaled.jpg\" alt=\"Student delivering a public speech at an event\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Public Speaking<\/h4>\n <p class=\"activity-text\">Public speaking classes enhance communication and confidence. Students learn to articulate ideas clearly and persuasively. Our workshops cover speech writing and delivery techniques. Competitions provide real-world experience. Public speaking prepares students for leadership roles.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/arts-scaled.jpg\" alt=\"Students creating art and crafts in a workshop\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Arts & Crafts<\/h4>\n <p class=\"activity-text\">Arts and crafts sessions spark creativity and fine motor skills. Students explore painting, sculpting, and design. Our instructors encourage originality and experimentation. Projects foster patience and pride in creation. Art enhances emotional and aesthetic growth.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/skating-scaled.jpg\" alt=\"Students roller skating during a training session\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Roller Skating<\/h4>\n <p class=\"activity-text\">Roller skating classes promote balance, coordination, and fitness. Students learn techniques in a fun, active environment. Our coaches ensure safety and skill development. Races and events build camaraderie and excitement. Skating boosts confidence and physical health.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/swimming-scaled.jpg\" alt=\"Students practicing swimming in a pool\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Swimming<\/h4>\n <p class=\"activity-text\">Swimming lessons teach essential water safety and techniques. Students build strength, endurance, and confidence in the pool. Our certified instructors provide personalized guidance. Competitions encourage goal-setting and teamwork. Swimming promotes lifelong fitness and safety.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/keyboard-musical-scaled.jpg\" alt=\"Student playing a keyboard in a music class\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Keyboard<\/h4>\n <p class=\"activity-text\">Keyboard classes develop musical skills and creativity. Students learn to play melodies and chords with expert guidance. Our lessons cater to all skill levels. Performances enhance stage presence and confidence. Keyboard playing fosters discipline and artistic expression.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"activity-dots\">\n <div class=\"activity-dot active\" tabindex=\"0\" aria-label=\"Show Chess Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Dance Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Singing Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Karate Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Public Speaking Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Arts & Crafts Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Roller Skating Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Swimming Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Keyboard Activity\"><\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Activities slider\n const activityDots = document.querySelectorAll('.activity-dot');\n const activityCards = document.querySelectorAll('.activity-card');\n let currentActivity = 0;\n\n function updateActivitySlider(index) {\n activityDots.forEach(d => d.classList.remove('active'));\n activityCards.forEach(c => {\n c.classList.remove('active');\n if (window.innerWidth <= 767) {\n c.style.display = 'none';\n } else {\n c.style.opacity = '0';\n c.style.pointerEvents = 'none';\n }\n });\n activityDots[index].classList.add('active');\n activityCards[index].classList.add('active');\n if (window.innerWidth <= 767) {\n activityCards[index].style.display = 'block';\n } else {\n activityCards[index].style.opacity = '1';\n activityCards[index].style.pointerEvents = 'auto';\n }\n currentActivity = index;\n }\n\n updateActivitySlider(0);\n\n activityDots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n clearInterval(activityAutoRotate);\n updateActivitySlider(index);\n setTimeout(() => {\n activityAutoRotate = setInterval(activityRotate, window.innerWidth <= 767 ? 6000 : 15000);\n }, 10000);\n });\n dot.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n clearInterval(activityAutoRotate);\n updateActivitySlider(index);\n setTimeout(() => {\n activityAutoRotate = setInterval(activityRotate, window.innerWidth <= 767 ? 6000 : 15000);\n }, 10000);\n }\n });\n });\n\n function activityRotate() {\n currentActivity = (currentActivity + 1) % activityCards.length;\n updateActivitySlider(currentActivity);\n }\n\n let activityAutoRotate = setInterval(activityRotate, window.innerWidth <= 767 ? 6000 : 15000);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CBE Mangalore – Loading Catholic Board of Education Diocese of Mangalore Banner Slider Our Esteemed Leadership Most Rev. Dr. Peter […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":479,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":1953,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/1953"}],"wp:attachment":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7,"date":"2025-03-16T15:56:43","date_gmt":"2025-03-16T15:56:43","guid":{"rendered":"https:\/\/cbemangalore.com\/?page_id=7"},"modified":"2026-04-10T04:53:16","modified_gmt":"2026-04-10T04:53:16","slug":"home","status":"publish","type":"page","link":"https:\/\/cbemangalore.com\/","title":{"rendered":"Catholic Board of Education"},"content":{"rendered":"\n\n\n\n \n \n CBE Mangalore – Loading<\/title>\n <style>\n \/* Loading Screen Styles *\/\n .loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #F5F5DC; \/* Beige background *\/\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n transition: opacity 0.5s ease, visibility 0.5s ease;\n overflow: hidden;\n }\n\n \/* Enhanced More Visible Sprinkle Effects *\/\n .loading-overlay::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n radial-gradient(circle at 15% 25%, rgba(63, 42, 29, 0.25) 2px, transparent 2px),\n radial-gradient(circle at 85% 15%, rgba(63, 42, 29, 0.22) 2.5px, transparent 2.5px),\n radial-gradient(circle at 45% 35%, rgba(63, 42, 29, 0.28) 1.8px, transparent 1.8px),\n radial-gradient(circle at 75% 65%, rgba(63, 42, 29, 0.20) 2.2px, transparent 2.2px),\n radial-gradient(circle at 25% 75%, rgba(63, 42, 29, 0.26) 2px, transparent 2px),\n radial-gradient(circle at 95% 85%, rgba(63, 42, 29, 0.18) 2.3px, transparent 2.3px),\n radial-gradient(circle at 5% 45%, rgba(63, 42, 29, 0.24) 1.9px, transparent 1.9px),\n radial-gradient(circle at 55% 85%, rgba(63, 42, 29, 0.27) 2.1px, transparent 2.1px),\n radial-gradient(circle at 35% 15%, rgba(63, 42, 29, 0.19) 2.4px, transparent 2.4px),\n radial-gradient(circle at 65% 45%, rgba(63, 42, 29, 0.30) 1.7px, transparent 1.7px);\n background-size: \n 120px 120px, 180px 180px, 95px 95px, 140px 140px, 110px 110px,\n 160px 160px, 85px 85px, 130px 130px, 170px 170px, 100px 100px;\n animation: sprinkleFloat 8s ease-in-out infinite;\n z-index: 0;\n }\n\n .loading-overlay::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n radial-gradient(circle at 20% 60%, rgba(63, 42, 29, 0.21) 2px, transparent 2px),\n radial-gradient(circle at 80% 40%, rgba(63, 42, 29, 0.23) 2.2px, transparent 2.2px),\n radial-gradient(circle at 40% 20%, rgba(63, 42, 29, 0.19) 1.9px, transparent 1.9px),\n radial-gradient(circle at 90% 70%, rgba(63, 42, 29, 0.25) 2.1px, transparent 2.1px),\n radial-gradient(circle at 10% 80%, rgba(63, 42, 29, 0.20) 2.3px, transparent 2.3px),\n radial-gradient(circle at 60% 10%, rgba(63, 42, 29, 0.28) 1.8px, transparent 1.8px),\n radial-gradient(circle at 30% 90%, rgba(63, 42, 29, 0.17) 2.4px, transparent 2.4px),\n radial-gradient(circle at 70% 30%, rgba(63, 42, 29, 0.24) 2px, transparent 2px);\n background-size: \n 150px 150px, 200px 200px, 75px 75px, 125px 125px,\n 175px 175px, 90px 90px, 160px 160px, 110px 110px;\n animation: sprinkleFloat2 10s ease-in-out infinite reverse;\n z-index: 0;\n }\n\n \/* Additional floating sprinkles layer *\/\n .sprinkle-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 0;\n }\n\n .sprinkle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: rgba(63, 42, 29, 0.35);\n border-radius: 50%;\n animation: floatSprinkle 6s ease-in-out infinite;\n box-shadow: 0 0 4px rgba(63, 42, 29, 0.2);\n }\n\n .sprinkle:nth-child(1) { top: 10%; left: 12%; animation-delay: 0s; }\n .sprinkle:nth-child(2) { top: 25%; left: 88%; animation-delay: 1s; }\n .sprinkle:nth-child(3) { top: 40%; left: 25%; animation-delay: 2s; }\n .sprinkle:nth-child(4) { top: 60%; left: 75%; animation-delay: 0.5s; }\n .sprinkle:nth-child(5) { top: 75%; left: 15%; animation-delay: 1.5s; }\n .sprinkle:nth-child(6) { top: 15%; left: 60%; animation-delay: 2.5s; }\n .sprinkle:nth-child(7) { top: 85%; left: 45%; animation-delay: 3s; }\n .sprinkle:nth-child(8) { top: 30%; left: 85%; animation-delay: 0.8s; }\n .sprinkle:nth-child(9) { top: 50%; left: 5%; animation-delay: 1.8s; }\n .sprinkle:nth-child(10) { top: 70%; left: 95%; animation-delay: 2.2s; }\n .sprinkle:nth-child(11) { top: 5%; left: 35%; animation-delay: 1.2s; }\n .sprinkle:nth-child(12) { top: 90%; left: 65%; animation-delay: 2.8s; }\n\n @keyframes sprinkleFloat {\n 0%, 100% { \n transform: translate(0, 0) rotate(0deg);\n opacity: 0.8;\n }\n 25% { \n transform: translate(5px, -3px) rotate(90deg);\n opacity: 1;\n }\n 50% { \n transform: translate(-3px, 5px) rotate(180deg);\n opacity: 0.6;\n }\n 75% { \n transform: translate(-5px, -2px) rotate(270deg);\n opacity: 0.9;\n }\n }\n\n @keyframes sprinkleFloat2 {\n 0%, 100% { \n transform: translate(0, 0) scale(1);\n opacity: 0.5;\n }\n 33% { \n transform: translate(-4px, 3px) scale(1.1);\n opacity: 0.8;\n }\n 66% { \n transform: translate(4px, -4px) scale(0.9);\n opacity: 0.6;\n }\n }\n\n @keyframes floatSprinkle {\n 0%, 100% { \n transform: translateY(0px) scale(1);\n opacity: 0.3;\n }\n 50% { \n transform: translateY(-8px) scale(1.2);\n opacity: 0.8;\n }\n }\n\n .loading-overlay.fade-out {\n opacity: 0;\n visibility: hidden;\n }\n\n \/* CBE Logo *\/\n .loading-logo {\n width: 120px;\n height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n z-index: 1;\n animation: logoFloat 3s ease-in-out infinite;\n filter: drop-shadow(0 4px 15px rgba(63, 42, 29, 0.3));\n position: relative;\n }\n\n .loading-logo::before {\n content: '';\n position: absolute;\n top: -10px;\n left: -10px;\n right: -10px;\n bottom: -10px;\n background: radial-gradient(circle, rgba(63, 42, 29, 0.1) 0%, transparent 70%);\n border-radius: 50%;\n animation: logoGlow 2s ease-in-out infinite alternate;\n z-index: -1;\n }\n\n .loading-logo img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n @keyframes logoFloat {\n 0%, 100% { \n transform: translateY(0px) scale(1);\n }\n 50% { \n transform: translateY(-8px) scale(1.05);\n }\n }\n\n @keyframes logoGlow {\n 0% { opacity: 0.3; transform: scale(1); }\n 100% { opacity: 0.6; transform: scale(1.1); }\n }\n\n \/* Loading Text *\/\n .loading-text {\n color: #3F2A1D; \/* Espresso brown *\/\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 10px;\n font-family: 'Georgia', serif;\n text-align: center;\n z-index: 1;\n opacity: 0;\n animation: textReveal 1.5s ease-in forwards;\n animation-delay: 0.3s;\n text-shadow: \n 0 0 10px rgba(63, 42, 29, 0.4),\n 0 2px 4px rgba(63, 42, 29, 0.2);\n position: relative;\n }\n\n .loading-text::before {\n content: '';\n position: absolute;\n top: -5px;\n left: -10px;\n right: -10px;\n bottom: -5px;\n background: linear-gradient(45deg, transparent, rgba(63, 42, 29, 0.05), transparent);\n border-radius: 8px;\n animation: textShimmer 3s ease-in-out infinite;\n z-index: -1;\n }\n\n .loading-subtext {\n color: #3F2A1D;\n font-size: 18px;\n font-weight: 400;\n font-family: 'Georgia', serif;\n text-align: center;\n z-index: 1;\n opacity: 0;\n animation: textReveal 1.5s ease-in forwards;\n animation-delay: 0.6s;\n text-shadow: 0 0 8px rgba(63, 42, 29, 0.3);\n }\n\n @keyframes textReveal {\n 0% { \n opacity: 0; \n transform: translateY(20px) scale(0.9);\n }\n 100% { \n opacity: 1; \n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes textShimmer {\n 0%, 100% { opacity: 0; transform: translateX(-100%); }\n 50% { opacity: 1; transform: translateX(100%); }\n }\n\n \/* Buffering Circle *\/\n .buffering-circle {\n width: 60px;\n height: 60px;\n margin: 20px auto;\n position: relative;\n z-index: 1;\n }\n\n .buffering-circle::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 4px solid rgba(63, 42, 29, 0.2);\n border-top: 4px solid #3F2A1D;\n border-radius: 50%;\n animation: bufferSpin 1s linear infinite;\n box-shadow: 0 0 15px rgba(63, 42, 29, 0.3);\n }\n\n .buffering-circle::after {\n content: '';\n position: absolute;\n top: 8px;\n left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n border: 2px solid transparent;\n border-bottom: 2px solid rgba(63, 42, 29, 0.4);\n border-radius: 50%;\n animation: bufferSpin 1.5s linear infinite reverse;\n }\n\n @keyframes bufferSpin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n .loading-bar {\n width: 240px;\n height: 6px;\n background: rgba(63, 42, 29, 0.15);\n margin-top: 24px;\n border-radius: 3px;\n overflow: hidden;\n z-index: 1;\n position: relative;\n box-shadow: \n 0 0 15px rgba(63, 42, 29, 0.2),\n inset 0 1px 3px rgba(63, 42, 29, 0.1);\n }\n\n .loading-bar::before {\n content: '';\n display: block;\n width: 35%;\n height: 100%;\n background: linear-gradient(90deg, \n rgba(63, 42, 29, 0.8) 0%, \n rgba(63, 42, 29, 1) 50%, \n rgba(63, 42, 29, 0.8) 100%);\n animation: loadBar 2s ease-in-out infinite;\n border-radius: 3px;\n box-shadow: 0 0 10px rgba(63, 42, 29, 0.4);\n position: relative;\n }\n\n .loading-bar::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, \n transparent 0%, \n rgba(255, 255, 255, 0.2) 50%, \n transparent 100%);\n animation: barShine 2s ease-in-out infinite;\n }\n\n @keyframes loadBar {\n 0% { transform: translateX(-100%); }\n 50% { transform: translateX(280%); }\n 100% { transform: translateX(280%); }\n }\n\n @keyframes barShine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(300%); }\n }\n\n \/* Content that will be shown after loading *\/\n .main-content {\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n\n .main-content.show {\n opacity: 1;\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n .loading-logo {\n width: 90px;\n height: 90px;\n }\n\n .loading-text {\n font-size: 24px;\n }\n\n .loading-subtext {\n font-size: 15px;\n }\n\n .loading-bar {\n width: 180px;\n height: 5px;\n }\n\n .sprinkle {\n width: 2.5px;\n height: 2.5px;\n }\n\n .buffering-circle {\n width: 50px;\n height: 50px;\n }\n }\n\n @media (max-width: 480px) {\n .loading-text {\n font-size: 20px;\n }\n\n .loading-subtext {\n font-size: 13px;\n }\n\n .loading-bar {\n width: 140px;\n }\n\n .sprinkle {\n width: 2px;\n height: 2px;\n }\n\n .buffering-circle {\n width: 40px;\n height: 40px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div id=\"loadingOverlay\" class=\"loading-overlay\">\n \n <div class=\"sprinkle-layer\">\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <div class=\"sprinkle\"><\/div>\n <\/div>\n\n \n <div class=\"loading-logo\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/CBE-2.png\" alt=\"CBE Mangalore Logo\" \/>\n <\/div>\n\n \n <div class=\"loading-text\">Catholic Board of Education<\/div>\n <div class=\"loading-subtext\">Diocese of Mangalore<\/div>\n\n \n <div class=\"buffering-circle\"><\/div>\n\n \n <div class=\"loading-bar\"><\/div>\n <\/div>\n\n <script>\n \/\/ Hide loading screen after 3 seconds\n window.addEventListener('load', function() {\n setTimeout(function() {\n const loadingOverlay = document.getElementById('loadingOverlay');\n const mainContent = document.querySelectorAll('.main-content');\n\n \/\/ Fade out loading screen\n loadingOverlay.classList.add('fade-out');\n\n \/\/ Show main content after loading screen fades\n setTimeout(function() {\n loadingOverlay.style.display = 'none';\n mainContent.forEach(content => {\n content.classList.add('show');\n });\n }, 500);\n }, 5000); \/\/ 5 seconds delay\n });\n\n \/\/ Handle logo loading error\n document.querySelector('.loading-logo img').onerror = function() {\n this.style.display = 'none';\n this.parentElement.innerHTML = '<div style=\"font-size: 40px; color: #3F2A1D; font-weight: bold;\">CBE<\/div>';\n };\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Banner Slider<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-light: #F8EDEB; \/* Slightly lighter for better contrast *\/\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n \/* Banner Slider *\/\n .banner-section {\n width: 100%;\n position: relative;\n overflow: hidden;\n min-height: 600px;\n }\n\n .banner-container {\n width: 100%;\n height: 100%;\n margin-top: 1%;\n position: relative;\n }\n\n .banner-card {\n width: 100%;\n height: 600px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n transition: opacity 1s ease-in-out;\n }\n\n .banner-card.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n .banner-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n\n .banner-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 0 20px;\n z-index: 10;\n }\n\n .banner-nav-button {\n background: rgba(0, 0, 0, 0.5);\n color: #fff;\n border: none;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n font-size: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n backdrop-filter: blur(5px);\n }\n\n .banner-nav-button:hover,\n .banner-nav-button:focus {\n background: rgba(0, 0, 0, 0.7);\n transform: scale(1.1);\n outline: none;\n }\n\n .banner-nav-button.prev i,\n .banner-nav-button.next i {\n font-size: 18px;\n }\n\n .banner-dots {\n display: flex;\n justify-content: center;\n gap: 15px;\n position: absolute;\n bottom: 30px;\n left: 0;\n right: 0;\n z-index: 10;\n }\n\n .banner-dot {\n width: 16px;\n height: 16px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n }\n\n .banner-dot:hover,\n .banner-dot:focus {\n background-color: rgba(255, 255, 255, 0.8);\n outline: none;\n }\n\n .banner-dot.active {\n background-color: var(--accent-color);\n transform: scale(1.2);\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Tablet (768px - 1024px) *\/\n @media (max-width: 1024px) {\n .banner-section {\n min-height: 500px;\n }\n .banner-card {\n height: 500px;\n }\n .banner-nav-button {\n width: 45px;\n height: 45px;\n font-size: 18px;\n }\n .banner-nav-button.prev i,\n .banner-nav-button.next i {\n font-size: 16px;\n }\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n .banner-section {\n min-height: 400px;\n }\n .banner-card {\n height: 400px;\n }\n .banner-nav-button {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n .banner-nav-button.prev i,\n .banner-nav-button.next i {\n font-size: 14px;\n }\n .banner-dots {\n bottom: 20px;\n gap: 10px;\n }\n .banner-dot {\n width: 14px;\n height: 14px;\n }\n }\n\n \/* Small mobile (max-width: 480px) *\/\n @media (max-width: 480px) {\n .banner-section {\n min-height: 300px;\n }\n .banner-card {\n height: 300px;\n }\n .banner-nav {\n padding: 0 10px;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .banner-card {\n animation: none;\n transition: none;\n }\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n\n \/* No-JS Fallback *\/\n .no-js .banner-card {\n opacity: 1 !important;\n position: static !important;\n margin-bottom: 20px;\n }\n .no-js .banner-dots {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"banner-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"banner-container\">\n <div class=\"banner-card active\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/4-1.jpg\" alt=\"Bishop addressing an educational event\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <div class=\"banner-card\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/07\/IMG_2013-1-scaled.jpg\" alt=\"Guru Vandana Award\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <div class=\"banner-card\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/stmarys4-1.jpg\" alt=\"Students at St. Mary's institution in a classroom\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <div class=\"banner-card\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/bishopmng.jpg\" alt=\"Bishop visiting an educational institution in Mangalore\" class=\"banner-image\" loading=\"lazy\">\n <\/div>\n <\/div>\n <div class=\"banner-nav\">\n <button class=\"banner-nav-button prev\" aria-label=\"Previous Banner\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n <button class=\"banner-nav-button next\" aria-label=\"Next Banner\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n <\/div>\n <div class=\"banner-dots\">\n <div class=\"banner-dot active\" tabindex=\"0\" aria-label=\"Show First Banner\"><\/div>\n <div class=\"banner-dot\" tabindex=\"0\" aria-label=\"Show Second Banner\"><\/div>\n <div class=\"banner-dot\" tabindex=\"0\" aria-label=\"Show Third Banner\"><\/div>\n <div class=\"banner-dot\" tabindex=\"0\" aria-label=\"Show Fourth Banner\"><\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Banner slider\n const bannerDots = document.querySelectorAll('.banner-dot');\n const bannerCards = document.querySelectorAll('.banner-card');\n const prevBannerButton = document.querySelector('.banner-nav-button.prev');\n const nextBannerButton = document.querySelector('.banner-nav-button.next');\n let currentBanner = 0;\n\n function updateBannerSlider(index) {\n bannerDots.forEach(d => d.classList.remove('active'));\n bannerCards.forEach(c => c.classList.remove('active'));\n \n if (bannerDots[index] && bannerCards[index]) {\n bannerDots[index].classList.add('active');\n bannerCards[index].classList.add('active');\n currentBanner = index;\n }\n }\n\n bannerDots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n clearInterval(bannerAutoRotate);\n updateBannerSlider(index);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n });\n dot.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n clearInterval(bannerAutoRotate);\n updateBannerSlider(index);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n }\n });\n });\n\n prevBannerButton.addEventListener('click', () => {\n clearInterval(bannerAutoRotate);\n currentBanner = (currentBanner - 1 + bannerCards.length) % bannerCards.length;\n updateBannerSlider(currentBanner);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n });\n\n nextBannerButton.addEventListener('click', () => {\n clearInterval(bannerAutoRotate);\n currentBanner = (currentBanner + 1) % bannerCards.length;\n updateBannerSlider(currentBanner);\n setTimeout(() => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n }, 10000);\n });\n\n function bannerRotate() {\n currentBanner = (currentBanner + 1) % bannerCards.length;\n updateBannerSlider(currentBanner);\n }\n\n let bannerAutoRotate = setInterval(bannerRotate, 8000);\n\n \/\/ Pause auto-rotation when user hovers over the banner\n const bannerSection = document.querySelector('.banner-section');\n bannerSection.addEventListener('mouseenter', () => {\n clearInterval(bannerAutoRotate);\n });\n\n bannerSection.addEventListener('mouseleave', () => {\n bannerAutoRotate = setInterval(bannerRotate, 8000);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <style>\n :root {\n --primary-color: #F5F5DC;\n --secondary-color: #4A2C2A;\n --accent-color: #4A2C2A;\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n overflow-x: hidden;\n }\n\n .section-header {\n padding: 40px 90px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 3px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n .leadership-section {\n padding: 25px 15px 15px;\n background: var(--primary-color);\n position: relative;\n width: 100%;\n }\n\n .leadership-container {\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n min-height: 250px;\n overflow: visible;\n padding-bottom: 30px;\n }\n\n .leader-card {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 20px;\n background: #ffffff;\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n transition: all 0.3s ease;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n .leader-card.active {\n opacity: 1;\n pointer-events: auto;\n position: relative;\n }\n\n .leader-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .leader-card.president {\n flex-direction: row;\n }\n\n .leader-card.secretary {\n flex-direction: row;\n }\n\n .leader-image-container {\n flex: 0 0 40%;\n max-width: 300px;\n height: 250px;\n overflow: hidden;\n border-radius: 8px;\n }\n\n .leader-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transition: transform 0.3s ease;\n }\n\n .leader-card:hover .leader-image {\n transform: scale(1.05);\n }\n\n .leader-info {\n flex: 1;\n padding: 15px;\n color: var(--text-medium);\n }\n\n .leader-title {\n font-weight: 600;\n font-size: clamp(22px, 2.5vw, 26px);\n font-family: 'Playfair Display', 'Georgia', serif;\n line-height: 1.4;\n margin-bottom: 10px;\n color: var(--accent-color);\n }\n\n .leader-position {\n font-size: clamp(14px, 2vw, 16px);\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n color: var(--text-medium);\n margin-bottom: 10px;\n line-height: 1.4;\n }\n\n .leader-text {\n font-size: clamp(14px, 1.8vw, 16px);\n line-height: 1.7;\n color: var(--text-medium);\n text-align: left;\n }\n\n .leadership-dots {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 20px;\n position: relative;\n z-index: 10;\n }\n\n .leadership-dot {\n width: 14px;\n height: 14px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n }\n\n .leadership-dot:hover,\n .leadership-dot:focus {\n background-color: rgba(255, 255, 255, 0.8);\n outline: none;\n }\n\n .leadership-dot.active {\n background-color: var(--accent-color);\n transform: scale(1.2);\n }\n\n @media (max-width: 1024px) {\n .leadership-section {\n padding: 20px 10px 50px;\n }\n .leadership-container {\n max-width: 95%;\n min-height: 350px;\n padding-bottom: 20px;\n }\n .leader-card {\n gap: 15px;\n padding: 15px;\n }\n .leader-image-container {\n flex: 0 0 35%;\n max-width: 250px;\n height: 200px;\n }\n .leader-info {\n padding: 10px;\n }\n .leader-title {\n font-size: clamp(20px, 2.5vw, 24px);\n }\n .leader-position {\n font-size: clamp(13px, 1.8vw, 15px);\n }\n .leader-text {\n font-size: clamp(13px, 1.8vw, 15px);\n line-height: 1.6;\n }\n .leadership-dots {\n gap: 10px;\n margin-top: 15px;\n }\n .leader-card.president {\n flex-direction: row;\n }\n .leader-card.secretary {\n flex-direction: row;\n }\n }\n\n @media (max-width: 599px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(20px, 4vw, 28px);\n }\n .leadership-section {\n padding: 15px 5px 40px;\n }\n .leadership-container {\n max-width: 100%;\n min-height: auto;\n }\n .leader-card {\n gap: 10px;\n position: static;\n opacity: 1;\n pointer-events: auto;\n margin-bottom: 20px;\n padding: 10px;\n }\n .leader-card.president {\n flex-direction: row;\n }\n .leader-card.secretary {\n flex-direction: row;\n }\n .leader-card.active {\n opacity: 1;\n }\n .leader-image-container {\n flex: 0 0 50%;\n max-width: 150px;\n height: 150px;\n }\n .leader-info {\n padding: 5px;\n text-align: left;\n }\n .leader-title {\n font-size: clamp(18px, 3vw, 22px);\n }\n .leader-position {\n font-size: clamp(12px, 2vw, 14px);\n }\n .leader-text {\n font-size: clamp(12px, 2vw, 14px);\n line-height: 1.5;\n }\n .leadership-dots {\n display: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header\">\n <h3 class=\"section-title\">Our Esteemed Leadership<\/h3>\n <\/section> \n <section class=\"leadership-section\">\n <div class=\"leadership-container\">\n <div class=\"leader-card president active\">\n <div class=\"leader-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/Bp-Peter-Paul-Saldanha-2-958x1347-1-1.jpg\" alt=\"Most Rev. Dr. Peter Paul Saldanha, President & Bishop of Mangalore\" class=\"leader-image\" loading=\"lazy\">\n <\/div>\n <div class=\"leader-info\">\n <h4 class=\"leader-title\">Most Rev. Dr. Peter Paul Saldanha<\/h4>\n <p class=\"leader-position\">President & Bishop of Mangalore<\/p>\n <p class=\"leader-text\">Most Rev. Dr. Peter Paul Saldanha provides visionary leadership to the Catholic Board of Education, guiding its mission to foster holistic education rooted in moral and spiritual values. His dedication ensures our institutions nurture compassionate, capable individuals ready to contribute to society.<\/p>\n <\/div>\n <\/div>\n <div class=\"leader-card secretary\">\n <div class=\"leader-info\">\n <h4 class=\"leader-title\">Rev. Fr. Praveen Leo Lasrado<\/h4>\n <p class=\"leader-position\">Secretary<\/p>\n <p class=\"leader-text\">Rev. Fr. Praveen Leo Lasrado oversees the operational excellence of our institutions. He ensures the seamless execution of educational initiatives, fostering an environment where students and faculty thrive. His dedication drives the board’s commitment to quality education and community upliftment.<\/p>\n <\/div>\n <div class=\"leader-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/05\/secretary.jpg\" alt=\"Rev. Fr. Praveen Leo Lasrado, Secretary of Catholic Board of Education\" class=\"leader-image\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"leadership-dots\">\n <div class=\"leadership-dot active\" tabindex=\"0\" aria-label=\"Show President & Bishop Profile\"><\/div>\n <div class=\"leadership-dot\" tabindex=\"0\" aria-label=\"Show Secretary Profile\"><\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n const leadershipDots = document.querySelectorAll('.leadership-dot');\n const leaderCards = document.querySelectorAll('.leader-card');\n let currentLeader = 0;\n\n function updateLeadershipSlider(index) {\n leadershipDots.forEach(d => d.classList.remove('active'));\n leaderCards.forEach(l => l.classList.remove('active'));\n leadershipDots[index].classList.add('active');\n leaderCards[index].classList.add('active');\n currentLeader = index;\n }\n\n leadershipDots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n clearInterval(leadershipAutoRotate);\n currentLeader = index;\n updateLeadershipSlider(index);\n setTimeout(() => {\n leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n }, 10000);\n });\n dot.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n clearInterval(leadershipAutoRotate);\n currentLeader = index;\n updateLeadershipSlider(index);\n setTimeout(() => {\n leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n }, 10000);\n }\n });\n });\n\n function leadershipRotate() {\n currentLeader = (currentLeader + 1) % leaderCards.length;\n updateLeadershipSlider(currentLeader);\n }\n\n let leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n\n window.addEventListener('resize', () => {\n clearInterval(leadershipAutoRotate);\n leadershipAutoRotate = setInterval(leadershipRotate, window.innerWidth > 1024 ? 5000 : 15000);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <style>\n :root {\n --primary-color: #F5F5DC;\n --secondary-color: #4A2C2A;\n --accent-color: #4A2C2A;\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n .foundation-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .vision-mission-container {\n max-width: 1300px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 60px;\n }\n\n .vision-block, .mission-block {\n background: #ffffff;\n border-radius: 12px;\n padding: 0;\n text-align: center;\n transition: all 0.4s ease;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .vision-block:hover, .mission-block:hover {\n transform: translateY(-10px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .vision-image, .mission-image {\n width: 100%;\n height: 150px;\n object-fit: contain;\n border-radius: 12px 12px 0 0;\n background-color: #f8f9fa;\n }\n\n .vision-block:hover .vision-image, .mission-block:hover .mission-image {\n transform: scale(1.05);\n }\n\n .card-content {\n padding: 30px 25px;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .vision-title, .mission-title {\n display: none;\n }\n\n .vision-text, .mission-text {\n font-size: 18px;\n line-height: 1.8;\n color: var(--text-medium);\n font-weight: 400;\n text-transform: none;\n text-align: center;\n }\n\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n .foundation-section {\n padding: 20px 10px;\n }\n .vision-mission-container {\n display: block;\n position: relative;\n height: auto;\n overflow: visible;\n padding: 0 10px;\n }\n .vision-block, .mission-block {\n position: static;\n width: 100%;\n opacity: 1;\n pointer-events: auto;\n margin-bottom: 20px;\n display: block;\n }\n .vision-image, .mission-image {\n height: 200px;\n object-fit: contain;\n background-color: #f8f9fa;\n }\n .card-content {\n padding: 20px 15px;\n }\n .vision-title, .mission-title {\n display: none;\n }\n .vision-text, .mission-text {\n font-size: 16px;\n text-align: left;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header\">\n <h3 class=\"section-title\">Our Guiding Principles<\/h3>\n <\/section>\n <section class=\"foundation-section\">\n <div class=\"vision-mission-container\">\n <div class=\"vision-block active\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-25-at-11.37.21_82ed8e97.jpg\" alt=\"Vision\" class=\"vision-image\">\n <div class=\"card-content\">\n <h4 class=\"vision-title\">Vision<\/h4>\n <p class=\"vision-text\">An enlightened society for a fuller life, where education empowers individuals to live with purpose, integrity, and compassion.<\/p>\n <\/div>\n <\/div>\n <div class=\"mission-block\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-25-at-11.37.34_9ac0d0a8.jpg\" alt=\"Mission\" class=\"mission-image\">\n <div class=\"card-content\">\n <h4 class=\"mission-title\">Mission<\/h4>\n <p class=\"mission-text\">Gearing up our education apostolate through moral and spiritual values, making it life-enhancing, especially for the poor and marginalized, by fostering holistic development and opportunity.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script defer>\n \/\/ Mobile animation removed - both cards now display statically\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <style>\n :root {\n --primary-color: #F5F5DC;\n --secondary-color: #4A2C2A;\n --accent-color: #4A2C2A;\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n .slider-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .slider-container {\n width: 100%;\n margin: 0 auto;\n overflow: hidden;\n position: relative;\n touch-action: pan-y;\n }\n\n .slider-track {\n display: flex;\n gap: 1px;\n animation: slide 35s linear infinite;\n width: calc((300px + 20px) * 15);\n transition: transform 0.3s ease;\n }\n\n .slider-item {\n flex: 0 0 300px;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .slider-item img {\n max-width: 100%;\n max-height: 90%;\n object-fit: contain;\n border-radius: 50%;\n border: 5px solid #ffffff;\n background: transparent;\n }\n\n .slider-container:hover .slider-track {\n animation-play-state: paused;\n }\n\n @keyframes slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(calc(-320px * 7.5)); }\n }\n\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n .slider-section {\n padding: 15px 10px;\n }\n .slider-container {\n width: 100%;\n }\n .slider-item {\n flex: 0 260px;\n height: 160px;\n }\n .slider-track {\n width: calc((260px + 20px) * 15);\n }\n @keyframes slide {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(calc(-280px * 7.5)); }\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .slider-track {\n animation: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header\">\n <h3 class=\"section-title\">Our Educational Network<\/h3>\n <\/section>\n <section class=\"slider-section\">\n <div class=\"slider-container\">\n <div class=\"slider-track\">\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/14.png\" alt=\"Institution Logo 1\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/13.png\" alt=\"Institution Logo 2\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/12.png\" alt=\"Institution Logo 3\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/11.png\" alt=\"Institution Logo 4\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/10.png\" alt=\"Institution Logo 5\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/9.png\" alt=\"Institution Logo 6\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/8.png\" alt=\"Institution Logo 7\" loading=\"lazy\"><\/div>\n \n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/6.png\" alt=\"Institution Logo 9\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/5.png\" alt=\"Institution Logo 10\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/4.png\" alt=\"Institution Logo 11\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/3.png\" alt=\"Institution Logo 12\" loading=\"l\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/2.png\" alt=\"Institution Logo 13\" loading=\"la\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/1.png\" alt=\"Institution Logo 14\" loading=\"lazy\"><\/div>\n <div class=\"slider-item\"><img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/03\/St-Alo.jpg\" alt=\"St. Aloysius Institution Logo\" loading=\"loading=\"lazy\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n const sliderContainer = document.querySelector('.slider-container');\n const sliderTrack = document.querySelector('.slider-track');\n let startX = 0;\n let currentTranslate = 0;\n let prevTranslate = 0;\n let isDragging = false;\n let velocity = 0;\n let lastMoveTime = 0;\n let totalItems = 15;\n\n function updateItemWidth() {\n const firstItem = document.querySelector('.slider-item');\n if (firstItem) {\n const style = window.getComputedStyle(firstItem);\n const width = parseFloat(style.width);\n const gap = 20;\n itemWidth = width + gap;\n sliderTrack.style.width = `calc((${width}px + ${gap}px) * ${totalItems})`;\n } else {\n itemWidth = window.innerWidth <= 767 ? 280 : 320;\n }\n }\n\n let itemWidth;\n updateItemWidth();\n window.addEventListener('resize', updateItemWidth);\n\n sliderContainer.addEventListener('touchstart', (e) => {\n startX = e.touches[0].clientX;\n isDragging = true;\n sliderTrack.style.animationPlayState = 'paused';\n prevTranslate = currentTranslate;\n velocity = 0;\n lastMoveTime = Date.now();\n });\n\n sliderContainer.addEventListener('touchmove', (e) => {\n if (!isDragging) return;\n const currentX = e.touches[0].clientX;\n const diffX = currentX - startX;\n const currentTime = Date.now();\n const timeDelta = currentTime - lastMoveTime;\n\n if (timeDelta > 0) {\n velocity = diffX \/ timeDelta;\n }\n\n currentTranslate = prevTranslate + diffX;\n sliderTrack.style.transform = `translateX(${currentTranslate}px)`;\n sliderTrack.style.transition = 'none';\n\n lastMoveTime = currentTime;\n });\n\n sliderContainer.addEventListener('touchend', () => {\n if (!isDragging) return;\n isDragging = false;\n\n const friction = 0.95;\n let momentum = velocity * 150;\n currentTranslate += momentum;\n\n const containerWidth = sliderContainer.offsetWidth;\n const trackWidth = itemWidth * totalItems;\n const maxTranslate = 0;\n const minTranslate = -(trackWidth - containerWidth);\n\n if (currentTranslate > maxTranslate) {\n currentTranslate = maxTranslate;\n } else if (currentTranslate < minTranslate) {\n currentTranslate = minTranslate;\n }\n\n const nearestItem = Math.round(currentTranslate \/ itemWidth);\n currentTranslate = nearestItem * itemWidth;\n\n sliderTrack.style.transform = `translateX(${currentTranslate}px)`;\n sliderTrack.style.transition = 'transform 0.3s ease-out';\n\n setTimeout(() => {\n if (!isDragging) {\n sliderTrack.style.animationPlayState = 'running';\n }\n }, 2000);\n });\n\n sliderContainer.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n e.preventDefault();\n const direction = e.key === 'ArrowRight' ? -1 : 1;\n currentTranslate += direction * itemWidth;\n const containerWidth = sliderContainer.offsetWidth;\n const trackWidth = itemWidth * totalItems;\n const maxTranslate = 0;\n const minTranslate = -(trackWidth - containerWidth);\n if (currentTranslate > maxTranslate) currentTranslate = maxTranslate;\n if (currentTranslate < minTranslate) currentTranslate = minTranslate;\n sliderTrack.style.transform = `translateX(${currentTranslate}px)`;\n sliderTrack.style.transition = 'transform 0.3s ease';\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Transformative Impact<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\" onload=\"this.onload=null;this.rel='stylesheet'\">\n <noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <\/noscript>\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-light: #F8EDEB; \/* Slightly lighter for better contrast *\/\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n line-height: 1.8;\n color: var(--text-medium);\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes headingFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Uniform Section Styles *\/\n .section-header {\n padding: 20px 20px 10px;\n text-align: left; \/* Left-align section header *\/\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: var(--inline-block, inline-block !important);\n margin-bottom: 15px;\n color: var(--accent-color, #000);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n opacity: 0;\n animation: headingFadeIn 0.8s ease-out forwards;\n }\n\n .section-title::after {\n content: var(--content, '');\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: calc(60px, 60px);\n height: calc(4px, 4px);\n background: var(--background, var(--accent-color));\n border-radius: calc(0px, 0px);\n }\n\n \/* Stats Section *\/\n .stats-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .stats-container {\n max-width: 1300px;\n margin: 0 auto;\n position: relative;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: nowrap;\n gap: 20px;\n padding: 20px 0;\n overflow-x: auto;\n }\n\n .stat-item {\n background: #ffffff;\n border-radius: 12px;\n padding: 25px;\n text-align: center;\n transition: all 0.4s ease;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n min-width: 200px;\n opacity: 0;\n transform: translateY(20px);\n }\n\n .stat-item.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n .stat-item:hover {\n transform: translateY(-10px) scale(1.05);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .stat-number {\n font-size: 50px;\n font-weight: 700;\n margin-bottom: 15px;\n font-family: 'Roboto', sans-serif;\n color: var(--accent-color);\n transition: all 0.3s ease;\n }\n\n .stat-label {\n font-size: 17px;\n color: var(--text-medium);\n letter-spacing: 1.5px;\n font-weight: 400;\n font-family: 'Roboto', sans-serif;\n text-transform: none;\n text-align: center;\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n\n .stats-section {\n padding: 15px 0;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n position: relative;\n height: auto;\n overflow-x: auto;\n padding: 0;\n margin: 0;\n gap: 90px;\n }\n\n .stat-item {\n position: static;\n min-width: 130px;\n opacity: 1;\n pointer-events: auto;\n transition: opacity 1s ease;\n background-color: var(--primary-color);\n padding: 15px;\n margin-bottom: 10px;\n display: none;\n }\n\n .stat-item.active {\n display: block;\n }\n\n .stat-number {\n font-size: 36px;\n }\n\n .stat-label {\n font-size: 14px;\n margin-top: 5px;\n text-align: center;\n }\n }\n\n \/* Tablet (min-width: 768px and max-width: 1024px) *\/\n @media (min-width: 768px) and (max-width: 1024px) {\n .stats-section {\n padding: 20px 20px;\n }\n\n .stats-grid.transformative {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n gap: 20px;\n overflow-x: auto;\n padding: 20px 0;\n position: static;\n height: auto;\n }\n\n .stat-item {\n position: static;\n min-width: 180px;\n opacity: 1;\n transform: translateY(0);\n transition: all 0.4s ease;\n background: #ffffff;\n padding: 25px;\n margin-bottom: 0;\n display: block;\n }\n\n .stat-item.active {\n opacity: 1;\n display: block;\n }\n\n .stat-number {\n font-size: 50px;\n }\n\n .stat-label {\n font-size: 17px;\n text-align: center;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .stat-item {\n animation: none;\n transition: none;\n }\n\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\" style=\"text-align: center;\">Transformative Impact<\/h3>\n\n <\/section>\n\n <section class=\"stats-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"stats-container\">\n <div class=\"stats-grid transformative\">\n <div class=\"stat-item active\">\n <div class=\"stat-number\">56<\/div>\n <div class=\"stat-label\">Kannada medium schools<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">36<\/div>\n <div class=\"stat-label\">English medium schools<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">4<\/div>\n <div class=\"stat-label\">CBSE schools<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">10<\/div>\n <div class=\"stat-label\">Pre-university colleges<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">5<\/div>\n <div class=\"stat-label\">Degree colleges<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Stats animation on scroll\n const statItems = document.querySelectorAll('.stat-item');\n if (statItems.length > 0) {\n const statObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n const countElement = entry.target.querySelector('.stat-number');\n if (countElement && countElement.getAttribute('data-count')) {\n const finalValue = parseInt(countElement.getAttribute('data-count'));\n const hasPlus = countElement.getAttribute('data-count').includes('+');\n let startValue = 0;\n let duration = 1500;\n let counter = setInterval(function() {\n startValue += Math.ceil(finalValue \/ (duration \/ 40));\n if (startValue >= finalValue) {\n countElement.textContent = finalValue + (hasPlus ? '+' : '');\n clearInterval(counter);\n } else {\n countElement.textContent = startValue + (hasPlus ? '+' : '');\n }\n }, 40);\n }\n statObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px 100px 0px' });\n \n statItems.forEach(item => statObserver.observe(item));\n }\n\n \/\/ Stats slider for mobile\n if (window.innerWidth <= 767) {\n const statsGrids = document.querySelectorAll('.stats-grid');\n statsGrids.forEach(grid => {\n const statItems = grid.querySelectorAll('.stat-item');\n let currentStat = 0;\n\n function updateStatsSlider(index) {\n statItems.forEach(item => {\n item.classList.remove('active');\n item.style.display = 'none';\n });\n statItems[index].classList.add('active');\n statItems[index].style.display = 'block';\n currentStat = index;\n }\n\n updateStatsSlider(0);\n\n setInterval(() => {\n currentStat = (currentStat + 1) % statItems.length;\n updateStatsSlider(currentStat);\n }, 6000);\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\n <title>Expansive Reach - Catholic Board of Education<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\" onload=\"this.onload=null;this.rel='stylesheet'\">\n <noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <\/noscript>\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-medium: #333333;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n line-height: 1.8;\n color: var(--text-medium);\n background: var(--primary-color);\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes headingFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Section Header *\/\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n opacity: 0;\n animation: headingFadeIn 0.8s ease-out forwards;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n \/* Stats Section *\/\n .stats-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .stats-container {\n max-width: 1300px;\n margin: 0 auto;\n position: relative;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: nowrap;\n gap: 20px;\n padding: 20px 0;\n overflow-x: auto;\n }\n\n .stat-item {\n background: #ffffff;\n border-radius: 12px;\n padding: 25px;\n text-align: center;\n transition: all 0.4s ease;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n min-width: 200px;\n opacity: 0;\n transform: translateY(20px);\n }\n\n .stat-item.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n .stat-item:hover {\n transform: translateY(-10px) scale(1.05);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .stat-number {\n font-size: 50px;\n font-weight: 700;\n margin-bottom: 15px;\n font-family: 'Roboto', sans-serif;\n color: var(--accent-color);\n transition: all 0.3s ease;\n }\n\n .stat-label {\n font-size: 17px;\n color: var(--text-medium);\n letter-spacing: 1.5px;\n font-weight: 400;\n font-family: 'Roboto', sans-serif;\n text-transform: none;\n text-align: center;\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n .section-header {\n padding: 15px 10px 10px;\n }\n\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n\n .stats-section {\n padding: 15px 0;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n position: relative;\n height: auto;\n overflow-x: auto;\n padding: 0;\n margin: 0;\n gap: 90px;\n }\n\n .stat-item {\n position: static;\n min-width: 13px;\n opacity: 1;\n pointer-events: auto;\n transition: opacity 1s ease;\n background-color: var(--primary-color);\n padding: 15px;\n margin-bottom: 10px;\n display: block;\n }\n\n .stat-item.active {\n display: block;\n }\n\n .stat-number {\n font-size: 36px;\n }\n\n .stat-label {\n font-size: 14px;\n margin-top: 5px;\n text-align: center;\n }\n }\n\n \/* Tablet (min-width: 768px and max-width: 1024px) *\/\n @media (min-width: 768px) and (max-width: 1024px) {\n .stats-section {\n padding: 20px 20px;\n }\n\n .stats-grid {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n gap: 20px;\n overflow-x: auto;\n padding: 20px 0;\n position: static;\n height: auto;\n }\n\n .stat-item {\n position: static;\n min-width: 180px;\n opacity: 1;\n transform: translateY(0);\n transition: all 0.4s ease;\n background: #ffffff;\n padding: 25px;\n margin-bottom: 0;\n display: block;\n }\n\n .stat-item.active {\n opacity: 1;\n display: block;\n }\n\n .stat-number {\n font-size: 50px;\n }\n\n .stat-label {\n font-size: 17px;\n text-align: center;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .stat-item {\n animation: none;\n transition: none;\n }\n\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n\n \/* No-JS Fallback *\/\n noscript {\n .stat-item {\n opacity: 1 !important;\n position: static !important;\n margin-bottom: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"page-container\">\n \n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\">Our Expansive Reach<\/h3>\n <\/section>\n\n <section class=\"stats-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"stats-container\">\n <div class=\"stats-grid expansive\">\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"100+\">+<\/div>\n <div class=\"stat-label\">Institutions<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"40000+\">+<\/div>\n <div class=\"stat-label\">Students<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"2000+\">+<\/div>\n <div class=\"stat-label\">Faculties<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\" data-count=\"50+\">+<\/div>\n <div class=\"stat-label\">Locations<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Stats animation on scroll\n const statItems = document.querySelectorAll('.stat-item');\n if (statItems.length > 0) {\n const statObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n const countElement = entry.target.querySelector('.stat-number');\n if (countElement && countElement.getAttribute('data-count')) {\n const finalValue = parseInt(countElement.getAttribute('data-count'));\n const hasPlus = countElement.getAttribute('data-count').includes('+');\n let startValue = 0;\n let duration = 1500;\n let counter = setInterval(function() {\n startValue += Math.ceil(finalValue \/ (duration \/ 40));\n if (startValue >= finalValue) {\n countElement.textContent = finalValue + (hasPlus ? '+' : '');\n clearInterval(counter);\n } else {\n countElement.textContent = startValue + (hasPlus ? '+' : '');\n }\n }, 40);\n }\n statObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px 100px 0px' });\n \n statItems.forEach(item => statObserver.observe(item));\n }\n\n \/\/ Stats slider for mobile\n if (window.innerWidth <= 767) {\n const statsGrids = document.querySelectorAll('.stats-grid');\n statsGrids.forEach(grid => {\n const statItems = grid.querySelectorAll('.stat-item');\n let currentStat = 0;\n\n function updateStatsSlider(index) {\n statItems.forEach(item => {\n item.classList.remove('active');\n item.style.display = 'none';\n });\n statItems[index].classList.add('active');\n statItems[index].style.display = 'block';\n currentStat = index;\n }\n\n updateStatsSlider(0);\n\n setInterval(() => {\n currentStat = (currentStat + 1) % statItems.length;\n updateStatsSlider(currentStat);\n }, 6000);\n });\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\n <meta name=\"description\" content=\"The Catholic Board of Education, Mangalore, fosters holistic education rooted in moral and spiritual values across 100+ institutions.\">\n <meta name=\"keywords\" content=\"Catholic Board of Education, Mangalore, holistic education, moral values, schools, colleges\">\n <title>Catholic Board of Education<\/title>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" rel=\"stylesheet\">\n <link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\" onload=\"this.onload=null;this.rel='stylesheet'\">\n <noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;700&display=swap\">\n <\/noscript>\n <style>\n \/* Theme colors *\/\n :root {\n --primary-color: #F5F5DC; \/* Beige background *\/\n --secondary-color: #4A2C2A; \/* Espresso brown *\/\n --accent-color: #4A2C2A; \/* Espresso brown for accents *\/\n --text-light: #F8EDEB;\n --text-medium: #333333;\n --text-dark: #1a1a1a;\n --card-bg: #4A2C2A;\n --card-border: rgba(0, 0, 0, 0.1);\n --card-hover-border: rgba(74, 44, 42, 0.5);\n --box-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);\n --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.15);\n --box-shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n \/* Base styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Roboto', sans-serif;\n line-height: 1.8;\n overflow-x: hidden;\n color: var(--text-medium);\n background: url('https:\/\/cbemangalore.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-02-201650.png') no-repeat center center fixed;\n background-size: cover;\n z-index: -1;\n }\n\n \/* Main container *\/\n .page-container {\n width: 100%;\n background: var(--primary-color);\n padding: 5px 0;\n }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes headingFadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes activitiesFade {\n 0%, 45% { opacity: 1; pointer-events: auto; }\n 50%, 95% { opacity: 0; pointer-events: none; }\n 100% { opacity: 1; pointer-events: auto; }\n }\n\n \/* Scroll-triggered animation classes *\/\n .animate-on-scroll {\n opacity: 0;\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n .animate-on-scroll.active {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Uniform Section Styles *\/\n .section-header {\n padding: 20px 20px 10px;\n text-align: center;\n position: relative;\n }\n\n .section-title {\n font-size: clamp(24px, 3vw, 36px);\n font-family: 'Playfair Display', 'Georgia', serif;\n font-weight: 700;\n display: inline-block;\n margin-bottom: 15px;\n color: var(--accent-color);\n text-transform: none;\n background: linear-gradient(90deg, var(--accent-color), #6B4E31);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n position: relative;\n opacity: 0;\n animation: headingFadeIn 0.8s ease-out forwards;\n }\n\n .section-title::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: var(--accent-color);\n border-radius: 0px;\n }\n\n \/* Education Section *\/\n .education-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .education-container {\n max-width: 100%;\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: 40px;\n background: #ffffff;\n border-radius: 12px;\n padding: 30px;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n }\n\n .education-container:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .education-image-container {\n flex: 0 0 400px;\n height: 350px;\n overflow: hidden;\n border-radius: 8px;\n }\n\n .education-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n\n .education-container:hover .education-image {\n transform: scale(1.05);\n }\n\n .education-info {\n flex: 1;\n padding: 20px;\n color: var(--text-medium);\n }\n\n .education-title {\n font-weight: 600;\n font-size: clamp(22px, 3vw, 28px);\n font-family: 'Playfair Display', 'Georgia', serif;\n line-height: 1.4;\n margin-bottom: 15px;\n color: var(--accent-color);\n }\n\n .education-text {\n font-size: 18px;\n line-height: 1.9;\n color: var(--text-medium);\n margin-bottom: 15px;\n text-align: left;\n }\n\n \/* Activities Section *\/\n .activities-section {\n padding: 20px 20px;\n background: var(--primary-color);\n }\n\n .activities-container {\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n min-height: 400px;\n }\n\n .activity-card {\n display: flex;\n align-items: center;\n width: 100%;\n gap: 40px;\n background: #ffffff;\n border-radius: 12px;\n padding: 30px;\n box-shadow: var(--box-shadow-medium);\n border: 1px solid var(--card-border);\n transition: all 0.3s ease;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n .activity-card.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n .activity-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow-strong);\n border-color: var(--card-hover-border);\n }\n\n .activity-image-container {\n flex: 100px 100px 400px;\n height: 350px;\n overflow: hidden;\n border-radius: 8px;\n }\n\n .activity-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n\n .activity-card:hover .activity-image {\n transform: scale(1.05);\n }\n\n .activity-info {\n flex: 1;\n padding: 20px;\n color: var(--text-medium);\n }\n\n .activity-title {\n font-weight: 600;\n font-size: clamp(22px, 3vw, 28px);\n font-family: 'Playfair Display', 'Georgia', serif;\n line-height: 1.4;\n margin-bottom: 15px;\n color: var(--accent-color);\n }\n\n .activity-text {\n font-size: 18px;\n line-height: 1.9;\n color: var(--text-medium);\n text-align: left;\n }\n\n .activity-dots {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 150px;\n position: absolute;\n bottom: 30px;\n left: 0;\n right: 0;\n z-index: 10;\n }\n\n .activity-dot {\n width: 16px;\n height: 16px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n }\n\n .activity-dot:hover,\n .activity-dot:focus {\n background-color: rgba(255, 255, 255, 0.8);\n outline: none;\n }\n\n .activity-dot.active {\n background-color: var(--accent-color);\n transform: scale(1.2);\n }\n\n \/* Mobile (max-width: 767px) *\/\n @media (max-width: 767px) {\n \/* Section Header *\/\n .section-header {\n padding: 15px 10px 10px;\n }\n .section-title {\n font-size: clamp(16px, 3vw, 24px);\n }\n\n \/* Academic Excellence *\/\n .education-section {\n padding: 15px 10px;\n }\n .education-container {\n flex-direction: column;\n gap: 20px;\n }\n .education-image-container {\n width: 100%;\n max-width: 400px;\n height: 200px;\n }\n .education-info {\n text-align: left;\n padding: 10px;\n }\n .education-title {\n font-size: clamp(18px, 3vw, 22px);\n }\n .education-text {\n font-size: 15px;\n text-align: left;\n }\n\n \/* Holistic Development *\/\n .activities-section {\n padding: 15px 10px;\n }\n .activities-container {\n min-height: auto;\n }\n .activity-card {\n flex-direction: column;\n gap: 20px;\n padding: 20px;\n position: static;\n opacity: 1;\n pointer-events: auto;\n margin-bottom: 30px;\n display: none;\n }\n .activity-card.active {\n display: block;\n }\n .activity-image-container {\n width: 100%;\n max-width: 400px;\n height: 200px;\n }\n .activity-info {\n text-align: left;\n padding: 10px;\n }\n .activity-title {\n font-size: clamp(18px, 3vw, 22px);\n }\n .activity-text {\n font-size: 15px;\n text-align: left;\n }\n .activity-dots {\n position: static;\n margin-top: 30px;\n display: flex;\n }\n }\n\n \/* Tablet (min-width: 768px and max-width: 1024px) *\/\n @media (min-width: 768px) and (max-width: 1024px) {\n \/* Academic Excellence *\/\n .education-section {\n padding: 20px 20px;\n }\n .education-container {\n flex-direction: column;\n gap: 20px;\n }\n .education-image-container {\n width: 100%;\n max-width: 400px;\n height: 250px;\n }\n\n \/* Holistic Development *\/\n .activities-section {\n padding: 20px 20px;\n }\n .activity-image-container {\n flex: 0 0 350px;\n height: 300px;\n }\n }\n\n \/* Accessibility: Reduced Motion *\/\n @media (prefers-reduced-motion: reduce) {\n .activity-card, .animate-on-scroll {\n animation: none;\n transition: none;\n }\n .animate-on-scroll {\n animation: none !important;\n opacity: 1 !important;\n transform: none !important;\n }\n }\n\n \/* No-JS Fallback *\/\n noscript {\n .activity-card {\n opacity: 1 !important;\n position: static !important;\n margin-bottom: 20px;\n }\n .activity-dots {\n display: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"page-container\">\n \n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\">Academic Excellence<\/h3>\n <\/section>\n\n <section class=\"education-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"education-container\">\n <div class=\"education-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/group-of-students-studying-book-at-classroom.webp\" alt=\"Students engaged in a classroom learning activity\" class=\"education-image\" loading=\"lazy\">\n <\/div>\n <div class=\"education-info\">\n <h4 class=\"education-title\">Academic Excellence<\/h4>\n <p class=\"education-text\">Our institutions deliver high-quality education that seamlessly integrates academic excellence with holistic development, preparing students for success in a dynamic, rapidly evolving world. We emphasize a curriculum that fosters critical thinking, creativity, and ethical decision-making, ensuring students are equipped with the skills and values needed for future challenges. Through dedicated faculty and innovative teaching methods, we create an environment where every student can thrive, nurturing their intellectual and personal growth.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section-header animate-on-scroll\" data-animation=\"fadeInUp\">\n <h3 class=\"section-title\">Holistic Development<\/h3>\n <\/section>\n\n <section class=\"activities-section animate-on-scroll\" data-animation=\"fadeInUp\">\n <div class=\"activities-container\">\n <div class=\"activity-card active\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/chess-scaled.jpg\" alt=\"Students playing chess in a school competition\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Chess<\/h4>\n <p class=\"activity-text\">Chess classes sharpen strategic thinking and problem-solving skills. Students learn patience, focus, and planning through engaging matches. Our expert coaches guide players of all levels to excel. Tournaments foster teamwork and competitive spirit. Chess builds confidence and mental agility.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/eastern-dance-scaled.jpg\" alt=\"Students performing a cultural dance\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Dance<\/h4>\n <p class=\"activity-text\">Dance classes encourage creativity and self-expression through movement. Students explore various styles, from classical to contemporary. Our instructors nurture talent and coordination. Performances boost confidence and cultural appreciation. Dance promotes physical fitness and emotional well-being.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/singing-scaled.jpg\" alt=\"Students singing in a choir performance\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Singing<\/h4>\n <p class=\"activity-text\">Singing lessons enhance vocal skills and musicality. Students learn techniques in pitch, rhythm, and harmony. Our choir programs foster collaboration and creativity. Performances build stage presence and confidence. Singing nurtures emotional expression and joy.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/karate-scaled.jpg\" alt=\"Students practicing karate in a training session\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Karate<\/h4>\n <p class=\"activity-text\">Karate training builds discipline, strength, and self-defense skills. Students develop focus and resilience through structured practice. Our experienced instructors ensure safe learning. Belt progression motivates growth and achievement. Karate instills confidence and respect.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/public-speaking-scaled.jpg\" alt=\"Student delivering a public speech at an event\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Public Speaking<\/h4>\n <p class=\"activity-text\">Public speaking classes enhance communication and confidence. Students learn to articulate ideas clearly and persuasively. Our workshops cover speech writing and delivery techniques. Competitions provide real-world experience. Public speaking prepares students for leadership roles.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/arts-scaled.jpg\" alt=\"Students creating art and crafts in a workshop\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Arts & Crafts<\/h4>\n <p class=\"activity-text\">Arts and crafts sessions spark creativity and fine motor skills. Students explore painting, sculpting, and design. Our instructors encourage originality and experimentation. Projects foster patience and pride in creation. Art enhances emotional and aesthetic growth.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/skating-scaled.jpg\" alt=\"Students roller skating during a training session\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Roller Skating<\/h4>\n <p class=\"activity-text\">Roller skating classes promote balance, coordination, and fitness. Students learn techniques in a fun, active environment. Our coaches ensure safety and skill development. Races and events build camaraderie and excitement. Skating boosts confidence and physical health.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/swimming-scaled.jpg\" alt=\"Students practicing swimming in a pool\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Swimming<\/h4>\n <p class=\"activity-text\">Swimming lessons teach essential water safety and techniques. Students build strength, endurance, and confidence in the pool. Our certified instructors provide personalized guidance. Competitions encourage goal-setting and teamwork. Swimming promotes lifelong fitness and safety.<\/p>\n <\/div>\n <\/div>\n <div class=\"activity-card\">\n <div class=\"activity-image-container\">\n <img decoding=\"async\" src=\"https:\/\/cbemangalore.com\/wp-content\/uploads\/2026\/04\/keyboard-musical-scaled.jpg\" alt=\"Student playing a keyboard in a music class\" class=\"activity-image\" loading=\"lazy\">\n <\/div>\n <div class=\"activity-info\">\n <h4 class=\"activity-title\">Keyboard<\/h4>\n <p class=\"activity-text\">Keyboard classes develop musical skills and creativity. Students learn to play melodies and chords with expert guidance. Our lessons cater to all skill levels. Performances enhance stage presence and confidence. Keyboard playing fosters discipline and artistic expression.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"activity-dots\">\n <div class=\"activity-dot active\" tabindex=\"0\" aria-label=\"Show Chess Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Dance Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Singing Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Karate Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Public Speaking Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Arts & Crafts Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Roller Skating Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Swimming Activity\"><\/div>\n <div class=\"activity-dot\" tabindex=\"0\" aria-label=\"Show Keyboard Activity\"><\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script defer>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Scroll-triggered animations\n const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const animation = entry.target.getAttribute('data-animation');\n if (animation === 'fadeInUp') {\n entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';\n }\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2, rootMargin: '0px 0px -50px 0px' });\n\n elementsToAnimate.forEach(element => observer.observe(element));\n\n \/\/ Activities slider\n const activityDots = document.querySelectorAll('.activity-dot');\n const activityCards = document.querySelectorAll('.activity-card');\n let currentActivity = 0;\n\n function updateActivitySlider(index) {\n activityDots.forEach(d => d.classList.remove('active'));\n activityCards.forEach(c => {\n c.classList.remove('active');\n if (window.innerWidth <= 767) {\n c.style.display = 'none';\n } else {\n c.style.opacity = '0';\n c.style.pointerEvents = 'none';\n }\n });\n activityDots[index].classList.add('active');\n activityCards[index].classList.add('active');\n if (window.innerWidth <= 767) {\n activityCards[index].style.display = 'block';\n } else {\n activityCards[index].style.opacity = '1';\n activityCards[index].style.pointerEvents = 'auto';\n }\n currentActivity = index;\n }\n\n updateActivitySlider(0);\n\n activityDots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n clearInterval(activityAutoRotate);\n updateActivitySlider(index);\n setTimeout(() => {\n activityAutoRotate = setInterval(activityRotate, window.innerWidth <= 767 ? 6000 : 15000);\n }, 10000);\n });\n dot.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n clearInterval(activityAutoRotate);\n updateActivitySlider(index);\n setTimeout(() => {\n activityAutoRotate = setInterval(activityRotate, window.innerWidth <= 767 ? 6000 : 15000);\n }, 10000);\n }\n });\n });\n\n function activityRotate() {\n currentActivity = (currentActivity + 1) % activityCards.length;\n updateActivitySlider(currentActivity);\n }\n\n let activityAutoRotate = setInterval(activityRotate, window.innerWidth <= 767 ? 6000 : 15000);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CBE Mangalore – Loading Catholic Board of Education Diocese of Mangalore Banner Slider Our Esteemed Leadership Most Rev. Dr. Peter […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":479,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":1953,"href":"https:\/\/cbemangalore.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/1953"}],"wp:attachment":[{"href":"https:\/\/cbemangalore.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}