:root {--color-primary: #0f172a;
--color-primary-light: #1e293b;
--color-accent: #d97706;
--color-accent-hover: #b45309;
--color-bg: #f8fafc;
--color-surface: #ffffff;
--color-border: #e2e8f0;
--color-text-main: #334155;
--color-text-muted: #64748b;
--color-text-inverse: #ffffff;
--font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--container-max: 80%;
--radius-sm: 4px;
--radius-md: 8px;
--transition: all 0.25s ease-in-out;
}
@font-face {font-family:'mm';src: url('EPAOMAYEK.TTF') format('truetype');}
@font-face {font-family:'fa';src: url('fontawesome.ttf') format('truetype');}

* {margin: 0;padding: 0;box-sizing: border-box;}
html{ }
body {font-size:15px;font-family: var(--font-stack);background-color: var(--color-bg);color: var(--color-text-main);-webkit-font-smoothing: antialiased;}
a {color: inherit;transition: var(--transition);}
a, a:hover, a:active, a:visited, a:focus {text-decoration: none}
ul {list-style: none;}
img {max-width: 100%;height: auto;display: block;}
.container {width: 100%;max-width: var(--container-max);margin: 0 auto;padding: 0 1.25rem;}

header{height:109px; position:fixed; overflow:hidden;width:100%}
.flex{display:flex}
.top{position:sticky;top:0;background-color:#fff;border-bottom:1px solid var(--color-border);width: 100%;padding:5px 10% 0;z-index:100;display:flex;align-items:center;justify-content:space-between}
.fa{font-family:"fa";}
.rcont{float:right;display:flex}

.logo_block{display:flex; height:60px;position:relative;}
#logo{text-align:right;margin-right:10px;}
#logo > a{display:inline-block}
#logo > a > img{ width:55px;float: left;}
.local{line-height:0px;font-size:1.2em;letter-spacing:1px;color:#555}
.pageTitle{color: #000;text-align:left;margin-top:-5px;}
.pageTitle h1{ margin:0; font-size:1.3em;color:#000;font-weight:600;text-transform:uppercase}
.pageTitle h2{font-size: 0.9em;padding: 0;margin: 0; color:#362f2f;font-weight:bold}
.pageTitle h3{margin:5px 0 0; text-transform:none;line-height:1em;color:#ff9;display:none}
.pageTitle > img{height:18px;margin-left:-5px;}
.pageTitle h2.tagline{margin-bottom:5px;font-weight:normal}
.pageTitle :last-child{display:none}
#breadcrumb{display:none}


/* ========================================================= 2. TOP BAR (SECONDARY UTILITY MENU) ========================================================= */
.top-bar {background-color: #0b1120;color: #94a3b8;font-size: 0.825rem;border-bottom: 1px solid rgba(255, 255, 255, 0.08);padding: 0.45rem 0;}
.top-bar .container {display: flex;justify-content: space-between;align-items: center;}
.top-bar-links {display: flex;gap: 1.25rem;}
.top-bar-links a:hover {color: var(--color-accent);}
/* ========================================================= 3. PRIMARY HEADER & NAVIGATION ========================================================= */
.navigation nav>ul{display: flex;align-items: center;gap: 1.5rem;}
.navigation nav>ul li{position: relative;}
.navigation nav>ul li a{font-weight: 500;color: var(--color-primary);padding: 0.75rem 0;display: inline-flex;align-items: center;gap: 0.25rem;}
.navigation nav>ul li a:hover {color: var(--color-accent);text-decoration:none;}
.navigation nav>ul li a.on{color: var(--color-accent);}
.navigation nav>ul .parent > a:after{content:'\25B8';}
.navigation nav>ul .parent:hover > a:after{content:'\25BE';}
.subMenu {position: absolute;top: 100%;left: 0;background: var(--color-surface);border: 1px solid var(--color-border);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07);border-radius:5px;min-width: 220px;opacity: 0;visibility: hidden;transform: translateY(10px);transition: var(--transition);z-index: 100;}
.navigation nav>ul .parent:hover .subMenu {opacity: 1;visibility: visible;transform: translateY(0);}
.navigation nav>ul .subMenu a {font-size:0.9em;display: block;padding: 0.65rem 1rem;color: var(--color-text-main);border-bottom: 1px solid var(--color-border);}
.navigation nav>ul .subMenu li:last-child a {border-bottom: none;}
.navigation nav>ul .subMenu a:hover {background-color: var(--color-bg);color: var(--color-accent);padding-left: 1.25rem;}
/*
.top.sticky .logo_block{height:45px;animation: fadeInDown 1s both 0.2s;}
.top.sticky #logo img{width:40px}
.top.sticky .local{display:none}*/
@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}


#mobileMenu{position: fixed;top: 0;left: 0;width: 100%;display: none;z-index:100;text-align:left}
#mobileMenu ul{margin:0;padding:0;font-size:1.0em}
#mobileMenu ul li{display:block;background-color:#457;color:#fff;text-transform: uppercase;border-bottom: 1px solid #fff;padding-left:40px}
#mobileMenu ul li a{padding: 8px 0;display:block;color:#fff;text-decoration:none}
#mobileMenu ul li.lion{background-color:#679;}
#mobileMenu .subMenu{z-index:10;margin-bottom:5px;font-size:1em;}
#mobileMenu .subMenu li{background-color:transparent;display:block;padding:0;border-bottom:none;margin:0}
#mobileMenu .subMenu li a{background-color:rgba(0,0,0,0.2);display:block;padding:5px 10px;border-radius:0;text-transform:none;}
#mobileMenu .subMenu li a.on{}
#mobileMenu .subMenu .subMenu li a{padding-left:30px}
#mobileMenu .parent .fa-angle-down{position:absolute;right:15px;top:12px}
#mobileMenu .parent{position:relative;padding-bottom:5px}

/* Mobile Menu Toggle */
.mobile-toggle {display: none;background: none;border: none;cursor: pointer;padding: 0.5rem;}
.mobile-toggle span {display: block;width: 24px;height: 2px;background-color: var(--color-primary);margin: 5px 0;transition: var(--transition);}
/* ========================================================= 4. NOTIFICATION TICKER ========================================================= */
.notification-bar,#featuredNotice {background: var(--color-primary);color: var(--color-text-inverse);font-size: 0.85rem;display: flex;align-items: center;border-top: 1px solid rgba(255, 255, 255, 0.1);overflow: hidden;height: 40px;}
.ticker-label {background: var(--color-accent);color: #ffffff;font-weight: 700;padding: 0 1rem;height: 100%;display: flex;align-items: center;text-transform: uppercase;font-size: 0.75rem;letter-spacing: 0.05em;white-space: nowrap;z-index: 2;}
.ticker-track {flex: 1;overflow: hidden;position: relative;white-space: nowrap;}
.ticker-content {display: inline-block;padding-left: 100%;animation: marquee 25s linear infinite;}
.ticker-content:hover {animation-play-state: paused;}
@keyframes marquee {0% { transform: translate3d(0, 0, 0); }100% { transform: translate3d(-100%, 0, 0); }}

/* ========================================================= 5. FULL-WIDTH IMAGE SLIDER ========================================================= */
.imageSlider .slider-dots{position: absolute;top: 1.5rem;right: 2rem;display: flex;gap: 0.5rem;z-index: 20;height:auto}
.imageSlider .slider-dots li{display:block;position:static;width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.8);border: none;cursor: pointer;transition: var(--transition);box-shadow:0 0 2px #000}
.imageSlider .slider-dots li.current {background: var(--color-accent);width: 24px;border-radius: 6px;}

.slide{width:100%;position:relative;}
.imageSlider .section_title{display:none;}
.imageSlider .wrapper{position:relative;width:100%}
.imageSlider ul {height:700px;list-style: none;padding: 0;position: relative;}
.imageSlider li {height: 100%;width:100%;position: absolute;overflow: hidden;top: 0;left: 0;display: none;background-size: cover;background-position: center center;border-radius:10px}
.imageSlider li img {visibility: hidden;}
.imageSlider .current {display: block;}
.imageSlider .slider-box.slide-animation {position: relative;overflow: hidden;}
.imageSlider .slider-box.slide-animation li {float: left;position: absolute;left: 100%;display: block;-webkit-transition: all 0.3s;transition: all 0.3s;}
.imageSlider .slider-box.slide-animation li.current,.imageSlider .slider-box.slide-animation li.prev {left: 0%;}
.imageSlider .slider-box.slide-animation li.prev {z-index: 997;}
.imageSlider .slider-box.slide-animation li.current {z-index: 998;}
.imageSlider .info{display:none;position:absolute;padding:20px;width:100%;box-sizing:border-box;background-color:rgba(0,0,0,0.5);bottom:0;text-shadow:0 0 5px #000}
.imageSlider .info span{display:block;text-transform:uppercase;}

.bottom{background-color: var(--color-primary);color: #94a3b8;margin-top:40px;padding-top:30px}
.mid .section_wrapper,.bottom .section_wrapper{ max-width: var(--container-max);margin:0 auto;}
.highlights .section_title, .highlights .content_title, .home_message .section_title, .home_message .content_title, .bottom .section_title, .bottom .content_title,.contact_us .section_title{display:none;}
.home_message{padding:30px 0}

.academics .content_title{display:none}
.academics .sub_page ul li{margin:10px auto}
.academics .sub_page ul li ul{list-style:circle;margin:0 0 30px 20px}
.academics .sub_page .flex{gap:1.5rem}
.academics .box{width:50%}
.academics .box ul{list-style:disc;padding-left:30px}
.academics .days .box ul ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.academics .days .box ul ul li{display:inline-block;font-size:0.9em;margin:5px;padding:4px 10px;border:solid 1px #ddd;background-color:#eef3f9;border-radius:5px}

.sub_page{padding:40px 0 0;}

.map{margin-top:40px;}
.map iframe{width:100%;height:400px}

.vision{gap:1.5rem}
.vision h4,.box h4{color:#0f172a;margin:0;position:relative}
.vision h4::after,.box h4:after {content: "";position: absolute;left:1.25rem;bottom:4px;width:20px;height: 2px;background-color: var(--color-accent);}
.vision h4,.vision p, .box h4,.box ul{padding:1rem 1.25rem}

.school-table tbody tr:hover,.school-table th{background-color:#f8fafc}
.table-card,.vision>div,.box{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.04);margin:20px auto}
.table-header{background-color:#0f172a;color:#fff;padding:1rem 1.25rem}
.table-header h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
.table-responsive{width:100%;overflow-x:auto}
.school-table{width:100%;border-collapse:collapse;text-align:left;}
.school-table th{font-weight:600;padding:.85rem 1rem;border-bottom:2px solid #e2e8f0;text-transform:uppercase;letter-spacing:.04em}
.school-table td{padding:.95rem 1rem;border-bottom:1px solid #e2e8f0;vertical-align:top;line-height:1.5}
.badge-success{background-color:#ecfdf5;color:#047857;padding:.25rem .6rem;border-radius:4px;font-weight:600;border:1px solid #a7f3d0;white-space:nowrap;display:inline-block}
.prize-tag{color:#b45309;font-weight:700;background-color:#fffbeb;padding:.15rem .45rem;border-radius:4px;border:1px solid #fde68a;display:inline-block;margin-bottom:.2rem}
@media screen and (max-width:768px){
.table-responsive{border:none}
.school-table thead{display:none}
.school-table,.school-table tbody,.school-table td,.school-table tr{display:block;width:100%}
.school-table tr{margin-bottom:1rem;border-bottom:2px solid #e2e8f0;}
.school-table tr:last-child{border:none}
.school-table td{padding:.6rem 1rem;border-bottom:1px solid #f1f5f9;}
.school-table td:last-child{border-bottom:none}
.school-table td::before{content:attr(data-label) ": ";font-weight:600;color:#0f172a;text-align:left;padding-right:1rem;text-transform:uppercase;flex-shrink:0}
}

/* ========================================================= 6. HIGHLIGHT METRICS GRID ========================================================= */
.highlights {margin-top: -3rem;position: relative;z-index: 30;padding-bottom: 4rem;}
.highlights-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1.25rem;list-style:none;padding:0;margin:0}
.highlights-grid li {background: var(--color-surface);border: 1px solid var(--color-border);border-radius: var(--radius-md);padding: 1.5rem;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);border-top: 3px solid var(--color-primary);transition: var(--transition);}
.highlights-grid li:hover {border-top-color: var(--color-accent);transform: translateY(-3px);}
.highlight-number {font-size:1.6em;font-weight: 700;color: var(--color-primary);line-height: 1.2;}
.highlight-title {font-weight: 600;margin: 0.35rem 0;color: var(--color-text-main);}
.highlight-desc {color: var(--color-text-muted);}
/* ========================================================= 7. SECRETARY'S MESSAGE SECTION ========================================================= */
.message-section {padding: 4rem 0;background: var(--color-surface);border-top: 1px solid var(--color-border);border-bottom: 1px solid var(--color-border);}
.message-grid {display: grid;grid-template-columns: 320px 1fr;gap: 3rem;align-items: start;}
.message-profile {background: var(--color-bg);border: 1px solid var(--color-border);border-radius: var(--radius-md);overflow: hidden;text-align: center;}
.profile-placeholder {width: 100%;height: 320px;background-color: #cbd5e1;display: flex;align-items: center;justify-content: center;color: #475569;}
.profile-info {padding: 1.25rem;}
.profile-name {font-weight: 700;color: var(--color-primary);}
.profile-designation {color: var(--color-accent);text-transform: uppercase;font-weight: 600;}
.message-content h3 {text-transform: uppercase;letter-spacing: 0.1em;color: var(--color-accent);margin-bottom: 0.5rem;font-weight: 700;}
.message-content h2 {color: var(--color-primary);margin-bottom: 1.25rem;line-height: 1.3;}
.message-content blockquote {font-style: italic;color: var(--color-primary-light);margin-bottom: 1.25rem;border-left: 3px solid var(--color-accent);padding-left: 1rem;}
.message-content p {margin-bottom: 1rem;color: var(--color-text-main);}
/* ========================================================= 8. FOOTER ========================================================= */
.site-footer {background-color: var(--color-primary);color: #94a3b8;padding-top: 4rem;}
.footer-grid {display: grid;grid-template-columns: 2fr 1fr 1fr 1.5fr;gap: 2.5rem;padding-bottom: 3rem;border-bottom: 1px solid rgba(255, 255, 255, 0.08);}
.footer-col h4 {color: #ffffff;margin-bottom: 1.25rem;font-weight: 600;position: relative;}
.footer-col h4::after {content: "";position: absolute;left: 0;bottom: -6px;width:20px;height: 2px;background-color: var(--color-accent);}
.footer-col ul li {margin-bottom: 0.5rem;}
.footer-col ul li a:hover {color: var(--color-accent);padding-left: 4px;}
.sub-footer {padding: 1.25rem 0;}
.sub-footer .container {display: flex;justify-content: space-between;align-items: center;}
/* ========================================================= 9. RESPONSIVE DESIGN (MOBILE & TABLET BREAKPOINTS) ========================================================= */
@media (max-width: 992px) {
.highlights-grid {grid-template-columns: repeat(2, 1fr);}
.message-grid {grid-template-columns: 1fr;}
.footer-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 768px) {
#search_block{height:auto}
#font_sizer{margin-left:30px;float:none}
#showOri{left:150px}
.top{width:100%;padding:0;display:block}
.rcont{margin-top:10px;padding:5px;float:none;background-color:rgba(0,0,0,0.4)}
.rcont form{display:flex;flex-grow:1}
.rcont form input:first-child{flex-grow:1}
#logo{padding-top:8px;}
#logo > a > img{width:60px}
.pageTitle{font-size:0.8em; margin:0; padding:10px 0 0;position:relative;width: calc(100% - 120px);}
.pageTitle > img{margin-left:0;position:absolute;left:calc(50% - 83px);top:0;clip-path:polygon(0 0, 0 20px, 165px 20px, 165px 0px, 0 0)}
.pageTitle h1{font-size:1.4em}
.pageTitle h2{font-size:1em}
.top.sticky .pageTitle h1{position:static;width:100%}

nav,.header_right{display:none;}
nav.secMenu{display:block;width:auto;right:0}
#mobileMenu{position:fixed;overflow-y:auto;height:100%}
.toggleMobile{position: fixed;top:5px;left:5px;display: block;width:30px;height:28px;cursor: pointer;z-index: 999;}
.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3{display: block;position: absolute;width:25px;height:4px;left: 0;background:#034;border:solid 3px #012;border-radius:3px;box-shadow:0 0 5px #fff;-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
.toggleMobile span.menu1{top: 0;}
.toggleMobile span.menu2{top: 8px;}
.toggleMobile span.menu3{top: 16px;}
.toggleMobile.active span.menu1,.toggleMobile.active span.menu2{background-color:#fff}
.toggleMobile.active span.menu1{top: 8px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
.toggleMobile.active span.menu2{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
.toggleMobile.active span.menu3{opacity: 0;-webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}

#featuredNotice{display:flex;font-size:0.8em;align-items:center;padding:0}
#featuredNotice::before{display:none}
#featuredNotice .scrollCont{position:static;white-space:normal;text-align:center;}
#featuredNotice .scrollCont h4{font-size:1.2em;padding-top:5px}
#featuredNotice .scrollCont p{display:none}

.mid .section_wrapper, .bottom .section_wrapper{max-width:calc(100% - 50px);margin:0 25px}
.flex{display:block}
.academics .box{width:100%}

	.top-bar {display: none; }
	.nav-menu {position: fixed;top: 72px;left: -100%;width: 100%;height: calc(100vh - 72px);background: var(--color-surface);flex-direction: column;align-items: flex-start;padding: 2rem;gap: 1.25rem;transition: left 0.3s ease;overflow-y: auto;}
	.nav-menu.open {left: 0;}
	.submenu {position: static;box-shadow: none;border: none;padding-left: 1rem;opacity: 1;visibility: visible;transform: none;display: none;}
	.nav-item.dropdown-active .submenu {display: block;}
	.mobile-toggle {display: block;}
	.slider-section {height: 380px;}
	.slide-caption-box {bottom: 2rem;}
	.slide-caption {margin: 0 1rem;padding: 1rem;}
	.slide-caption h2 {font-size: 1.15rem;}
	.highlights-section {margin-top: 2rem;}
	.highlights-grid {grid-template-columns: 1fr;}
	.footer-grid {grid-template-columns: 1fr;gap: 2rem;}
	.sub-footer .container {flex-direction: column;gap: 0.5rem;text-align: center;}

	.top.sticky .logo_block{position:fixed;width:100%;top:0;z-index:100;left:0;padding-left:35px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;
		transition:all 0.4s ease;
		animation: fadeInDown 1s both 0.2s;
		-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
		-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30);
		background:#fff;
	}
}