/* ==========================================================================
   SREE NARAYANA GURU HIGH SCHOOL (SECONDARY SECTION)
   MODERN PREMIUM RESPONSIVE DESIGN THEME
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

   :root {
       --primary-navy: #0b1f3a;
       --primary-dark: #071527;
       --primary-blue: #113463;
       --primary-royal: #1b4985;
       --primary-light: #2563eb;
       --accent-gold: #f59e0b;
       --accent-gold-dark: #d97706;
       --accent-gold-light: #fef3c7;
       --accent-gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
       --primary-gradient: linear-gradient(135deg, #0b1f3a 0%, #1a3c75 100%);
       --hero-overlay-gradient: linear-gradient(180deg, rgba(11, 31, 58, 0.05) 0%, rgba(11, 31, 58, 0.65) 100%);
       --bg-light: #f8fafc;
       --bg-soft: #f1f5f9;
       --bg-card: #ffffff;
       --text-primary: #0f172a;
       --text-secondary: #475569;
       --text-muted: #64748b;
       --border-color: #e2e8f0;
       --border-light: #f1f5f9;
       --shadow-xs: 0 1px 3px rgba(11, 31, 58, 0.05);
       --shadow-sm: 0 4px 12px rgba(11, 31, 58, 0.06);
       --shadow-md: 0 10px 25px rgba(11, 31, 58, 0.08);
       --shadow-lg: 0 20px 40px rgba(11, 31, 58, 0.12);
       --shadow-hover: 0 22px 45px rgba(11, 31, 58, 0.16);
       --radius-sm: 8px;
       --radius-md: 14px;
       --radius-lg: 20px;
       --radius-xl: 28px;
       --radius-full: 9999px;
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* ==========================================================================
      GLOBAL BASE RESETS & TYPOGRAPHY
      ========================================================================== */
   body {
       font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
       color: var(--text-primary);
       background-color: var(--bg-light);
       line-height: 1.65;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       overflow-x: hidden;
   }
   
   h1, h2, h3, h4, h5, h6,
   .school-name, .guru-main-title, .fo-title, .facilities-title, .home-section-title, .home-widget-title {
       font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
       font-weight: 700;
       color: var(--primary-navy);
       letter-spacing: -0.02em;
   }
   
   a {
       color: var(--primary-royal);
       transition: var(--transition);
   }
   
   a:hover, a:focus {
       color: var(--accent-gold-dark);
       text-decoration: none;
   }
   
   /* Smooth Focus Outlines */
   a:focus, button:focus, input:focus {
       outline: none !important;
   }
   
   /* ==========================================================================
      TOP NOTIFICATION & ANNOUNCEMENT BAR
      ========================================================================== */
   .website-site-header .topsection {
       background: var(--primary-dark) !important;
       border-bottom: 1px solid rgba(255, 255, 255, 0.08);
       padding: 0 !important;
       position: relative;
       z-index: 1002;
   }
   
   .website-site-header .newsarea {
       background: transparent !important;
       padding: 3px 0 !important;
       border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   }
   
   .newscontent-wrap {
       display: flex !important;
       align-items: center;
       background: transparent !important;
       padding: 0 !important;
       margin: 0 !important;
       border: none !important;
   }
   
   .newstab {
       display: inline-flex !important;
       align-items: center;
       gap: 6px;
       background: var(--accent-gold-gradient) !important;
       color: #ffffff !important;
       font-size: 11px !important;
       font-weight: 800 !important;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       padding: 4px 14px !important;
       border-radius: var(--radius-full) !important;
       white-space: nowrap;
       box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
       margin-right: 15px !important;
   }
   
   .newstab::before {
       content: '';
       display: inline-block;
       width: 7px;
       height: 7px;
       background-color: #ffffff;
       border-radius: 50%;
       animation: livePulse 1.8s infinite;
   }
   
   @keyframes livePulse {
       0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
       70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
       100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
   }
   
   .newscontent-ticker {
       flex: 1;
       overflow: hidden;
   }
   
   .newscontent-ticker marquee {
       vertical-align: middle;
   }
   
   .newscontent-ticker ul {
       margin: 0;
       padding: 0;
       list-style: none;
       display: inline-flex;
   }
   
   .newscontent-ticker ul li {
       display: inline-block;
       padding-right: 40px;
       position: relative;
   }
   
   .newscontent-ticker ul li::after {
       content: '✦';
       position: absolute;
       right: 18px;
       color: var(--accent-gold);
       font-size: 10px;
       top: 50%;
       transform: translateY(-50%);
   }
   
   .newscontent-ticker ul li a {
       color: #e2e8f0 !important;
       font-size: 12.5px;
       font-weight: 500;
       transition: var(--transition);
   }
   
   .newscontent-ticker ul li a:hover {
       color: var(--accent-gold) !important;
       text-decoration: underline;
   }
   
   /* Secondary Top Bar (Email & Socials) */
   .website-site-header .toparea {
       padding: 3px 0 !important;
       background: rgba(11, 31, 58, 0.6) !important;
   }
   
   .toplist {
       margin: 0 !important;
       padding: 0 !important;
       list-style: none;
       display: flex;
       align-items: center;
       gap: 20px;
   }
   
   .toplist li a {
       color: #cbd5e1 !important;
       font-size: 12px;
       font-weight: 500;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       transition: var(--transition);
   }
   
   .toplist li a:hover {
       color: var(--accent-gold) !important;
   }
   
   .topicon {
       margin: 0 !important;
       padding: 0 !important;
       list-style: none;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 10px;
   }
   
   .topicon li {
       color: #94a3b8;
       font-size: 12px;
       font-weight: 600;
   }
   
   .topicon li a {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 26px;
       height: 26px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.08);
       color: #ffffff !important;
       font-size: 12px;
       transition: var(--transition);
   }
   
   .topicon li a:hover {
       background: var(--accent-gold);
       color: #ffffff !important;
       transform: translateY(-2px);
       box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
   }
   
   /* ==========================================================================
      MAIN BRAND HEADER AREA
      ========================================================================== */
   header,
   .website-site-header header,
   #alert header {
       top: 0 !important;
       margin-top: 0 !important;
       margin-bottom: 0 !important;
       position: relative !important;
       background: #ffffff !important;
       box-shadow: 0 4px 20px rgba(11, 31, 58, 0.06);
       padding: 6px 0 0 !important;
       z-index: 1001;
       border-bottom: 2px solid transparent;
       border-image: linear-gradient(90deg, var(--primary-navy) 0%, var(--accent-gold) 50%, var(--primary-royal) 100%) 1;
   }
   
   .website-site-header .topsection,
   .topsection {
       position: relative !important;
       top: 0 !important;
       margin: 0 !important;
       padding: 0 !important;
       z-index: 1002;
   }
   
   .header-brand-row {
       display: flex !important;
       align-items: center !important;
       justify-content: space-between !important;
       flex-wrap: nowrap !important;
       margin-left: 0 !important;
       margin-right: 0 !important;
       padding-bottom: 4px;
   }
   
   .header-brand-col {
       display: flex !important;
       align-items: center !important;
       justify-content: flex-start !important;
       flex: 1 1 auto !important;
       width: auto !important;
       float: none !important;
       min-width: 0 !important;
       padding: 0 15px 0 0 !important;
   }
   
   .header-brand {
       display: flex !important;
       align-items: center !important;
       gap: 14px !important;
       text-decoration: none;
       min-width: 0 !important;
   }
   
   .header-brand .logo {
       display: inline-block !important;
       flex-shrink: 0 !important;
   }
   
   .header-brand .logo img {
       height: 48px !important;
       width: auto !important;
       object-fit: contain;
       transition: var(--transition);
       filter: drop-shadow(0 2px 6px rgba(11, 31, 58, 0.15));
   }
   
   .header-brand:hover .logo img {
       transform: scale(1.03);
   }
   
   .header-brand-text {
       display: flex !important;
       flex-direction: column !important;
       min-width: 0 !important;
   }
   
   .school-name {
       font-size: 18px !important;
       font-weight: 800 !important;
       line-height: 1.25 !important;
       color: var(--primary-navy) !important;
       letter-spacing: -0.01em;
       margin-bottom: 0 !important;
       white-space: nowrap !important;
   }
   
   .school-affiliation {
       display: inline-flex !important;
       align-items: center !important;
       gap: 6px;
       font-size: 11px !important;
       font-weight: 700 !important;
       color: var(--accent-gold-dark) !important;
       background: var(--accent-gold-light);
       padding: 2px 9px !important;
       border-radius: var(--radius-full);
       width: fit-content;
       white-space: nowrap !important;
       border: 1px solid rgba(245, 158, 11, 0.3);
   }
   
   .school-affiliation::before {
       content: '✓';
       display: inline-block;
       font-size: 10px;
       font-weight: 900;
   }
   
   /* Header Extras (Fit India, Phone, Login) */
   .header-extras-col {
       display: flex !important;
       justify-content: flex-end !important;
       align-items: center !important;
       flex: 0 0 auto !important;
       width: auto !important;
       float: none !important;
       padding: 0 !important;
   }
   
   .header-extras {
       margin: 0 !important;
       padding: 0 !important;
       list-style: none !important;
       display: flex !important;
       flex-direction: row !important;
       flex-wrap: nowrap !important;
       align-items: center !important;
       gap: 12px !important;
   }
   
   .fit-india-logo {
       display: flex !important;
       align-items: center !important;
   }
   
   .fit-india-logo img {
       height: 44px !important;
       width: auto !important;
       border-radius: var(--radius-sm);
       box-shadow: var(--shadow-xs);
       border: 1px solid var(--border-color);
   }
   
   .header-phone-item {
       display: flex !important;
       align-items: center !important;
       gap: 8px !important;
       background: var(--bg-soft);
       padding: 4px 10px !important;
       border-radius: var(--radius-md);
       border: 1px solid var(--border-color);
       white-space: nowrap !important;
       transition: var(--transition);
   }
   
   .header-phone-item:hover {
       border-color: var(--primary-light);
       box-shadow: var(--shadow-sm);
       background: #ffffff;
   }
   
   .header-phone-item .i-plain {
       width: 32px !important;
       height: 32px !important;
       border-radius: 50%;
       background: var(--primary-gradient);
       color: #ffffff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px !important;
       box-shadow: 0 4px 10px rgba(11, 31, 58, 0.2);
       flex-shrink: 0;
   }
   
   .header-phone-item .he-text {
       font-size: 10px !important;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.05em;
       line-height: 1.2;
   }
   
   .header-phone-item .he-text span {
       display: block;
       font-size: 13px !important;
       font-weight: 800;
       color: var(--primary-navy);
       letter-spacing: 0.02em;
       margin-top: 1px;
   }
   
   .header-login-item .complainbtn {
       display: inline-flex !important;
       align-items: center;
       gap: 6px;
       background: var(--primary-gradient) !important;
       color: #ffffff !important;
       font-size: 12.5px !important;
       font-weight: 700 !important;
       letter-spacing: 0.03em;
       padding: 6px 16px !important;
       border-radius: var(--radius-full) !important;
       box-shadow: 0 4px 14px rgba(11, 31, 58, 0.22) !important;
       transition: var(--transition) !important;
       border: 1px solid rgba(255, 255, 255, 0.15);
       white-space: nowrap !important;
   }
   
   .header-login-item .complainbtn::before {
       content: '\f023';
       font-family: 'FontAwesome';
       font-size: 12px;
       color: var(--accent-gold);
   }
   
   .header-login-item .complainbtn:hover {
       background: var(--accent-gold-gradient) !important;
       color: #ffffff !important;
       transform: translateY(-2px);
       box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4) !important;
   }
   
   /* Mobile Toggle in Header */
   .mobile-menu-bar {
       display: none;
   }
   
   .mobile-navbar-toggle {
       background: var(--primary-gradient) !important;
       border: none !important;
       border-radius: var(--radius-sm) !important;
       padding: 10px 12px !important;
       margin: 0 !important;
       cursor: pointer;
       box-shadow: 0 4px 12px rgba(11, 31, 58, 0.2);
   }
   
   .mobile-navbar-toggle .icon-bar {
       background-color: #ffffff !important;
       height: 2.5px !important;
       width: 22px !important;
       border-radius: 2px;
       transition: var(--transition);
   }
   
   .mobile-navbar-toggle .icon-bar + .icon-bar {
       margin-top: 4px !important;
   }
   
   /* ==========================================================================
      NAVIGATION BAR (STRICT SINGLE ROW ON DESKTOP)
      ========================================================================== */
   .website-site-header .navborder {
       background: var(--primary-navy) !important;
       border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
       border-bottom: 3px solid var(--accent-gold) !important;
       padding: 0 !important;
       position: relative;
       z-index: 1000;
   }
   
   .navborder .container {
       width: 100% !important;
       max-width: 1380px !important;
       padding-left: 15px !important;
       padding-right: 15px !important;
   }
   
   @media (min-width: 992px) {
       .navborder .navbar {
           border: none !important;
           margin: 0 !important;
           min-height: auto !important;
           border-radius: 0 !important;
           background: transparent !important;
           display: block !important;
       }
   
       .navborder .navbar-collapse {
           display: flex !important;
           visibility: visible !important;
           height: auto !important;
           overflow: visible !important;
           padding: 0 !important;
           margin: 0 !important;
           width: 100% !important;
       }
   
       .navborder .navbar-nav {
           display: flex !important;
           flex-direction: row !important;
           flex-wrap: nowrap !important;
           align-items: center !important;
           justify-content: space-between !important;
           width: 100% !important;
           margin: 0 !important;
           padding: 0 !important;
           float: none !important;
       }
   
       .navborder .navbar-nav > li {
           float: none !important;
           display: flex !important;
           align-items: center !important;
           justify-content: center !important;
           flex: 1 1 auto !important;
           white-space: nowrap !important;
           list-style: none !important;
           position: relative !important;
       }
   
       .navborder .navbar-nav > li > a {
           color: #e2e8f0 !important;
           font-size: 12px !important;
           font-weight: 600 !important;
           text-transform: uppercase;
           letter-spacing: 0.015em;
           padding: 10px 6px !important;
           line-height: 1.2 !important;
           position: relative !important;
           white-space: nowrap !important;
           display: inline-flex !important;
           align-items: center !important;
           justify-content: center !important;
           width: 100% !important;
           text-align: center !important;
           transition: var(--transition);
           background: transparent !important;
       }
   
       .navborder .navbar-nav > li > a:hover,
       .navborder .navbar-nav > li > a:focus,
       .navborder .navbar-nav > li.open > a {
           color: #ffffff !important;
           background: rgba(255, 255, 255, 0.08) !important;
       }
   
       .navborder .navbar-nav > li.active > a {
           color: var(--accent-gold) !important;
           background: rgba(245, 158, 11, 0.12) !important;
           font-weight: 700 !important;
       }
   
       .navborder .navbar-nav > li.active > a::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 4px;
           right: 4px;
           height: 3px;
           background: var(--accent-gold);
           border-radius: 2px 2px 0 0;
       }
   
       .navborder .navbar-nav > li > a .caret {
           margin-left: 3px !important;
           border-top-color: currentColor !important;
           transition: var(--transition);
       }
   
       .navborder .navbar-nav > li.open > a .caret {
           transform: rotate(180deg);
       }
   }
   
   @media (min-width: 992px) and (max-width: 1199px) {
       .header-brand-text .school-name {
           font-size: 16px !important;
       }
   
       .header-brand .logo img {
           height: 50px !important;
       }
   
       .fit-india-logo img {
           height: 38px !important;
       }
   
       .header-phone-item {
           padding: 4px 8px !important;
       }
   
       .header-phone-item .he-text span {
           font-size: 11.5px !important;
       }
   
       .header-login-item .complainbtn {
           padding: 6px 14px !important;
           font-size: 11.5px !important;
       }
   
       .navborder .navbar-nav > li > a {
           font-size: 10.5px !important;
           padding: 12px 4px !important;
           letter-spacing: 0 !important;
       }
   
       .navborder .navbar-nav > li > a .caret {
           margin-left: 2px !important;
       }
   }
   
   @media (min-width: 1200px) and (max-width: 1399px) {
       .navborder .navbar-nav > li > a {
           font-size: 12px !important;
           padding: 14px 8px !important;
       }
   }
   
   @media (min-width: 1400px) {
       .navborder .navbar-nav > li > a {
           font-size: 13px !important;
           padding: 15px 12px !important;
       }
   }
   
   /* Modern Dropdown Menu */
   .navborder .dropdown-menu {
       background: #ffffff !important;
       border: 1px solid var(--border-color) !important;
       border-top: 3px solid var(--accent-gold) !important;
       border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
       box-shadow: 0 16px 36px rgba(11, 31, 58, 0.18) !important;
       padding: 8px 0 !important;
       min-width: 250px !important;
       margin-top: 0 !important;
       animation: dropdownFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   @keyframes dropdownFade {
       from { opacity: 0; transform: translateY(8px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   .navborder .dropdown-menu > li > a {
       color: var(--text-primary) !important;
       font-size: 13px !important;
       font-weight: 500 !important;
       padding: 10px 22px !important;
       transition: var(--transition);
       display: flex;
       align-items: center;
       position: relative;
   }
   
   .navborder .dropdown-menu > li > a:hover {
       color: var(--primary-royal) !important;
       background-color: var(--bg-soft) !important;
       padding-left: 28px !important;
       font-weight: 600 !important;
   }
   
   .navborder .dropdown-menu > li > a::before {
       content: '›';
       position: absolute;
       left: 14px;
       opacity: 0;
       font-size: 16px;
       font-weight: 700;
       color: var(--accent-gold);
       transition: var(--transition);
   }
   
   .navborder .dropdown-menu > li > a:hover::before {
       opacity: 1;
   }
   
   .navborder .dropdown-menu > li + li {
       border-top: 1px solid var(--border-light);
   }
   
   /* Sticky Header Behavior */
   .website-site-header.affix {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1050;
       box-shadow: 0 8px 30px rgba(11, 31, 58, 0.15);
       animation: stickySlideDown 0.35s ease-out;
   }
   
   @keyframes stickySlideDown {
       from { transform: translateY(-100%); }
       to { transform: translateY(0); }
   }
   
   .website-site-header.affix .topsection {
       display: none !important;
   }
   
   .website-site-header.affix header {
       padding: 4px 0 0 !important;
   }
   
   .website-site-header.affix .header-brand .logo img {
       height: 42px !important;
   }
   
   /* ==========================================================================
      HERO SLIDER / CAROUSEL
      ========================================================================== */
   #bootstrap-touch-slider {
       position: relative;
       overflow: hidden;
       background: var(--primary-dark);
   }
   
   #bootstrap-touch-slider .carousel-inner .item {
       position: relative;
   }
   
   #bootstrap-touch-slider .carousel-inner .item img {
       width: 100%;
       max-height: 580px;
       object-fit: cover;
       object-position: center;
       filter: brightness(0.96);
       transition: transform 6s ease;
   }
   
   #bootstrap-touch-slider .carousel-inner .item.active img {
       transform: scale(1.03);
   }
   
   #bootstrap-touch-slider .carousel-inner .item::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 120px;
       background: linear-gradient(180deg, transparent 0%, rgba(11, 31, 58, 0.5) 100%);
       pointer-events: none;
   }
   
   /* Modern Carousel Controls */
   #bootstrap-touch-slider .carousel-control {
       width: 50px;
       height: 50px;
       top: 50%;
       transform: translateY(-50%);
       border-radius: 50%;
       background: rgba(11, 31, 58, 0.5) !important;
       backdrop-filter: blur(8px);
       opacity: 0.7;
       margin: 0 25px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid rgba(255, 255, 255, 0.25);
       transition: var(--transition);
   }
   
   #bootstrap-touch-slider .carousel-control:hover {
       opacity: 1;
       background: var(--accent-gold-gradient) !important;
       border-color: transparent;
       transform: translateY(-50%) scale(1.1);
       box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
   }
   
   #bootstrap-touch-slider .carousel-control .fa {
       font-size: 22px;
       color: #ffffff;
   }
   
   /* ==========================================================================
      SERVICES / 4 QUICK ACTION CARDS
      ========================================================================== */
   .home-page-content {
       margin-top: -45px;
       position: relative;
       z-index: 10;
   }
   
   .services {
       margin: 0;
       padding: 0;
   }
   
   .service-box {
       margin-bottom: 24px;
       padding: 0 12px;
   }
   
   .service-box-content {
       background: #ffffff;
       border-radius: var(--radius-lg);
       padding: 24px 20px;
       box-shadow: var(--shadow-md);
       border: 1px solid var(--border-color);
       position: relative;
       overflow: hidden;
       transition: var(--transition);
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       min-height: 155px;
       justify-content: center;
   }
   
   .service-box-content::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: var(--primary-gradient);
       transition: var(--transition);
   }
   
   .service-box:nth-child(1) .service-box-content::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
   .service-box:nth-child(2) .service-box-content::before { background: linear-gradient(90deg, #059669, #10b981); }
   .service-box:nth-child(3) .service-box-content::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
   .service-box:nth-child(4) .service-box-content::before { background: linear-gradient(90deg, #e11d48, #f43f5e); }
   
   .service-box-content:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-hover);
       border-color: rgba(37, 99, 235, 0.2);
   }
   
   .service-box-icon {
       width: 64px;
       height: 64px;
       border-radius: var(--radius-md);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 12px;
       transition: var(--transition);
   }
   
   .service-box:nth-child(1) .service-box-icon { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
   .service-box:nth-child(2) .service-box-icon { background: rgba(16, 185, 129, 0.1); color: #059669; }
   .service-box:nth-child(3) .service-box-icon { background: rgba(245, 158, 11, 0.1); color: #d97706; }
   .service-box:nth-child(4) .service-box-icon { background: rgba(225, 29, 72, 0.1); color: #e11d48; }
   
   .service-box-content:hover .service-box-icon {
       transform: scale(1.1) rotate(4deg);
   }
   
   .service-box:nth-child(1):hover .service-box-icon { background: #2563eb; color: #ffffff; }
   .service-box:nth-child(2):hover .service-box-icon { background: #059669; color: #ffffff; }
   .service-box:nth-child(3):hover .service-box-icon { background: #d97706; color: #ffffff; }
   .service-box:nth-child(4):hover .service-box-icon { background: #e11d48; color: #ffffff; }
   
   .service-box-icon .fa {
       font-size: 26px !important;
   }
   
   .service-box-content h3 {
       margin: 0 !important;
       font-size: 16px !important;
       font-weight: 700 !important;
   }
   
   .service-box-content h3 a {
       color: var(--primary-navy) !important;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       transition: var(--transition);
   }
   
   .service-box-content h3 a::after {
       content: '→';
       font-size: 14px;
       transition: var(--transition);
       opacity: 0.6;
   }
   
   .service-box-content:hover h3 a {
       color: var(--primary-light) !important;
   }
   
   .service-box-content:hover h3 a::after {
       transform: translateX(4px);
       opacity: 1;
   }
   
   /* ==========================================================================
      ABOUT US SECTION
      ========================================================================== */
   .home-about-section {
       padding: 70px 0;
       background: #ffffff;
       position: relative;
   }
   
   .home-about-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, var(--border-color), transparent);
   }
   
   .aboutsection {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
   }
   
   .home-about-text {
       padding-right: 40px;
   }
   
   .home-about-text .section-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(37, 99, 235, 0.08);
       color: var(--primary-light);
       font-size: 12px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       padding: 6px 14px;
       border-radius: var(--radius-full);
       margin-bottom: 12px;
       border: 1px solid rgba(37, 99, 235, 0.15);
   }
   
   .home-about-text h2 {
       font-size: 34px !important;
       font-weight: 800 !important;
       color: var(--primary-navy) !important;
       margin-top: 0;
       margin-bottom: 20px;
       line-height: 1.25;
   }
   
   .home-about-text h2 span {
       color: var(--accent-gold-dark);
   }
   
   .home-about-text p {
       font-size: 15px;
       color: var(--text-secondary);
       line-height: 1.8;
       margin-bottom: 24px;
   }
   
   .home-about-features {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 16px;
       margin-top: 24px;
       margin-bottom: 28px;
   }
   
   .home-about-feature-item {
       display: flex;
       align-items: center;
       gap: 12px;
       background: var(--bg-light);
       padding: 12px 16px;
       border-radius: var(--radius-md);
       border: 1px solid var(--border-color);
   }
   
   .home-about-feature-item .icon-circle {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: var(--accent-gold-light);
       color: var(--accent-gold-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 15px;
       flex-shrink: 0;
   }
   
   .home-about-feature-item span {
       font-size: 13px;
       font-weight: 700;
       color: var(--primary-navy);
   }
   
   .home-about-image {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .home-about-image img {
       border-radius: var(--radius-xl) !important;
       box-shadow: var(--shadow-lg) !important;
       width: 100%;
       max-width: 100%;
       height: auto;
       object-fit: cover;
       border: 6px solid #ffffff;
       transition: var(--transition);
       display: block;
   }
   
   .home-about-image:hover img {
       transform: translateY(-4px);
       box-shadow: var(--shadow-hover) !important;
   }
   
   @media (max-width: 991px) {
       .aboutsection {
           display: block;
       }
   
       .home-about-text {
           padding-right: 0;
           margin-bottom: 20px;
       }
   
       .home-about-image {
           width: 100%;
           margin: 0 auto;
       }
   }
   
   @media (max-width: 767px) {
       .home-about-section {
           padding: 50px 0 30px;
       }
   
       .home-about-text h2 {
           font-size: 26px !important;
       }
   
       .home-about-features {
           grid-template-columns: 1fr;
       }
   
       .home-about-image {
           margin-bottom: 0;
       }
   
       .home-about-image img {
           border-width: 4px;
       }
   }
   
   /* ==========================================================================
      SREE NARAYANA GURU REVERENCE SECTION (MATCHING REFERENCE / RESPONSIVE)
      ========================================================================== */
   section.gurusection,
   .gurusection {
       background: #fef2d1 !important;
       background-color: #fef2d1 !important;
       background-image: none !important;
       padding: 55px 0 60px !important;
       border-top: none !important;
       border-bottom: none !important;
       position: relative;
       overflow: hidden;
   }
   
   section.gurusection::before,
   .gurusection::before {
       display: none !important;
       content: none !important;
   }
   
   section.gurusection .guru-section-row,
   .guru-section-row {
       display: flex !important;
       flex-wrap: wrap !important;
       align-items: flex-start !important;
       margin-left: -15px;
       margin-right: -15px;
   }
   
   section.gurusection .guru-section-row::before,
   section.gurusection .guru-section-row::after,
   .guru-section-row::before,
   .guru-section-row::after {
       display: none !important;
       content: none !important;
   }
   
   .guru-left-col {
       width: 100%;
       text-align: left !important;
       padding: 0 !important;
   }
   
   section.gurusection .guru-main-title,
   .guru-main-title {
       display: block !important;
       width: 100% !important;
       margin: 0 0 22px 0 !important;
       color: #2f2f2f !important;
       font-size: 30px !important;
       font-weight: 700 !important;
       line-height: 1.2 !important;
       text-align: left !important;
       position: static !important;
       font-family: inherit !important;
   }
   
   section.gurusection .guru-main-title::after,
   .guru-main-title::after {
       display: none !important;
       content: none !important;
   }
   
   section.gurusection .guru-img-wrap,
   .guru-img-wrap {
       display: block !important;
       position: relative;
       padding: 0 !important;
       background: transparent !important;
       border-radius: 14px !important;
       box-shadow: none !important;
       border: none !important;
       margin: 0 !important;
       max-width: 300px;
   }
   
   section.gurusection .guru-portrait,
   .guru-portrait {
       display: block !important;
       width: 100% !important;
       max-width: 300px !important;
       aspect-ratio: 1 / 1 !important;
       height: auto !important;
       object-fit: cover !important;
       border-radius: 14px !important;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
       border: none !important;
       transition: transform 0.3s ease, box-shadow 0.3s ease !important;
   }
   
   section.gurusection .guru-img-wrap:hover .guru-portrait,
   .guru-img-wrap:hover .guru-portrait {
       transform: translateY(-2px) !important;
       box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
   }
   
   section.gurusection .guru-content,
   .guru-content {
       background: transparent !important;
       padding: 0 !important;
       border-radius: 0 !important;
       box-shadow: none !important;
       border: none !important;
       color: #3a3a3a !important;
       line-height: 1.85 !important;
       font-size: 15px !important;
       text-align: justify !important;
       position: static !important;
   }
   
   section.gurusection .guru-quote-lead,
   .guru-quote-lead {
       display: none !important;
   }
   
   section.gurusection .guru-content p,
   .guru-content p {
       color: #3a3a3a !important;
       line-height: 1.85 !important;
       font-size: 15px !important;
       margin-bottom: 18px !important;
       font-family: inherit !important;
   }
   
   section.gurusection .guru-content p:last-child,
   .guru-content p:last-child {
       margin-bottom: 0 !important;
   }
   
   section.gurusection .guru-readmore-wrap,
   .guru-readmore-wrap {
       margin: 22px 0 0 !important;
       text-align: left !important;
   }
   
   section.gurusection .btn-read,
   .guru-content .btn-read,
   .guru-readmore-wrap .btn-read {
       display: inline-block !important;
       background: #bd0745 !important;
       color: #ffffff !important;
       font-size: 14px !important;
       font-weight: 700 !important;
       text-transform: uppercase !important;
       padding: 10px 18px !important;
       border-radius: 0 !important;
       border: 1px solid #bd0745 !important;
       box-shadow: none !important;
       outline: 0 !important;
       cursor: pointer !important;
       line-height: 1.42857143 !important;
       letter-spacing: 0.5px !important;
       transition: all 0.3s ease !important;
       text-decoration: none !important;
       transform: none !important;
   }
   
   section.gurusection .btn-read::after,
   .guru-content .btn-read::after,
   .guru-readmore-wrap .btn-read::after {
       display: none !important;
       content: none !important;
   }
   
   section.gurusection .btn-read:hover,
   section.gurusection .btn-read:focus,
   .guru-content .btn-read:hover,
   .guru-content .btn-read:focus,
   .guru-readmore-wrap .btn-read:hover,
   .guru-readmore-wrap .btn-read:focus {
       background: #960537 !important;
       border-color: #960537 !important;
       color: #ffffff !important;
       box-shadow: 0 4px 12px rgba(189, 7, 69, 0.25) !important;
       transform: translateY(-1px) !important;
   }
   
   /* Responsive: Sree Narayana Guru Section */
   @media (min-width: 992px) {
       section.gurusection .guru-section-row,
       .guru-section-row {
           display: flex !important;
           flex-direction: row !important;
           align-items: flex-start !important;
       }
   
       section.gurusection .guru-main-title,
       .guru-main-title {
           text-align: left !important;
       }
   
       section.gurusection .guru-portrait,
       .guru-portrait {
           margin: 0 !important;
       }
   
       section.gurusection .guru-readmore-wrap,
       .guru-readmore-wrap {
           text-align: left !important;
       }
   }
   
   @media (max-width: 991px) {
       section.gurusection,
       .gurusection {
           padding: 42px 0 !important;
       }
   
       section.gurusection .guru-section-row,
       .guru-section-row {
           flex-direction: column !important;
           align-items: center !important;
       }
   
       .guru-left-col {
           text-align: center !important;
           margin-bottom: 24px !important;
       }
   
       section.gurusection .guru-main-title,
       .guru-main-title {
           text-align: center !important;
           font-size: 26px !important;
           margin-bottom: 18px !important;
       }
   
       section.gurusection .guru-img-wrap,
       .guru-img-wrap {
           margin: 0 auto !important;
       }
   
       section.gurusection .guru-portrait,
       .guru-portrait {
           margin: 0 auto !important;
           max-width: 260px !important;
       }
   
       section.gurusection .guru-content,
       .guru-content {
           margin-top: 0 !important;
           padding: 0 !important;
           text-align: left !important;
       }
   
       section.gurusection .guru-readmore-wrap,
       .guru-readmore-wrap {
           text-align: left !important;
       }
   }
   
   @media (max-width: 767px) {
       section.gurusection,
       .gurusection {
           padding: 32px 0 !important;
       }
   
       section.gurusection .guru-main-title,
       .guru-main-title {
           font-size: 24px !important;
           margin-bottom: 16px !important;
       }
   
       .guru-left-col {
           margin-bottom: 20px !important;
       }
   
       section.gurusection .guru-portrait,
       .guru-portrait {
           max-width: 220px !important;
       }
   
       section.gurusection .guru-content,
       .guru-content {
           font-size: 14px !important;
           line-height: 1.75 !important;
           text-align: left !important;
       }
   
       section.gurusection .guru-content p,
       .guru-content p {
           font-size: 14px !important;
           line-height: 1.75 !important;
           margin-bottom: 14px !important;
       }
   
       section.gurusection .guru-readmore-wrap,
       .guru-readmore-wrap {
           margin-top: 18px !important;
           text-align: left !important;
       }
   
       section.gurusection .btn-read,
       .guru-content .btn-read,
       .guru-readmore-wrap .btn-read {
           padding: 9px 16px !important;
           font-size: 13px !important;
       }
   }
   
   @media (max-width: 480px) {
       section.gurusection,
       .gurusection {
           padding: 26px 0 !important;
       }
   
       section.gurusection .guru-main-title,
       .guru-main-title {
           font-size: 22px !important;
       }
   
       section.gurusection .guru-portrait,
       .guru-portrait {
           max-width: 190px !important;
       }
   
       section.gurusection .guru-content,
       .guru-content {
           font-size: 13.5px !important;
       }
   
       section.gurusection .guru-content p,
       .guru-content p {
           font-size: 13.5px !important;
       }
   }
   
   .btn-read {
       display: inline-flex !important;
       align-items: center;
       gap: 8px;
       background: var(--primary-gradient) !important;
       color: #ffffff !important;
       font-size: 13.5px !important;
       font-weight: 700 !important;
       padding: 10px 24px !important;
       border-radius: var(--radius-full) !important;
       box-shadow: 0 6px 18px rgba(11, 31, 58, 0.2) !important;
       transition: var(--transition) !important;
       border: none !important;
   }
   
   .btn-read::after {
       content: '→';
       font-size: 14px;
       transition: var(--transition);
   }
   
   .btn-read:hover {
       background: var(--accent-gold-gradient) !important;
       color: #ffffff !important;
       transform: translateY(-2px);
       box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important;
   }
   
   .btn-read:hover::after {
       transform: translateX(4px);
   }
   
   /* ==========================================================================
      OUR PRINCIPAL'S MESSAGE SECTION
      ========================================================================== */
   .principalmessage {
       padding: 70px 0 !important;
       background: var(--primary-navy) !important;
       color: #ffffff !important;
       position: relative;
       overflow: hidden;
   }
   
   .principalmessage::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.25) 0%, transparent 70%);
       pointer-events: none;
   }
   
   .principal-section-row {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
   }
   
   .principalmessage h2 {
       font-size: 32px !important;
       font-weight: 800 !important;
       color: #ffffff !important;
       margin-top: 0;
       margin-bottom: 20px;
       position: relative;
   }
   
   .principalmessage h2::after {
       content: '';
       display: block;
       width: 60px;
       height: 3px;
       background: var(--accent-gold);
       margin-top: 10px;
       border-radius: 2px;
   }
   
   .principal-content {
       background: rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.1);
       padding: 30px;
       border-radius: var(--radius-lg);
       margin-bottom: 20px;
   }
   
   .principal-content p {
       font-size: 14.5px;
       color: #cbd5e1;
       line-height: 1.8;
       margin-bottom: 12px;
   }
   
   .principal-content .principal-name-heading,
   .principal-content h4.principal-name-heading {
       color: #ffffff !important;
       font-size: 20px !important;
       font-weight: 700 !important;
       line-height: 1.4 !important;
       margin-top: 0 !important;
       margin-bottom: 14px !important;
       letter-spacing: 0.3px;
       display: block !important;
   }
   
   .principal-readmore-wrap .btn-read-light {
       background: var(--accent-gold-gradient) !important;
       color: #ffffff !important;
       box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35) !important;
   }
   
   .principal-readmore-wrap .btn-read-light:hover {
       background: #ffffff !important;
       color: var(--primary-navy) !important;
   }
   
   .ourprencipal {
       text-align: center;
       padding: 20px;
   }
   
   .principal-photo-wrap {
       position: relative;
       display: inline-block;
       padding: 8px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: var(--radius-xl);
       border: 2px solid rgba(245, 158, 11, 0.5);
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
   }
   
   .principal-portrait {
       width: 240px;
       height: 290px;
       object-fit: cover;
       border-radius: calc(var(--radius-xl) - 6px);
       transition: var(--transition);
   }
   
   .principal-photo-wrap:hover .principal-portrait {
       transform: scale(1.02);
   }
   
   .ourprencipal h4 {
       color: #ffffff !important;
       font-size: 20px !important;
       font-weight: 800 !important;
       margin-top: 16px;
       margin-bottom: 4px;
   }
   
   .ourprencipal .principal-badge-title {
       display: inline-block;
       font-size: 13px;
       font-weight: 700;
       color: var(--accent-gold);
       text-transform: uppercase;
       letter-spacing: 0.08em;
   }
   
   /* ==========================================================================
      3-COLUMN INTERACTIVE HUB (NOTICES, EVENTS, ACHIEVEMENTS)
      ========================================================================== */
   .threesection {
       padding: 70px 0 !important;
       background: var(--bg-soft) !important;
   }
   
   .home-widgets-row {
       display: flex;
       flex-wrap: wrap;
   }
   
   .home-widget-col {
       margin-bottom: 30px;
   }
   
   .home-widget-title {
       font-size: 22px !important;
       font-weight: 800 !important;
       color: var(--primary-navy) !important;
       margin-top: 0;
       margin-bottom: 16px;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   
   .home-widget-title .widget-icon-pill {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: var(--accent-gold-light);
       color: var(--accent-gold-dark);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
   }
   
   .home-widget-panel {
       background: #ffffff !important;
       border-radius: var(--radius-lg) !important;
       box-shadow: var(--shadow-md) !important;
       border: 1px solid var(--border-color) !important;
       height: 420px !important;
       padding: 16px !important;
       overflow: hidden;
       position: relative;
       display: flex;
       flex-direction: column;
   }
   
   /* Notice Board & Events Scroll Track */
   .home-widget-scroll-wrap {
       height: 100%;
       overflow: hidden;
       position: relative;
   }
   
   .home-widget-scroll-track {
       animation: smoothVerticalScroll 26s linear infinite;
   }
   
   .home-widget-scroll-wrap:hover .home-widget-scroll-track {
       animation-play-state: paused !important;
   }
   
   @keyframes smoothVerticalScroll {
       0% { transform: translateY(0); }
       100% { transform: translateY(-50%); }
   }
   
   .home-widget-list {
       margin: 0 !important;
       padding: 0 !important;
       list-style: none !important;
   }
   
   .home-widget-list li {
       margin-bottom: 12px;
   }
   
   .home-widget-card {
       background: var(--bg-light);
       border: 1px solid var(--border-color);
       border-radius: var(--radius-md);
       padding: 12px 14px;
       transition: var(--transition);
       display: block;
       position: relative;
   }
   
   .home-widget-card:hover {
       background: #ffffff;
       border-color: var(--primary-light);
       box-shadow: var(--shadow-sm);
       transform: translateX(4px);
   }
   
   .home-widget-date {
       display: inline-flex !important;
       align-items: center;
       gap: 4px;
       font-size: 11px !important;
       font-weight: 700 !important;
       color: var(--primary-royal) !important;
       background: rgba(37, 99, 235, 0.08);
       padding: 2px 8px;
       border-radius: var(--radius-full);
       margin-bottom: 6px;
   }
   
   .home-widget-date::before {
       content: '\f073';
       font-family: 'FontAwesome';
       font-size: 10px;
   }
   
   .home-widget-card-title, .home-widget-card-text {
       font-size: 13px !important;
       font-weight: 600 !important;
       color: var(--text-primary) !important;
       line-height: 1.45 !important;
       display: block;
       transition: var(--transition);
   }
   
   .home-widget-card:hover .home-widget-card-title,
   .home-widget-card:hover .home-widget-card-text {
       color: var(--primary-royal) !important;
   }
   
   /* Modern NEW Badge */
   .home-widget-newimage {
       display: inline-block;
       margin-top: 4px;
   }
   
   .badge-new-chip {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       background: linear-gradient(135deg, #ef4444, #dc2626);
       color: #ffffff;
       font-size: 9.5px;
       font-weight: 800;
       padding: 1px 7px;
       border-radius: 4px;
       letter-spacing: 0.05em;
       animation: badgePulse 2s infinite;
   }
   
   @keyframes badgePulse {
       0%, 100% { opacity: 1; transform: scale(1); }
       50% { opacity: 0.85; transform: scale(1.05); }
   }
   
   /* Our Achievements Spotlight Carousel */
   .home-achievement-carousel {
       height: 100%;
       position: relative;
       border-radius: var(--radius-md);
       overflow: hidden;
   }
   
   .home-achievement-carousel .carousel-inner {
       height: 100%;
   }
   
   .home-achievement-carousel .item {
       height: 100%;
   }
   
   .home-achievement-link {
       display: block;
       height: 100%;
       position: relative;
       border-radius: var(--radius-md);
       overflow: hidden;
   }
   
   .home-achievement-image-wrap {
       width: 100%;
       height: 290px;
       overflow: hidden;
       position: relative;
       background: var(--primary-dark);
   }
   
   .home-achievement-img-main {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s ease;
   }
   
   .home-achievement-link:hover .home-achievement-img-main {
       transform: scale(1.06);
   }
   
   .home-achievement-caption {
       background: #ffffff;
       padding: 14px 16px;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       border-top: 1px solid var(--border-color);
   }
   
   .home-achievement-caption p {
       font-size: 13.5px;
       font-weight: 700;
       color: var(--primary-navy);
       margin: 0;
       line-height: 1.4;
   }
   
   .home-achievement-nav {
       width: 36px !important;
       height: 36px !important;
       border-radius: 50% !important;
       background: rgba(11, 31, 58, 0.6) !important;
       display: flex !important;
       align-items: center;
       justify-content: center;
       top: 38% !important;
       transform: translateY(-50%);
       opacity: 0.8 !important;
       transition: var(--transition);
   }
   
   .home-achievement-nav:hover {
       background: var(--accent-gold-gradient) !important;
       opacity: 1 !important;
   }
   
   .home-achievement-nav .fa {
       font-size: 16px;
       color: #ffffff;
   }
   
   .home-widget-viewall {
       margin-top: 14px;
       text-align: right;
   }
   
   .btn-home-viewall {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 12.5px;
       font-weight: 700;
       color: var(--primary-royal);
       background: #ffffff;
       padding: 6px 14px;
       border-radius: var(--radius-full);
       border: 1px solid var(--border-color);
       box-shadow: var(--shadow-xs);
       transition: var(--transition);
   }
   
   .btn-home-viewall:hover {
       background: var(--primary-gradient);
       color: #ffffff !important;
       border-color: transparent;
       transform: translateY(-2px);
       box-shadow: var(--shadow-sm);
   }
   
   /* ==========================================================================
      FACILITIES & CELEBRATIONS CAROUSEL
      ========================================================================== */
   .facilitieswrapper, .celebrationswrapper {
       padding: 70px 0 !important;
       position: relative;
   }
   
   .facilitieswrapper {
       background: #ffffff !important;
   }
   
   .celebrationswrapper {
       background: var(--bg-soft) !important;
   }
   
   .facilities-heading-wrap, .home-section-heading-wrap {
       margin-bottom: 40px;
       position: relative;
   }
   
   .facilities-title, .home-section-title {
       font-size: 32px !important;
       font-weight: 800 !important;
       color: var(--primary-navy) !important;
       margin: 0;
       position: relative;
       display: inline-block;
   }
   
   .facilities-title::after, .home-section-title::after {
       content: '';
       position: absolute;
       bottom: -10px;
       left: 50%;
       transform: translateX(-50%);
       width: 60px;
       height: 3px;
       background: var(--accent-gold-gradient);
       border-radius: 2px;
   }
   
   .facility-card, .celebration-card {
       background: #ffffff;
       border-radius: var(--radius-lg);
       overflow: hidden;
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);
       transition: var(--transition);
       margin: 10px 0;
   }
   
   .facility-card:hover, .celebration-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-hover);
       border-color: rgba(37, 99, 235, 0.2);
   }
   
   .facility-card-img, .celebration-card-img {
       height: 200px;
       overflow: hidden;
       position: relative;
       background: var(--primary-dark);
   }
   
   .facility-card-img img, .celebration-card-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s ease;
   }
   
   .facility-card:hover .facility-card-img img,
   .celebration-card:hover .celebration-card-img img {
       transform: scale(1.08);
   }
   
   .facility-card-body, .celebration-card-body {
       padding: 20px;
   }
   
   .facility-card-body h4, .celebration-card-body h4 {
       font-size: 17px !important;
       font-weight: 700 !important;
       color: var(--primary-navy) !important;
       margin-top: 0;
       margin-bottom: 8px;
       line-height: 1.35;
   }
   
   .facility-card-body p, .celebration-card-body p {
       font-size: 13.5px;
       color: var(--text-muted);
       line-height: 1.6;
       margin: 0;
   }
   
   /* Owl Carousel Custom Arrows */
   .owl-theme .owl-nav {
       margin-top: 20px;
   }
   
   .owl-prev, .owl-next {
       width: 44px !important;
       height: 44px !important;
       border-radius: 50% !important;
       background: #ffffff !important;
       box-shadow: var(--shadow-md) !important;
       color: var(--primary-navy) !important;
       display: inline-flex !important;
       align-items: center;
       justify-content: center;
       font-size: 18px !important;
       border: 1px solid var(--border-color) !important;
       transition: var(--transition) !important;
   }
   
   .owl-prev:hover, .owl-next:hover {
       background: var(--primary-gradient) !important;
       color: #ffffff !important;
       transform: scale(1.08);
   }
   
   /* ==========================================================================
      WHAT WE CARE (FEATURE GRID) & TESTIMONIALS
      ========================================================================== */
   .testi {
       padding: 65px 0 75px !important;
       background: #ffffff !important;
       border-top: 1px solid var(--border-color);
       border-bottom: 1px solid var(--border-color);
   }
   
   .testi-header-wrap {
       margin-bottom: 24px;
   }
   
   .testi-badge-pill {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 11.5px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.07em;
       color: var(--primary-light);
       background: rgba(37, 99, 235, 0.08);
       padding: 4px 12px;
       border-radius: var(--radius-full);
       margin-bottom: 8px;
   }
   
   .testi-badge-pill i {
       font-size: 11px;
   }
   
   .testi h2,
   .testi-col-title {
       font-size: 26px !important;
       font-weight: 800 !important;
       color: var(--primary-navy) !important;
       margin-top: 0 !important;
       margin-bottom: 0 !important;
       position: relative !important;
       line-height: 1.25 !important;
       display: inline-block;
   }
   
   .testi h2::after,
   .testi-col-title::after {
       content: '';
       display: block;
       width: 44px;
       height: 3.5px;
       background: var(--accent-gold-gradient);
       margin-top: 8px;
       border-radius: 2px;
   }
   
   /* What We Care Modern Grid */
   .wecareall {
       list-style: none !important;
       margin: 0 !important;
       padding: 0 !important;
       display: grid !important;
       grid-template-columns: repeat(2, 1fr) !important;
       gap: 13px !important;
       float: none !important;
       width: 100% !important;
   }
   
   .wecareall li,
   .wecareall li.care-card {
       background: #ffffff !important;
       border: 1px solid #e2e8f0 !important;
       border-radius: 14px !important;
       padding: 13px 15px !important;
       display: flex !important;
       align-items: center !important;
       gap: 13px !important;
       transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
       float: none !important;
       width: 100% !important;
       min-height: 74px !important;
       box-sizing: border-box !important;
       box-shadow: 0 2px 6px rgba(11, 31, 58, 0.04) !important;
       position: relative !important;
       clear: none !important;
       margin: 0 !important;
   }
   
   .wecareall li:hover,
   .wecareall li.care-card:hover {
       background: #ffffff !important;
       box-shadow: 0 10px 24px rgba(11, 31, 58, 0.09) !important;
       transform: translateY(-3px) !important;
   }
   
   /* Icon Squircle Box */
   .care-icon-box,
   .wecareall li i {
       width: 46px !important;
       height: 46px !important;
       border-radius: 12px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       flex-shrink: 0 !important;
       transition: transform 0.25s ease !important;
       float: none !important;
       margin: 0 !important;
   }
   
   .wecareall li:hover .care-icon-box,
   .wecareall li:hover i {
       transform: scale(1.08) !important;
   }
   
   .care-icon-box i,
   .wecareall li i {
       font-size: 18px !important;
       color: #ffffff !important;
       margin: 0 !important;
       line-height: 1 !important;
   }
   
   /* Thematic Color Accents & Badges */
   .care-theme-shield {
       border-left: 3.5px solid #2563eb !important;
   }
   .care-theme-shield .care-icon-box {
       background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
       box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
   }
   .care-theme-shield:hover {
       border-color: #93c5fd !important;
       border-left-color: #2563eb !important;
   }
   
   .care-theme-cctv {
       border-left: 3.5px solid #059669 !important;
   }
   .care-theme-cctv .care-icon-box {
       background: linear-gradient(135deg, #059669, #047857) !important;
       box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
   }
   .care-theme-cctv:hover {
       border-color: #6ee7b7 !important;
       border-left-color: #059669 !important;
   }
   
   .care-theme-complex {
       border-left: 3.5px solid #d97706 !important;
   }
   .care-theme-complex .care-icon-box {
       background: linear-gradient(135deg, #f59e0b, #d97706) !important;
       box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
   }
   .care-theme-complex:hover {
       border-color: #fcd34d !important;
       border-left-color: #d97706 !important;
   }
   
   .care-theme-transport {
       border-left: 3.5px solid #6366f1 !important;
   }
   .care-theme-transport .care-icon-box {
       background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
       box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
   }
   .care-theme-transport:hover {
       border-color: #c7d2fe !important;
       border-left-color: #6366f1 !important;
   }
   
   .care-theme-sports {
       border-left: 3.5px solid #e11d48 !important;
   }
   .care-theme-sports .care-icon-box {
       background: linear-gradient(135deg, #e11d48, #be123c) !important;
       box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3) !important;
   }
   .care-theme-sports:hover {
       border-color: #fca5a5 !important;
       border-left-color: #e11d48 !important;
   }
   
   .care-theme-hall {
       border-left: 3.5px solid #8b5cf6 !important;
   }
   .care-theme-hall .care-icon-box {
       background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
       box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
   }
   .care-theme-hall:hover {
       border-color: #ddd6fe !important;
       border-left-color: #8b5cf6 !important;
   }
   
   /* Fallback if theme class is not present */
   .wecareall li:not([class*="care-theme-"]) .care-icon-box,
   .wecareall li:not([class*="care-theme-"]) > i {
       background: var(--primary-gradient) !important;
       box-shadow: 0 4px 10px rgba(11, 31, 58, 0.15) !important;
   }
   
   /* Card Content Typography */
   .care-content {
       display: flex !important;
       flex-direction: column !important;
       justify-content: center !important;
       min-width: 0 !important;
       flex: 1 1 auto !important;
   }
   
   .wecareall li span,
   .care-title {
       font-size: 13.5px !important;
       font-weight: 700 !important;
       color: var(--primary-navy) !important;
       line-height: 1.25 !important;
       margin: 0 0 3px 0 !important;
       display: block !important;
       padding-top: 0 !important;
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
   }
   
   .care-desc {
       font-size: 11.5px !important;
       color: #64748b !important;
       line-height: 1.35 !important;
       margin: 0 !important;
       display: block !important;
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       font-weight: 400 !important;
   }
   
   /* Testimonials Modern Quote Card */
   .home-testimonial-card {
       background: #ffffff !important;
       border: 1px solid #e2e8f0 !important;
       border-radius: 16px !important;
       padding: 30px 32px !important;
       position: relative !important;
       box-shadow: 0 4px 14px rgba(11, 31, 58, 0.05) !important;
       min-height: 254px !important;
       display: flex !important;
       flex-direction: column !important;
       justify-content: space-between !important;
       transition: all 0.3s ease !important;
   }
   
   .home-testimonial-card:hover {
       box-shadow: 0 10px 28px rgba(11, 31, 58, 0.08) !important;
   }
   
   .home-testimonial-card::before {
       content: '❝';
       position: absolute;
       top: 12px;
       right: 24px;
       font-size: 58px;
       line-height: 1;
       color: rgba(245, 158, 11, 0.2);
       font-family: Georgia, serif;
       pointer-events: none;
   }
   
   .testimonial-stars {
       color: #f59e0b !important;
       margin-bottom: 12px !important;
       font-size: 15px !important;
       display: flex !important;
       gap: 3px !important;
   }
   
   .home-testimonial-card p {
       font-size: 14.5px !important;
       font-style: italic !important;
       color: #475569 !important;
       line-height: 1.75 !important;
       margin-bottom: 16px !important;
       position: relative;
       z-index: 1;
       flex-grow: 1;
   }
   
   .home-testimonial-card h4 {
       font-size: 15px !important;
       font-weight: 800 !important;
       color: var(--primary-navy) !important;
       margin: 0 !important;
   }
   
   .home-testimonial-card h4::before {
       content: '— ';
       color: var(--accent-gold);
   }
   
   .home-testimonial-carousel {
       position: relative !important;
       padding: 0 48px !important;
   }
   
   .home-testimonial-carousel .carousel-control {
       width: 38px !important;
       height: 38px !important;
       top: 50% !important;
       transform: translateY(-50%) !important;
       margin-top: 0 !important;
       background: #ffffff !important;
       border: 1px solid #e2e8f0 !important;
       border-radius: 50% !important;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
       opacity: 1 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       transition: all 0.25s ease !important;
       text-shadow: none !important;
   }
   
   .home-testimonial-carousel .carousel-control:hover {
       background: var(--primary-navy) !important;
       border-color: var(--primary-navy) !important;
       box-shadow: 0 5px 14px rgba(11, 31, 58, 0.2) !important;
   }
   
   .home-testimonial-carousel .carousel-control .fa {
       color: var(--primary-navy) !important;
       font-size: 16px !important;
       line-height: 1 !important;
       transition: color 0.25s ease !important;
   }
   
   .home-testimonial-carousel .carousel-control:hover .fa {
       color: #ffffff !important;
   }
   
   /* ==========================================================================
      PHOTO GALLERY SECTION
      ========================================================================== */
   .photogallerydown {
       padding: 70px 0 !important;
       background: var(--bg-soft) !important;
   }
   
   .photogallery .eventbox {
       border-radius: var(--radius-lg);
       overflow: hidden;
       position: relative;
       background: var(--primary-dark);
       box-shadow: var(--shadow-sm);
       transition: var(--transition);
       height: 240px;
   }
   
   .photogallery .eventbox:hover {
       transform: translateY(-6px);
       box-shadow: var(--shadow-hover);
   }
   
   .photogallery .eventbox img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s ease;
   }
   
   .photogallery .eventbox:hover img {
       transform: scale(1.1);
   }
   
   .photogallery .evcontentfix {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(180deg, transparent 0%, rgba(11, 31, 58, 0.9) 100%);
       padding: 24px 16px 14px;
       transition: var(--transition);
   }
   
   .photogallery .evcontentfix h3 {
       color: #ffffff !important;
       font-size: 14px !important;
       font-weight: 700 !important;
       margin: 0;
       line-height: 1.35;
       text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
   }
   
   /* ==========================================================================
      MODERN FOOTER
      ========================================================================== */
   .site-footer {
       position: relative;
       background-color: var(--primary-navy);
       background-image: var(--sf-bg-image, none);
       background-size: cover;
       background-position: center center;
       background-repeat: no-repeat;
       color: #cbd5e1;
       border-top: 4px solid var(--accent-gold);
       overflow: hidden;
   }
   
   .site-footer::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       background: linear-gradient(180deg, rgba(7, 21, 39, 0.95) 0%, rgba(11, 31, 58, 0.98) 100%);
       pointer-events: none;
   }
   
   .site-footer a {
       text-decoration: none;
   }
   
   .site-footer__main {
       position: relative;
       z-index: 2;
       padding: 52px 0 44px;
   }
   
   .sf-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 34px;
   }
   
   .sf-col {
       min-width: 0;
   }
   
   /* ---------- Brand column ---------- */
   .sf-brand {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 16px;
   }
   
   .sf-brand__logo {
       display: inline-block;
       line-height: 1;
   }
   
   .sf-brand__logo img {
       display: block;
       max-height: 78px;
       max-width: 230px;
       width: auto;
       height: auto;
       object-fit: contain;
       background: #ffffff;
       padding: 6px 10px;
       border-radius: var(--radius-md);
   }
   
   .sf-brand__name {
       font-size: 22px !important;
       font-weight: 800 !important;
       color: #ffffff !important;
       line-height: 1.25;
       margin: 0 0 8px;
       overflow-wrap: break-word;
   }
   
   .sf-brand__affil {
       display: inline-block;
       font-size: 12px;
       font-weight: 700;
       color: var(--accent-gold);
       background: rgba(245, 158, 11, 0.12);
       border: 1px solid rgba(245, 158, 11, 0.28);
       padding: 4px 12px;
       border-radius: var(--radius-full);
       line-height: 1.4;
   }
   
   .sf-brand__about {
       margin: 0;
       font-size: 14.5px;
       color: #cbd5e1;
       line-height: 1.75;
   }
   
   /* ---------- Section titles ---------- */
   .sf-title {
       position: relative;
       font-size: 18px !important;
       font-weight: 800 !important;
       color: #ffffff !important;
       margin: 0 0 18px;
       padding-bottom: 12px;
       letter-spacing: -0.01em;
   }
   
   .sf-title::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: 0;
       width: 42px;
       height: 3px;
       border-radius: 2px;
       background: var(--accent-gold-gradient);
   }
   
   /* ---------- Link lists ---------- */
   .sf-links {
       list-style: none;
       margin: 0;
       padding: 0;
   }
   
   .sf-links li {
       margin: 0;
   }
   
   .sf-links a {
       position: relative;
       display: flex;
       align-items: center;
       gap: 10px;
       min-height: 42px;
       padding: 8px 0;
       color: #cbd5e1;
       font-size: 14.5px;
       font-weight: 500;
       line-height: 1.5;
       overflow-wrap: break-word;
       transition: var(--transition);
   }
   
   .sf-links a::before {
       content: '\f105';
       font-family: FontAwesome;
       font-size: 14px;
       line-height: 1;
       color: var(--accent-gold);
       flex: 0 0 auto;
       transition: var(--transition);
   }
   
   .sf-links a:hover,
   .sf-links a:focus {
       color: var(--accent-gold);
       transform: translateX(5px);
   }
   
   /* ---------- Social icons ---------- */
   .sf-social {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin: 0;
       padding: 0;
   }
   
   .sf-social a {
       width: 42px;
       height: 42px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.15);
       color: #ffffff !important;
       font-size: 18px;
       transition: var(--transition);
   }
   
   .sf-social a:hover,
   .sf-social a:focus {
       background: var(--accent-gold-gradient);
       border-color: transparent;
       transform: translateY(-4px);
       box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
   }
   
   /* ---------- Contact column ---------- */
   .sf-contact-list {
       list-style: none;
       display: grid;
       gap: 12px;
       margin: 0 0 18px;
       padding: 0;
   }
   
   .sf-contact-item {
       display: flex;
       align-items: flex-start;
       gap: 14px;
       padding: 14px 16px;
       border-radius: var(--radius-md);
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.09);
       transition: var(--transition);
   }
   
   .sf-contact-item:hover {
       background: rgba(255, 255, 255, 0.09);
       border-color: rgba(245, 158, 11, 0.35);
       transform: translateY(-2px);
   }
   
   .sf-contact-item__icon {
       flex: 0 0 42px;
       width: 42px;
       height: 42px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--accent-gold-gradient);
       color: #ffffff;
       font-size: 16px;
       box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
   }
   
   .sf-contact-item__body {
       display: block;
       min-width: 0;
       flex: 1 1 auto;
   }
   
   .sf-contact-item__label {
       display: block;
       font-size: 11px;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 0.09em;
       color: var(--accent-gold);
       margin-bottom: 3px;
   }
   
   .sf-contact-item__value {
       display: block;
       font-size: 14px;
       color: #e2e8f0;
       line-height: 1.55;
       overflow-wrap: break-word;
       word-break: break-word;
   }
   
   .sf-contact-item__value a {
       color: #e2e8f0;
   }
   
   .sf-contact-item__value a:hover,
   .sf-contact-item__value a:focus {
       color: var(--accent-gold);
   }
   
   .sf-feedback {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       width: 100%;
       padding: 13px 22px;
       border-radius: var(--radius-full);
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.15);
       color: #ffffff !important;
       font-size: 14px;
       font-weight: 700;
       text-align: center;
       transition: var(--transition);
   }
   
   .sf-feedback:hover,
   .sf-feedback:focus {
       background: var(--accent-gold-gradient);
       border-color: transparent;
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
   }
   
   /* ---------- Bottom bar ---------- */
   .site-footer__bottom {
       position: relative;
       z-index: 2;
       background: rgba(7, 21, 39, 0.85);
       border-top: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .sf-bottom {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;
       padding: 18px 0;
       text-align: center;
   }
   
   .sf-copy {
       margin: 0;
       font-size: 13.5px;
       color: #94a3b8;
   }
   
   .sf-legal {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       margin: 0;
       padding: 0;
   }
   
   .sf-legal li + li::before {
       content: '\2022';
       margin: 0 10px;
       color: rgba(255, 255, 255, 0.3);
   }
   
   .sf-legal a {
       color: #cbd5e1;
       font-size: 13.5px;
       font-weight: 500;
   }
   
   .sf-legal a:hover,
   .sf-legal a:focus {
       color: var(--accent-gold);
   }
   
   /* ---------- Floating Back To Top ---------- */
   .sf-top {
       position: fixed;
       right: 30px;
       bottom: 30px;
       width: 46px;
       height: 46px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--accent-gold-gradient);
       color: #ffffff !important;
       font-size: 20px;
       border: 2px solid #ffffff;
       box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
       z-index: 999;
       opacity: 0;
       visibility: hidden;
       transform: translateY(14px);
       transition: var(--transition);
   }
   
   .sf-top.is-visible {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   
   .sf-top:hover {
       color: #ffffff !important;
       transform: translateY(-4px) scale(1.05);
   }
   
   /* ---------- Footer responsive: 2 columns on small tablets ---------- */
   @media (min-width: 576px) {
       .sf-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 36px 28px;
       }
   
       .sf-col--brand,
       .sf-col--contact {
           grid-column: 1 / -1;
       }
   
       .sf-contact-list {
           grid-template-columns: repeat(2, minmax(0, 1fr));
           align-items: start;
       }
   
       .sf-feedback {
           width: auto;
       }
   }
   
   /* ---------- Footer responsive: 4 columns on desktop ---------- */
   @media (min-width: 992px) {
       .site-footer__main {
           padding: 60px 0 48px;
       }
   
       .sf-grid {
           grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
           gap: 40px 30px;
       }
   
       .sf-col--brand,
       .sf-col--contact {
           grid-column: auto;
       }
   
       .sf-contact-list {
           grid-template-columns: 1fr;
       }
   
       .sf-feedback {
           width: 100%;
       }
   }
   
   @media (min-width: 1200px) {
       .sf-grid {
           grid-template-columns: 1.9fr 1fr 1fr 1.6fr;
           gap: 44px 36px;
       }
   }
   
   @media (min-width: 768px) {
       .sf-bottom {
           flex-direction: row;
           justify-content: space-between;
           text-align: left;
       }
   }
   
   /* ---------- Footer responsive: mobile ---------- */
   @media (max-width: 575px) {
       .site-footer__main {
           padding: 38px 0 34px;
       }
   
       .sf-grid {
           gap: 28px;
       }
   
       .sf-brand__name {
           font-size: 19px !important;
       }
   
       .sf-brand__logo img {
           max-height: 62px;
       }
   
       .sf-title {
           font-size: 17px !important;
           margin-bottom: 12px;
       }
   
       .sf-links a {
           font-size: 14px;
       }
   
       .sf-contact-item {
           padding: 12px 14px;
       }
   
       .sf-legal {
           gap: 4px 0;
       }
   }
   
   @media (max-width: 767px) {
       .sf-top {
           right: 16px;
           bottom: 16px;
           width: 42px;
           height: 42px;
           font-size: 18px;
       }
   }
   
   /* ==========================================================================
      INNER PAGES (GENERAL & READ PAGE STYLING)
      ========================================================================== */
   .program-read-page {
       padding: 18px 0 40px;
       background: #ffffff;
       min-height: 0;
   }
   
   .program-read-title {
       font-size: 32px !important;
       font-weight: 800 !important;
       color: var(--primary-navy) !important;
       margin-top: 0;
       margin-bottom: 12px;
   }
   
   .program-read-page hr {
       border-color: var(--border-color);
       margin: 8px 0 16px;
   }
   
   .page-body, .program-read-subtitle {
       font-size: 15.5px;
       color: var(--text-secondary);
       line-height: 1.8;
   }
   
   .page-body table {
       width: 100% !important;
       border-collapse: separate !important;
       border-spacing: 0 !important;
       border-radius: var(--radius-md) !important;
       overflow: hidden;
       margin: 24px 0 !important;
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);
   }
   
   .page-body table th {
       background: var(--primary-navy) !important;
       color: #ffffff !important;
       padding: 12px 16px !important;
       font-weight: 700 !important;
       font-size: 14px !important;
   }
   
   .page-body table td {
       padding: 12px 16px !important;
       border-bottom: 1px solid var(--border-color) !important;
       font-size: 14px !important;
       background: #ffffff;
   }
   
   .page-body table tr:nth-child(even) td {
       background: var(--bg-light);
   }
   
   .page-body table tr:hover td {
       background: rgba(37, 99, 235, 0.05);
   }
   
   /* ==========================================================================
      RESPONSIVE DESIGN (MOBILE & TABLET OPTIMIZATIONS)
      ========================================================================== */
   @media (max-width: 991px) {
       .header-brand-row {
           flex-direction: column;
           gap: 16px;
       }
   
       .header-brand-col {
           width: 100%;
       }
   
       .header-extras-col {
           width: 100%;
           justify-content: center;
       }
   
       .school-name {
           white-space: normal;
       }
   
       .aboutsection {
           flex-direction: column-reverse;
       }
   
       .home-about-text {
           padding-right: 0;
           margin-top: 30px;
       }
   
       .principal-section-row {
           flex-direction: column;
           text-align: center;
       }
   
       .principal-content {
           margin-top: 24px;
           text-align: left;
       }
   
       .principal-photo-wrap {
           margin-bottom: 10px;
       }
   
       .care-column {
           margin-bottom: 36px;
       }
   
       .wecareall {
           grid-template-columns: repeat(2, 1fr) !important;
           gap: 12px !important;
       }
   
       .home-testimonial-card {
           min-height: auto !important;
       }
   }
   
   @media (max-width: 767px) {
       /* Mobile Top Bar */
       .toparea {
           display: none !important;
       }
   
       .newstab {
           font-size: 10px !important;
           padding: 3px 10px !important;
           margin-right: 8px !important;
       }
   
       /* Mobile Brand Header */
       .header-brand-row {
           gap: 10px;
       }
   
       .header-brand-col {
           display: flex;
           align-items: center;
           justify-content: space-between;
       }
   
       .header-brand {
           gap: 12px;
           flex: 1;
           min-width: 0;
       }
   
       .header-brand .logo img {
           height: 44px !important;
       }
   
       .school-name {
           font-size: 16px !important;
           white-space: normal;
       }
   
       .school-affiliation {
           font-size: 10.5px !important;
           padding: 1px 8px;
       }
   
       .mobile-menu-bar {
           display: block !important;
       }
   
       .header-extras-col {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
           justify-content: space-between;
           margin-top: 10px;
       }
   
       .fit-india-logo {
           display: none;
       }
   
       .header-phone-item {
           padding: 6px 12px;
           flex: 1;
       }
   
       .header-phone-item .he-text span {
           font-size: 12px;
       }
   
       .header-login-item .complainbtn {
           padding: 8px 16px !important;
           font-size: 12px !important;
       }
   
/* Mobile Nav Drawer (clean white dropdown - matching nyrasnest reference) */
        .navborder .navbar-collapse {
            background: #ffffff !important;
            max-height: 80vh !important;
            overflow-y: auto !important;
            padding: 0 !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            border-top: 1px solid var(--border-color);
        }

        .navborder .navbar-nav {
            margin: 0 !important;
            padding: 0 !important;
            float: none !important;
        }

        .navborder .navbar-nav > li {
            float: none !important;
            display: block !important;
            width: 100% !important;
            border-bottom: 1px solid var(--border-light);
            margin: 0 !important;
        }

        .navborder .navbar-nav > li:last-child {
            border-bottom: none;
        }

        .navborder .navbar-nav > li > a {
            color: var(--text-primary) !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            line-height: 1.4 !important;
            padding: 13px 20px !important;
            margin: 0 !important;
            border: none !important;
            border-left: 3px solid transparent !important;
            border-radius: 0 !important;
            background: transparent !important;
            display: block !important;
            width: 100% !important;
            text-align: left !important;
            white-space: normal !important;
            transition: var(--transition);
        }

        .navborder .navbar-nav > li > a:hover,
        .navborder .navbar-nav > li > a:focus {
            color: var(--primary-royal) !important;
            background: var(--bg-soft) !important;
        }

        .navborder .navbar-nav > li.active > a,
        .navborder .navbar-nav > li.open > a {
            color: var(--primary-royal) !important;
            background: rgba(37, 99, 235, 0.06) !important;
            border-left-color: var(--accent-gold) !important;
            font-weight: 700 !important;
        }

        .navborder .navbar-nav > li > a .caret {
            border-top-color: var(--text-primary) !important;
            transition: var(--transition);
        }

        .navborder .navbar-nav > li.open > a .caret {
            transform: rotate(180deg);
        }

        .navborder .navbar-nav > li > .dropdown-menu {
            position: static !important;
            float: none !important;
            width: auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            background: var(--bg-light) !important;
            box-shadow: none !important;
            border: none !important;
            border-top: 1px solid var(--border-light) !important;
            padding: 6px 0 !important;
            margin: 0 !important;
        }

        .navborder .dropdown-menu > li {
            border-bottom: 1px solid var(--border-light);
        }

        .navborder .dropdown-menu > li:last-child {
            border-bottom: none;
        }

        .navborder .dropdown-menu > li > a {
            color: var(--text-secondary) !important;
            font-weight: 500 !important;
            padding: 10px 20px 10px 35px !important;
            white-space: normal !important;
        }

        .navborder .dropdown-menu > li > a::before {
            display: none !important;
        }

        .navborder .dropdown-menu > li > a:hover {
            background: #ffffff !important;
            color: var(--primary-royal) !important;
            font-weight: 600 !important;
            padding-left: 35px !important;
        }

        /* Hide redundant navbar header toggle since we have mobile-menu-bar */
        .navborder .navbar-header {
            display: none;
        }
   
       /* Hero & Quick Action adjustments */
       #bootstrap-touch-slider .carousel-inner .item img {
           min-height: 240px;
           max-height: 320px;
       }
   
       .home-page-content {
           margin-top: 20px;
       }
   
       .service-box {
           width: 50% !important;
           float: left !important;
           padding: 6px !important;
       }
   
       .service-box-content {
           padding: 16px 12px;
           min-height: 130px;
       }
   
       .service-box-icon {
           width: 48px;
           height: 48px;
           margin-bottom: 8px;
       }
   
       .service-box-icon .fa {
           font-size: 20px !important;
       }
   
       .service-box-content h3 {
           font-size: 13.5px !important;
       }
   
       /* Section Headings */
       .home-about-text h2, .facilities-title, .home-section-title, .principalmessage h2 {
           font-size: 24px !important;
       }
   
       .home-about-features {
           grid-template-columns: 1fr;
       }
   
       .page-body table, .program-read-subtitle table {
           display: block !important;
           width: 100% !important;
           overflow-x: auto !important;
           -webkit-overflow-scrolling: touch;
       }
   
       .testi {
           padding: 48px 0 58px !important;
       }
   
       .testi-header-wrap {
           margin-bottom: 18px;
       }
   
       .testi h2,
       .testi-col-title {
           font-size: 22px !important;
       }
   
       .home-testimonial-carousel {
           padding: 0 36px !important;
       }
   
       .home-testimonial-card {
           padding: 24px 20px !important;
       }
   }
   
   @media (max-width: 575px) {
       .wecareall {
           grid-template-columns: 1fr !important;
           gap: 10px !important;
       }
   
       .care-title {
           white-space: normal !important;
       }
   
       .care-desc {
           white-space: normal !important;
       }
   }
   
   /* ==========================================================================
      ENQUIRY FORM PAGE
      ========================================================================== */
   section.page-content.enquiry-page {
       padding-top: calc(var(--website-header-height, 120px) + 28px);
       padding-bottom: 70px;
       background: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, #f8fafc 100%);
   }
   
   .enquiry-page .enquiry-page-wrap {
       width: 100%;
       max-width: 920px;
       margin: 0 auto;
   }
   
   .enquiry-page .enquiry-card {
       background: #ffffff;
       border: 1px solid var(--border-color);
       border-radius: 18px;
       box-shadow: 0 18px 40px rgba(11, 31, 58, 0.08);
       padding: 28px 22px 32px;
   }
   
   .enquiry-page .enquiry-card-header {
       margin-bottom: 26px;
       text-align: center;
   }
   
   .enquiry-page .enquiry-title {
       margin: 0 0 10px;
       font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
       font-size: clamp(24px, 5.4vw, 38px);
       font-weight: 800;
       line-height: 1.2;
       letter-spacing: -0.03em;
       color: var(--primary-blue);
   }
   
   .enquiry-page .enquiry-subtitle {
       margin: 0 auto;
       max-width: 560px;
       font-size: 15px;
       line-height: 1.7;
       color: var(--text-secondary);
   }
   
   .enquiry-page .enquiry-subtitle a {
       color: var(--primary-blue);
       font-weight: 600;
   }
   
   /* ---------- Alerts ---------- */
   .enquiry-page .enquiry-alert {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       margin-bottom: 18px;
       border-radius: 12px;
       border: 1px solid transparent;
       font-size: 14px;
       line-height: 1.6;
       padding: 12px 14px;
   }
   
   .enquiry-page .enquiry-alert i {
       margin-right: 0;
       margin-top: 2px;
       flex: 0 0 auto;
   }
   
   .enquiry-page .enquiry-alert.alert-success {
       background: rgba(16, 185, 129, 0.08);
       border-color: rgba(16, 185, 129, 0.15);
       color: #0f766e;
   }
   
   .enquiry-page .enquiry-alert.alert-danger {
       background: rgba(239, 68, 68, 0.06);
       border-color: rgba(239, 68, 68, 0.15);
       color: #b91c1c;
   }
   
   .enquiry-page .enquiry-alert a {
       color: inherit;
       font-weight: 700;
       text-decoration: underline;
   }
   
   /* ---------- Layout ---------- */
   .enquiry-page .enquiry-form {
       margin-top: 8px;
   }
   
   .enquiry-page .enquiry-form-grid {
       display: grid;
       grid-template-columns: minmax(0, 1fr);
       gap: 18px 20px;
   }
   
   .enquiry-page .enquiry-form-row {
       display: flex;
       flex-direction: column;
       flex-wrap: nowrap;
       gap: 7px;
       min-width: 0;
       margin-bottom: 0;
   }
   
   .enquiry-page .enquiry-form-row-full {
       grid-column: 1 / -1;
   }
   
   .enquiry-page .enquiry-form-label {
       flex: 0 0 auto;
       max-width: 100%;
       margin: 0;
       font-size: 14.5px;
       font-weight: 600;
       line-height: 1.4;
       color: var(--text-primary);
   }
   
   .enquiry-page .enquiry-required {
       margin-left: 2px;
       color: #d93025;
   }
   
   .enquiry-page .enquiry-form-control {
       flex: 0 0 auto;
       width: 100%;
       min-width: 0;
   }
   
   /* ---------- Inputs ---------- */
   .enquiry-page .enquiry-input {
       display: block;
       width: 100%;
       min-height: 48px;
       border: 1px solid #d7deea;
       border-radius: 10px;
       background-color: #ffffff;
       background-image: none;
       box-shadow: none;
       font-family: inherit;
       font-size: 16px;
       line-height: 1.5;
       color: var(--text-primary);
       padding: 12px 14px;
       -webkit-appearance: none;
       appearance: none;
       transition: var(--transition);
   }
   
   .enquiry-page .enquiry-input::placeholder {
       color: #94a3b8;
       opacity: 1;
   }
   
   .enquiry-page .enquiry-input:focus,
   .enquiry-page .enquiry-input:focus-visible {
       border-color: var(--primary-blue);
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
       outline: none;
   }
   
   .enquiry-page .enquiry-select {
       cursor: pointer;
       padding-right: 42px;
       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 15px center;
       background-size: 12px 8px;
   }
   
   .enquiry-page .enquiry-textarea {
       min-height: 110px;
       line-height: 1.6;
       resize: vertical;
   }
   
   /* ---------- Validation states ---------- */
   .enquiry-page .enquiry-form-row.has-error .enquiry-input {
       border-color: #d93025;
       background-color: #fffafa;
   }
   
   .enquiry-page .enquiry-form-row.has-error .enquiry-input:focus {
       box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
   }
   
   .enquiry-page .enquiry-field-error {
       display: block;
       margin-top: 2px;
       font-size: 12.5px;
       font-weight: 500;
       line-height: 1.5;
       color: #d93025;
   }
   
   /* ---------- Actions ---------- */
   .enquiry-page .enquiry-form-actions {
       display: flex;
       justify-content: flex-end;
       margin-top: 22px;
       padding-top: 18px;
       border-top: 1px solid var(--border-light);
   }
   
   .enquiry-page .enquiry-submit-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 170px;
       min-height: 50px;
       padding: 13px 26px;
       border: 0;
       border-radius: 10px;
       background: var(--primary-gradient);
       color: #ffffff;
       font-size: 15.5px;
       font-weight: 700;
       letter-spacing: 0.02em;
       line-height: 1.2;
       cursor: pointer;
       transition: var(--transition);
   }
   
   .enquiry-page .enquiry-submit-btn:hover,
   .enquiry-page .enquiry-submit-btn:focus {
       background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-gold-dark) 100%);
       color: #ffffff;
       transform: translateY(-1px);
       box-shadow: 0 10px 22px rgba(11, 31, 58, 0.18);
   }
   
   .enquiry-page .enquiry-submit-btn:active {
       transform: translateY(0);
       box-shadow: none;
   }
   
   .enquiry-page .enquiry-submit-btn i {
       margin-right: 8px;
   }
   
   /* ---------- Enquiry form responsive ---------- */
   @media (min-width: 576px) {
       .enquiry-page .enquiry-form-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }
   
   @media (min-width: 768px) {
       .enquiry-page .enquiry-input {
           font-size: 15px;
       }
   }
   
   @media (min-width: 768px) and (max-width: 991px) {
       section.page-content.enquiry-page {
           padding-top: calc(var(--website-header-height, 120px) + 28px);
           padding-bottom: 75px;
       }
   
       .enquiry-page .enquiry-card {
           padding: 28px 26px 32px;
       }
   }
   
   @media (min-width: 1200px) {
       section.page-content.enquiry-page {
           padding-top: calc(var(--website-header-height, 120px) + 36px);
           padding-bottom: 85px;
       }
   
       .enquiry-page .enquiry-card {
           padding: 38px 44px 42px;
       }
   }
   
   @media (max-width: 767px) {
       section.page-content.enquiry-page {
           padding-top: calc(var(--website-header-height, 100px) + 18px);
           padding-bottom: 55px;
       }
   
       .enquiry-page > .container {
           padding-left: 12px;
           padding-right: 12px;
       }
   
       .enquiry-page .enquiry-card {
           padding: 22px 16px 26px;
           border-radius: 14px;
       }
   
       .enquiry-page .enquiry-subtitle {
           font-size: 14px;
       }
   
       .enquiry-page .enquiry-form-grid {
           gap: 15px;
       }
   
       .enquiry-page .enquiry-input {
           font-size: 16px;
           min-height: 50px;
       }
   
       .enquiry-page .enquiry-form-actions {
           justify-content: stretch;
       }
   
       .enquiry-page .enquiry-submit-btn {
           width: 100%;
           min-width: 0;
       }
   }
   
   @media (max-width: 400px) {
       .enquiry-page .enquiry-card {
           padding: 18px 13px 22px;
       }
   
       .enquiry-page .enquiry-form-label {
           font-size: 13.5px;
       }
   
       .enquiry-page .enquiry-submit-btn {
           font-size: 15px;
       }
   }
   
    /* ==========================================================================
       COMPLAIN PAGE
       Same card + CSS-grid pattern as the enquiry page. The old layout used
       bootstrap .col-sm-2 / .col-sm-9 inside a .form-horizontal, which pushed
       the fields to the far left, floated the button to the far right and left
       a large empty gap under the form. Everything below is fluid from 320px
       up and the block always closes with a clean gap before the footer.
       ========================================================================== */
    section.page-content.complain-page {
        padding-bottom: 46px;
        background: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, #f8fafc 100%);
    }

    .complain-page .complain-page-wrap {
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
    }

    .complain-page .complain-card {
        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 18px;
        box-shadow: 0 18px 40px rgba(11, 31, 58, 0.08);
        padding: 28px 22px 32px;
    }

    .complain-page .complain-card-header {
        margin-bottom: 26px;
        text-align: center;
    }

    .complain-page .complain-title {
        margin: 0 0 10px;
        font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
        font-size: clamp(24px, 5.4vw, 38px);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.03em;
        color: var(--primary-blue);
        overflow-wrap: break-word;
    }

    .complain-page .complain-subtitle {
        margin: 0 auto;
        max-width: 560px;
        font-size: 15px;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    .complain-page .complain-subtitle a {
        color: var(--primary-blue);
        font-weight: 600;
    }

    /* ---------- Alerts ---------- */
    .complain-page .complain-alert {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 18px;
        border-radius: 12px;
        border: 1px solid transparent;
        font-size: 14px;
        line-height: 1.6;
        padding: 12px 14px;
    }

    .complain-page .complain-alert i {
        margin-right: 0;
        margin-top: 2px;
        flex: 0 0 auto;
    }

    .complain-page .complain-alert.alert-success {
        background: rgba(16, 185, 129, 0.08);
        border-color: rgba(16, 185, 129, 0.15);
        color: #0f766e;
    }

    .complain-page .complain-alert.alert-danger {
        background: rgba(239, 68, 68, 0.06);
        border-color: rgba(239, 68, 68, 0.15);
        color: #b91c1c;
    }

    .complain-page .complain-alert a {
        color: inherit;
        font-weight: 700;
        text-decoration: underline;
    }

    /* ---------- Layout ---------- */
    .complain-page .complain-form {
        margin: 0;
        padding: 0;
        width: 100%;
        float: none;
    }

    .complain-page .complain-form-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px 20px;
    }

    .complain-page .complain-form-row {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 7px;
        min-width: 0;
        margin: 0;
    }

    .complain-page .complain-form-row-full {
        grid-column: 1 / -1;
    }

    .complain-page .complain-form-label {
        flex: 0 0 auto;
        max-width: 100%;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--text-primary);
    }

    .complain-page .complain-required {
        margin-left: 2px;
        color: #d93025;
    }

    .complain-page .complain-form-control {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    /* ---------- Inputs ---------- */
    .complain-page .complain-input {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: auto;
        min-height: 48px;
        border: 1px solid #d7deea;
        border-radius: 10px;
        background-color: #ffffff;
        background-image: none;
        box-shadow: none;
        font-family: inherit;
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-primary);
        padding: 12px 14px;
        -webkit-appearance: none;
        appearance: none;
        transition: var(--transition);
    }

    .complain-page .complain-input::placeholder {
        color: #94a3b8;
        opacity: 1;
    }

    .complain-page .complain-input:focus,
    .complain-page .complain-input:focus-visible {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        outline: none;
    }

    .complain-page .complain-select {
        cursor: pointer;
        padding-right: 42px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 12px 8px;
    }

    .complain-page .complain-textarea {
        min-height: 150px;
        line-height: 1.6;
        resize: vertical;
    }

    /* ---------- Validation states ---------- */
    .complain-page .complain-form-row.has-error .complain-input {
        border-color: #d93025;
        background-color: #fffafa;
    }

    .complain-page .complain-form-row.has-error .complain-input:focus {
        box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
    }

    .complain-page .complain-field-error {
        display: block;
        margin-top: 2px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.5;
        color: #d93025;
        overflow-wrap: break-word;
    }

    /* ---------- Actions ---------- */
    .complain-page .complain-form-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid var(--border-light);
    }

    .complain-page .complain-submit-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        float: none !important;
        min-width: 170px;
        min-height: 50px;
        padding: 13px 26px;
        border: 0;
        border-radius: 10px;
        background: var(--primary-gradient);
        color: #ffffff;
        font-size: 15.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.2;
        cursor: pointer;
        transition: var(--transition);
    }

    .complain-page .complain-submit-btn:hover,
    .complain-page .complain-submit-btn:focus {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-gold-dark) 100%);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(11, 31, 58, 0.18);
    }

    .complain-page .complain-submit-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .complain-page .complain-submit-btn i {
        margin-right: 8px;
    }

    /* ---------- Complain form responsive ---------- */
    @media (min-width: 576px) {
        .complain-page .complain-form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 768px) {
        .complain-page .complain-input {
            font-size: 15px;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        section.page-content.complain-page {
            padding-bottom: 50px;
        }

        .complain-page .complain-card {
            padding: 28px 26px 32px;
        }
    }

    @media (min-width: 1200px) {
        section.page-content.complain-page {
            padding-bottom: 58px;
        }

        .complain-page .complain-card {
            padding: 38px 44px 42px;
        }
    }

    @media (max-width: 767px) {
        section.page-content.complain-page {
            padding-bottom: 32px;
        }

        .complain-page > .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .complain-page .complain-card {
            padding: 22px 16px 26px;
            border-radius: 14px;
        }

        .complain-page .complain-subtitle {
            font-size: 14px;
        }

        .complain-page .complain-form-grid {
            gap: 15px;
        }

        .complain-page .complain-input {
            font-size: 16px;
            min-height: 50px;
        }

        .complain-page .complain-textarea {
            min-height: 130px;
        }

        .complain-page .complain-form-actions {
            justify-content: stretch;
        }

        .complain-page .complain-submit-btn {
            width: 100%;
            min-width: 0;
        }
    }

    @media (max-width: 400px) {
        section.page-content.complain-page {
            padding-bottom: 26px;
        }

        .complain-page .complain-card {
            padding: 18px 13px 22px;
        }

        .complain-page .complain-form-label {
            font-size: 13.5px;
        }

        .complain-page .complain-input {
            padding-left: 12px;
            padding-right: 12px;
        }

        .complain-page .complain-submit-btn {
            font-size: 15px;
        }
    }

    /* ==========================================================================
       CONTACT US PAGE ("Send In Your Query" FORM)
       ========================================================================== */
    .contact-page .contact-form-title {
        margin: 0 0 18px;
        font-size: 26px;
       font-weight: 800;
       line-height: 1.3;
       color: var(--text-primary);
   }
   
   .contact-page .contact-alert {
       margin-bottom: 18px;
       border-radius: 10px;
   }
   
   .contact-page .contact-alert i {
       margin-right: 6px;
   }
   
   .contact-page .contact-form {
       width: 100%;
       margin: 0 0 10px;
   }
   
   .contact-page .contact-form-grid {
       display: grid;
       grid-template-columns: minmax(0, 1fr);
       gap: 18px 20px;
   }
   
   .contact-page .contact-form-row {
       display: flex;
       flex-direction: column;
       flex-wrap: nowrap;
       gap: 7px;
       min-width: 0;
       margin: 0;
   }
   
   .contact-page .contact-form-row-full {
       grid-column: 1 / -1;
   }
   
   .contact-page .contact-form-label {
       flex: 0 0 auto;
       max-width: 100%;
       margin: 0;
       padding: 0;
       font-size: 14.5px;
       font-weight: 600;
       line-height: 1.4;
       color: var(--text-primary);
   }
   
   .contact-page .contact-required {
       margin-left: 2px;
       color: #d93025;
   }
   
   .contact-page .contact-form-control {
       flex: 0 0 auto;
       width: 100%;
       min-width: 0;
   }
   
   .contact-page .contact-input {
       display: block;
       width: 100%;
       min-height: 48px;
       border: 1px solid #d7deea;
       border-radius: 10px;
       background-color: #ffffff;
       background-image: none;
       box-shadow: none;
       font-family: inherit;
       font-size: 16px;
       line-height: 1.5;
       color: var(--text-primary);
       padding: 12px 14px;
       -webkit-appearance: none;
       appearance: none;
       transition: var(--transition);
   }
   
   .contact-page .contact-input::placeholder {
       color: #94a3b8;
       opacity: 1;
   }
   
   .contact-page .contact-input:focus,
   .contact-page .contact-input:focus-visible {
       border-color: var(--primary-blue);
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
       outline: none;
   }
   
   .contact-page .contact-textarea {
       min-height: 130px;
       line-height: 1.6;
       resize: vertical;
   }
   
   .contact-page .contact-form-row.has-error .contact-input {
       border-color: #d93025;
       background-color: #fffafa;
   }
   
   .contact-page .contact-form-row.has-error .contact-input:focus {
       box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
   }
   
   .contact-page .contact-field-error {
       display: block;
       margin-top: 2px;
       font-size: 12.5px;
       font-weight: 500;
       line-height: 1.5;
       color: #d93025;
   }
   
   .contact-page .contact-form-actions {
       display: flex;
       justify-content: flex-end;
       margin-top: 22px;
       padding-top: 18px;
       border-top: 1px solid var(--border-light);
   }
   
   .contact-page .contact-submit-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 170px;
       min-height: 50px;
       padding: 13px 26px;
       border: 0;
       border-radius: 10px;
       background: var(--primary-gradient);
       color: #ffffff;
       font-size: 15.5px;
       font-weight: 700;
       letter-spacing: 0.02em;
       line-height: 1.2;
       cursor: pointer;
       transition: var(--transition);
   }
   
   .contact-page .contact-submit-btn:hover,
   .contact-page .contact-submit-btn:focus {
       background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-gold-dark) 100%);
       color: #ffffff;
       transform: translateY(-1px);
       box-shadow: 0 10px 22px rgba(11, 31, 58, 0.18);
   }
   
   .contact-page .contact-submit-btn:active {
       transform: translateY(0);
       box-shadow: none;
   }
   
   .contact-page .contact-submit-btn i {
       margin-right: 8px;
   }
   
   /* ---------- Contact form responsive ---------- */
   @media (min-width: 576px) {
       .contact-page .contact-form-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }
   
   @media (min-width: 768px) {
       .contact-page .contact-input {
           font-size: 15px;
       }
   
       .contact-page .contact-form-title {
           font-size: 30px;
       }
   }
   
   @media (max-width: 767px) {
       .contact-page .spacet60 {
           padding-top: 30px;
       }
   
       .contact-page .contact-form-title {
           font-size: 22px;
       }
   
       .contact-page .contact-form-grid {
           gap: 15px;
       }
   
       .contact-page .contact-input {
           font-size: 16px;
           min-height: 50px;
       }
   
       .contact-page .contact-form-actions {
           justify-content: stretch;
       }
   
       .contact-page .contact-submit-btn {
           width: 100%;
           min-width: 0;
       }
   }
   
   @media (max-width: 400px) {
       .contact-page .contact-form-label {
           font-size: 13.5px;
       }
   
       .contact-page .contact-submit-btn {
           font-size: 15px;
       }
   }
   
   /* ==========================================================================
      VIDEO MODAL & COMPONENT POLISH
      ========================================================================== */
   #schoolvideo .modal-content {
       border-radius: var(--radius-lg);
       overflow: hidden;
       border: none;
       box-shadow: var(--shadow-lg);
   }
   
   #schoolvideo .modal-header {
       background: var(--primary-gradient);
       color: #ffffff;
       border-bottom: none;
       padding: 16px 24px;
   }
   
   #schoolvideo .modal-header .modal-title {
       color: #ffffff !important;
       font-weight: 700;
   }
   
   #schoolvideo .modal-header .close {
       color: #ffffff;
       opacity: 0.8;
       text-shadow: none;
   }
   
   #schoolvideo .modal-header .close:hover {
       opacity: 1;
   }
   
   #schoolvideo .modal-body {
       padding: 0;
       background: #000000;
   }
   
   #schoolvideo .modal-footer {
       border-top: 1px solid var(--border-color);
       padding: 12px 24px;
   }
   
   /* ==========================================================================
      HOMEPAGE RESPONSIVE
      ========================================================================== */
   
   .services,
   .home-about-section,
   .gurusection,
   .principalmessage,
   .threesection,
   .facilitieswrapper,
   .celebrationswrapper,
   .testi,
   .photogallerydown {
       overflow: hidden;
   }
   
   .services *,
   .home-about-section *,
   .gurusection *,
   .principalmessage *,
   .threesection *,
   .facilitieswrapper *,
   .celebrationswrapper *,
   .testi *,
   .photogallerydown * {
       min-width: 0;
   }
   
   .services img,
   .home-about-section img,
   .gurusection img,
   .principalmessage img,
   .facilitieswrapper img,
   .celebrationswrapper img,
   .testi img,
   .photogallerydown img,
   .facilitieswrapper iframe,
   .celebrationswrapper iframe,
   .testi iframe {
       max-width: 100%;
   }
   
   .services h1,
   .services h2,
   .services h3,
   .services h4,
   .home-about-section h1,
   .home-about-section h2,
   .home-about-section h3,
   .home-about-section h4,
   .gurusection h1,
   .gurusection h2,
   .gurusection h3,
   .gurusection h4,
   .principalmessage h1,
   .principalmessage h2,
   .principalmessage h3,
   .principalmessage h4,
   .threesection h1,
   .threesection h2,
   .threesection h3,
   .threesection h4,
   .facilitieswrapper h1,
   .facilitieswrapper h2,
   .facilitieswrapper h3,
   .facilitieswrapper h4,
   .celebrationswrapper h1,
   .celebrationswrapper h2,
   .celebrationswrapper h3,
   .celebrationswrapper h4,
   .testi h1,
   .testi h2,
   .testi h3,
   .testi h4,
   .photogallerydown h1,
   .photogallerydown h2,
   .photogallerydown h3,
   .photogallerydown h4 {
       overflow-wrap: break-word;
       word-wrap: break-word;
   }
   
   .services .service-box-content {
       height: 100%;
   }
   
   @media (max-width: 1199px) {
       .services .service-box {
           margin-bottom: 20px;
       }
   }
   
   @media (max-width: 991px) {
       .home-page-content {
           padding-top: 20px !important;
           margin-top: -20px;
       }
       .services .service-inner {
           position: relative;
           top: 0;
           left: auto;
           right: auto;
           padding: 0;
       }
       .home-about-section,
       .gurusection,
       .principalmessage,
       .threesection,
       .facilitieswrapper,
       .celebrationswrapper,
       .testi,
       .photogallerydown {
           padding: 50px 0 !important;
       }
       .gurusection,
       .principalmessage,
       .testi {
           padding: 42px 0 !important;
       }
       .home-about-section .home-about-text {
           padding: 0;
           margin-bottom: 30px;
       }
       .gurusection .guru-left-col {
           text-align: center;
           margin-bottom: 28px;
       }
       .gurusection .guru-content {
           text-align: left;
       }
       .principalmessage .ourprencipal {
           text-align: center;
           order: -1;
           margin-bottom: 26px;
       }
       .principalmessage .principal-content {
           padding: 22px 18px;
       }
       .testi .care-column {
           margin-bottom: 30px;
       }
       .testi .testimonials-column {
           margin-bottom: 0;
       }
       .facilities-carousel .facility-card,
       .celebrations-carousel .celebration-card,
       .photo-gallery-carousel .eventbox {
           margin: 10px 6px;
       }
       .owl-carousel .owl-nav {
           margin-top: 18px;
       }
       .owl-carousel .owl-nav button,
       .owl-carousel .owl-dots {
           touch-action: manipulation;
       }
       .home-widget-col {
           margin-bottom: 26px;
       }
       .home-widget-col:last-child {
           margin-bottom: 0;
       }
   }
   
   @media (max-width: 767px) {
       .home-about-section,
       .gurusection,
       .principalmessage,
       .threesection,
       .facilitieswrapper,
       .celebrationswrapper,
       .testi,
       .photogallerydown {
           padding: 40px 0 !important;
       }
       .gurusection,
       .principalmessage,
       .testi {
           padding: 32px 0 !important;
       }
       .home-about-section .home-about-features {
           grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 12px;
       }
       .home-about-section .home-about-feature-item {
           flex-direction: column;
           text-align: center;
           gap: 8px;
           padding: 14px 8px;
       }
       .home-about-section .home-about-feature-item .icon-circle {
           width: 42px;
           height: 42px;
           font-size: 17px;
           margin: 0;
       }
       .home-about-section .home-about-feature-item span {
           font-size: 13px;
           line-height: 1.35;
       }
       .gurusection .guru-portrait {
           max-width: 230px;
           margin: 0 auto;
       }
       .gurusection .guru-content,
       .principalmessage .principal-content {
           font-size: 14.5px;
           line-height: 1.75;
       }
       .principalmessage .principal-photo-wrap {
           max-width: 280px;
           margin: 0 auto;
       }
       .btn-read,
       .home-page-content .btn-home-viewall,
       .threesection .btn-home-viewall {
           min-height: 44px;
       }
       .threesection .home-widget-scroll-wrap {
           max-height: 320px;
       }
       .home-testimonial-carousel .home-testimonial-card p {
           font-size: 14px;
           line-height: 1.7;
       }
   }
   
   @media (max-width: 575px) {
       .home-about-section,
       .gurusection,
       .principalmessage,
       .threesection,
       .facilitieswrapper,
       .celebrationswrapper,
       .testi,
       .photogallerydown {
           padding: 30px 0 !important;
       }
       .home-about-section .section-badge,
       .testi .testi-badge-pill {
           font-size: 11px;
           padding: 6px 12px;
       }
       .principalmessage .principal-content {
           padding: 18px 15px;
       }
       .services .service-box {
           width: 50% !important;
           padding: 0 6px;
       }
       .services .service-box-content {
           min-height: 130px;
           padding: 18px 10px;
       }
       .services .service-box-content h3 {
           margin: 0 0 10px !important;
       }
       .services .service-box-icon i,
       .services .service-box-icon .fa-3x {
           font-size: 28px;
       }
       .home-about-section .home-about-features {
           gap: 10px;
       }
       .facilities-carousel .facility-card-img,
       .celebrations-carousel .celebration-card-img {
           height: 150px;
       }
       .facilities-carousel .facility-card-body,
       .celebrations-carousel .celebration-card-body {
           padding: 14px 12px;
       }
       .facilities-carousel .facility-card-body p,
       .celebrations-carousel .celebration-card-body p {
           font-size: 13px;
       }
       #schoolvideo .modal-dialog {
           margin: 10px;
       }
       #schoolvideo .modal-body iframe {
           height: 180px;
       }
   }
   
   @media (max-width: 360px) {
       .services .service-box {
           width: 100% !important;
       }
       .home-about-section .home-about-features {
           grid-template-columns: minmax(0, 1fr);
       }
   }
   
   @media (prefers-reduced-motion: reduce) {
       .services *,
       .home-about-section *,
       .gurusection *,
       .principalmessage *,
       .threesection *,
       .facilitieswrapper *,
       .celebrationswrapper *,
       .testi *,
       .photogallerydown * {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
       }
   }
   
   /* ==========================================================================
      RESPONSIVE IMAGES (GLOBAL)
      No image may overflow its column, and no image may be cropped.
      ========================================================================== */
   
   /* Baseline. `height: auto` preserves the intrinsic aspect ratio, so images are
      never stretched or squashed. Deliberately no !important: every component
      that needs a fixed crop (.eventbox img, .guru-portrait, .facility-card-img
      img, ...) uses a class selector and therefore keeps winning the cascade. */
   img {
       max-width: 100%;
       height: auto;
   }
   
   /* Images that arrive from CMS page content, tables and prose blocks - these
      are the ones that used to burst out of the column on phones. */
   .page-content img,
   .page-body img,
   .panel-body img,
   .entry-content img,
   .commonbg img,
   .enquiry-page img,
   .contact-page img,
   td img,
   th img {
       max-width: 100%;
       height: auto;
   }
   
   /* Header marks: keep them whole, never crop a logo to fill a box. */
   .header-brand .logo img,
   .fit-india-logo img {
       max-width: 100%;
       object-fit: contain;
   }
   
   /* The school logo is a 500x500 square. `width: auto` with a max-width floor
      means it can never blow out the header on a narrow phone, and it keeps its
      full square frame instead of being cropped to a strip. */
   .header-brand .logo {
       max-width: 100%;
   }
   
   .header-brand .logo img {
       width: auto;
       max-width: 100%;
       height: auto;
       min-width: 0;
   }
   
   /* The base rule at the top of this file uses `height: 60px !important`, which
      silently beat the plain `height: 52px` inside the max-width: 767px block.
      Repeating the mobile sizes with !important here (later in the cascade)
      makes the phone header actually shrink instead of showing a 60px logo. */
   @media (max-width: 767px) {
       .header-brand .logo img {
           height: 44px !important;
       }
   }
   
   @media (max-width: 479px) {
       .header-brand .logo img {
           height: 40px !important;
       }
   }
   
   /* Decorative background panels must still fill their frame. */
   .cover-image {
       background-size: cover;
       background-position: center center;
       background-repeat: no-repeat;
   }
   
   /* On phones a very tall photo must not run off the top and bottom of the
      screen. Floating the width and capping the height shrinks the image
      proportionally, so the whole picture stays visible - nothing is cropped. */
   @media (max-width: 767px) {
       .page-content img,
       .commonbg img,
       .enquiry-page img,
       .contact-page img {
           width: auto;
           max-width: 100%;
           max-height: 70vh;
       }
   }
   
   @media (max-width: 479px) {
       .page-content img,
       .commonbg img,
       .enquiry-page img,
       .contact-page img {
           max-height: 60vh;
       }
   }
   
   /* ==========================================================================
      ABOUT GURU DETAIL PAGE (MATCHING NYRASNEST REFERENCE & FULLY RESPONSIVE)
      ========================================================================== */
   section.page-content.about-guru-page {
       padding: 45px 0 55px !important;
       background: #ffffff !important;
   }
   
   .about-guru-page .about-guru-card,
   .about-guru-page .about-guru-body {
       background: #ffffff !important;
       border-radius: 0 !important;
       padding: 0 !important;
       box-shadow: none !important;
       border: none !important;
   }
   
   .about-guru-page .about-guru-layout {
       display: flex !important;
       flex-wrap: wrap !important;
       align-items: flex-start !important;
       gap: 0 30px !important;
   }
   
   .about-guru-page .about-guru-layout::before,
   .about-guru-page .about-guru-layout::after {
       display: none !important;
       content: none !important;
   }
   
   .about-guru-page .about-guru-image-wrap {
       flex: 0 0 280px !important;
       width: 280px !important;
       max-width: 100% !important;
       margin: 4px 0 18px 0 !important;
       padding: 0 !important;
   }
   
   .about-guru-page .about-guru-portrait-frame {
       display: block !important;
       position: relative !important;
       border: none !important;
       box-shadow: none !important;
       border-radius: 0 !important;
       overflow: visible !important;
   }
   
   .about-guru-page .about-guru-portrait {
       display: block !important;
       width: 100% !important;
       max-width: 280px !important;
       height: auto !important;
       aspect-ratio: auto !important;
       object-fit: cover !important;
       border: 1px solid #e5e5e5 !important;
       border-radius: 3px !important;
       box-shadow: none !important;
       transition: opacity 0.3s ease !important;
   }
   
   .about-guru-page .about-guru-portrait-frame:hover .about-guru-portrait {
       transform: none !important;
       opacity: 0.96 !important;
   }
   
   .about-guru-page .about-guru-content {
       flex: 1 1 0 !important;
       min-width: 0 !important;
       font-size: 15px !important;
       line-height: 1.85 !important;
       color: #333333 !important;
       text-align: justify !important;
       padding: 0 !important;
   }
   
   .about-guru-page .about-guru-heading {
       display: block !important;
       margin: 0 0 16px 0 !important;
       font-size: 18px !important;
       font-weight: 700 !important;
       color: #222222 !important;
       text-transform: uppercase !important;
       letter-spacing: 0.3px !important;
       line-height: 1.3 !important;
       padding: 0 !important;
       position: static !important;
       font-family: inherit !important;
   }
   
   .about-guru-page .about-guru-heading::after {
       display: none !important;
       content: none !important;
   }
   
   .about-guru-page .about-guru-content p {
       font-size: 15px !important;
       line-height: 1.85 !important;
       color: #333333 !important;
       margin-bottom: 16px !important;
   }
   
   .about-guru-page .about-guru-content p:last-child {
       margin-bottom: 0 !important;
   }
   
   .about-guru-page .about-guru-content > p:first-of-type strong {
       display: block !important;
       font-weight: 700 !important;
       line-height: 1.75 !important;
       color: #222222 !important;
   }
   
   .about-guru-page .about-guru-messages-title,
   .about-guru-page .about-guru-content h4 {
       margin: 24px 0 14px 0 !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       color: #222222 !important;
       line-height: 1.3 !important;
   }
   
   .about-guru-page .about-guru-content ul {
       margin: 0 0 10px 22px !important;
       padding: 0 !important;
   }
   
   .about-guru-page .about-guru-content ul li {
       font-size: 14.5px !important;
       line-height: 1.6 !important;
       color: #333333 !important;
       margin-bottom: 10px !important;
   }
   
   .about-guru-page .about-guru-content ul li strong,
   .about-guru-page .about-guru-content ul li h2 {
       font-size: 15px !important;
       font-weight: 700 !important;
       color: #222222 !important;
       margin: 0 !important;
   }
   
   /* ==========================================================================
      ABOUT GURU DETAIL PAGE - RESPONSIVE (TABLET & MOBILE)
      ========================================================================== */
   @media (max-width: 991px) {
       section.page-content.about-guru-page {
           padding: 35px 0 45px !important;
       }
   
       .about-guru-page .about-guru-image-wrap {
           flex: 0 0 240px !important;
           width: 240px !important;
       }
   
       .about-guru-page .about-guru-portrait {
           max-width: 240px !important;
       }
   
       .about-guru-page .about-guru-content {
           font-size: 14.5px !important;
           line-height: 1.8 !important;
       }
   }
   
   @media (max-width: 767px) {
       section.page-content.about-guru-page {
           padding: 24px 0 35px !important;
           background: #ffffff !important;
       }
   
       .about-guru-page > .container {
           padding-left: 15px !important;
           padding-right: 15px !important;
       }
   
       .about-guru-page .about-guru-layout {
           flex-direction: column !important;
           gap: 0 !important;
       }
   
       .about-guru-page .about-guru-image-wrap {
           flex: 0 0 auto !important;
           width: 100% !important;
           max-width: 250px !important;
           margin: 0 auto 20px auto !important;
           text-align: center !important;
       }
   
       .about-guru-page .about-guru-portrait {
           width: 100% !important;
           max-width: 250px !important;
           height: auto !important;
           margin: 0 auto !important;
           border: 1px solid #e5e5e5 !important;
           border-radius: 4px !important;
       }
   
       .about-guru-page .about-guru-content {
           flex: 1 1 auto !important;
           width: 100% !important;
           font-size: 14px !important;
           line-height: 1.75 !important;
           text-align: left !important;
       }
   
       .about-guru-page .about-guru-heading {
           display: block !important;
           font-size: 20px !important;
           text-align: center !important;
           margin-bottom: 14px !important;
       }
   
       .about-guru-page .about-guru-content p {
           font-size: 14px !important;
           line-height: 1.75 !important;
           margin-bottom: 14px !important;
       }
   
       .about-guru-page .about-guru-messages-title,
       .about-guru-page .about-guru-content h4 {
           font-size: 15px !important;
           margin: 20px 0 12px !important;
       }
   
       .about-guru-page .about-guru-content ul {
           margin-left: 18px !important;
       }
   }
   
   @media (max-width: 480px) {
       section.page-content.about-guru-page {
           padding: 18px 0 28px !important;
       }
   
       .about-guru-page .about-guru-image-wrap {
           max-width: 200px !important;
       }
   
       .about-guru-page .about-guru-portrait {
           max-width: 200px !important;
       }
   
       .about-guru-page .about-guru-heading {
           font-size: 18px !important;
       }
   
       .about-guru-page .about-guru-content {
           font-size: 13.5px !important;
           line-height: 1.7 !important;
       }
   
       .about-guru-page .about-guru-content p {
           font-size: 13.5px !important;
           line-height: 1.7 !important;
       }
   }
   
   /* ==========================================================================
      ALL-VIEW RESPONSIVE LAYER
      Fixes the header double-offset, then makes every form, table, embed and
      piece of CMS content on every page behave properly on phones.
      ========================================================================== */
   
   /* --------------------------------------------------------------------------
      1. HEADER DOUBLE-OFFSET  (this is what pushed the form far down)
      --------------------------------------------------------------------------
      #alert is position:relative, i.e. it sits in the normal flow, until
      custom.js adds .affix. Once affixed it becomes position:fixed and
      custom.js inserts #header-spacer to hold the space it vacated. The header
      height is therefore ALREADY accounted for in both states, so adding
      calc(var(--website-header-height) + N) as section padding counted the
      header a second time and pushed every page - the enquiry form included -
      roughly 200px down for nothing. :root also hard-codes
      --website-header-height: 180px as a fallback, which is where the big
      blank gap came from. All that is left to declare is the visual gap.
      -------------------------------------------------------------------------- */
   section.page-content {
       padding-top: 16px !important;
   }
   
   @media (min-width: 576px) {
       section.page-content {
           padding-top: 18px !important;
       }
   }
   
   @media (min-width: 768px) {
       section.page-content {
           padding-top: 20px !important;
       }
   }
   
   @media (min-width: 1200px) {
       section.page-content {
           padding-top: 22px !important;
       }
   }
   
   /* --------------------------------------------------------------------------
      2. FORMS ON EVERY VIEW
      -------------------------------------------------------------------------- */
   .page-content form {
       max-width: 100%;
   }
   
   .page-content input,
   .page-content select,
   .page-content textarea,
   .page-content .form-control {
       box-sizing: border-box;
       max-width: 100%;
       font-family: inherit;
   }
   
   /* Only text-like controls are forced full width. Checkboxes, radios and
      buttons must keep their natural size. */
   .page-content input[type="text"],
   .page-content input[type="email"],
   .page-content input[type="tel"],
   .page-content input[type="number"],
   .page-content input[type="url"],
   .page-content input[type="password"],
   .page-content input[type="search"],
   .page-content input[type="date"],
   .page-content input[type="datetime-local"],
   .page-content input[type="time"],
   .page-content select,
   .page-content textarea,
   .page-content .form-control {
       width: 100%;
   }
   
   .page-content input[type="checkbox"],
   .page-content input[type="radio"] {
       width: auto;
       max-width: 100%;
       flex: 0 0 auto;
   }
   
   .page-content textarea {
       min-height: 120px;
       resize: vertical;
   }
   
   /* Flex and grid children must be allowed to shrink. Without this a single
      wide field forces its whole row sideways and the page scrolls
      horizontally. */
   .page-content .form-group,
   .page-content [class*="col-"] {
       min-width: 0;
   }
   
   /* Long words, e-mail addresses and URLs must wrap instead of widening the
      whole page. */
   .page-content p,
   .page-content li,
   .page-content dd,
   .page-content dt,
   .page-content td,
   .page-content th,
   .page-content address,
   .page-content h1,
   .page-content h2,
   .page-content h3,
   .page-content h4,
   .page-content h5,
   .page-content h6 {
       overflow-wrap: break-word;
       word-wrap: break-word;
   }
   
   /* --------------------------------------------------------------------------
      3. EMBEDS, MEDIA AND TABLES IN CMS CONTENT
      -------------------------------------------------------------------------- */
   .page-content iframe,
   .page-content embed,
   .page-content object,
   .page-content video {
       max-width: 100% !important;
   }
   
   .page-content iframe:not([src*="maps"]):not([src*="google.com"]):not([height]),
   .page-content video {
       height: auto !important;
   }

   /* Modern Google Map Styling - Full Height, Full Width & Responsive */
   .contact-page iframe,
   .contact-page-content iframe,
   .contact-wrap iframe,
   .contact-map-wrapper iframe,
   .page-content iframe[src*="google.com/maps"],
   .page-content iframe[src*="maps.google"],
   .page-content .mapWrapper iframe {
       display: block !important;
       width: 100% !important;
       height: 450px !important;
       min-height: 420px !important;
       max-height: none !important;
       border: 0 !important;
       border-radius: 16px !important;
       box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.1), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
   }

   @media (max-width: 991px) {
       .contact-page iframe,
       .contact-page-content iframe,
       .contact-wrap iframe,
       .contact-map-wrapper iframe,
       .page-content iframe[src*="google.com/maps"],
       .page-content iframe[src*="maps.google"],
       .page-content .mapWrapper iframe {
           height: 380px !important;
           min-height: 350px !important;
       }
   }

   @media (max-width: 767px) {
       .contact-page iframe,
       .contact-page-content iframe,
       .contact-wrap iframe,
       .contact-map-wrapper iframe,
       .page-content iframe[src*="google.com/maps"],
       .page-content iframe[src*="maps.google"],
       .page-content .mapWrapper iframe {
           height: 300px !important;
           min-height: 280px !important;
           border-radius: 12px !important;
       }
   }

   /* Modern Contact Page Info Cards & Grid */
   .contact-cards-section {
       margin-bottom: 35px;
   }

   .contact-cards-row {
       display: flex;
       flex-wrap: wrap;
       margin-left: -12px;
       margin-right: -12px;
   }

   .contact-cards-row > [class*="col-"] {
       display: flex;
       padding-left: 12px;
       padding-right: 12px;
       margin-bottom: 24px;
   }

   .contact-page .contact-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
       width: 100%;
       height: 100%;
       min-height: 220px;
       margin: 0 !important;
       padding: 32px 24px 26px !important;
       text-align: center;
       background: #ffffff !important;
       border: 1px solid #e2e8f0 !important;
       border-radius: 16px !important;
       box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
       transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
   }

   .contact-page .contact-item:hover {
       transform: translateY(-5px);
       border-color: #cbd5e1 !important;
       box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04) !important;
   }

   .contact-page .contact-item img {
       display: inline-flex !important;
       align-items: center;
       justify-content: center;
       width: 64px !important;
       height: 64px !important;
       max-width: 64px !important;
       max-height: 64px !important;
       padding: 14px !important;
       margin: 0 0 18px 0 !important;
       border-radius: 50% !important;
       background: #eff6ff !important;
       box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12) !important;
       object-fit: contain !important;
       transition: transform 0.25s ease !important;
   }

   .contact-page .contact-item:hover img {
       transform: scale(1.1);
   }

   .contact-page .contact-item h3 {
       margin: 0 0 10px 0 !important;
       font-size: 18px !important;
       font-weight: 700 !important;
       color: #0f172a !important;
       letter-spacing: 0.03em !important;
       text-transform: uppercase !important;
       line-height: 1.3 !important;
   }

   .contact-page .contact-item p {
       margin: 0 0 6px 0 !important;
       font-size: 14.5px !important;
       line-height: 1.55 !important;
       color: #475569 !important;
       word-break: break-word;
   }

   .contact-page .contact-item a {
       color: #2563eb !important;
       font-weight: 600 !important;
       text-decoration: none !important;
       transition: color 0.2s ease !important;
       background: transparent !important;
   }

   .contact-page .contact-item a:hover {
       color: #d97706 !important;
       text-decoration: underline !important;
   }

   .contact-map-section {
       margin-bottom: 40px;
   }

   .contact-map-wrapper {
       position: relative;
       width: 100%;
       border-radius: 16px;
       overflow: hidden;
       box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.1), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
       background: #e2e8f0;
   }

   .contact-form-section {
       margin-bottom: 30px;
   }

   .contact-form-card {
       background: #ffffff;
       border: 1px solid #e2e8f0;
       border-radius: 16px;
       padding: 38px 40px 34px;
       box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.02);
   }

   .contact-form-header {
       margin-bottom: 24px;
       padding-bottom: 16px;
       border-bottom: 1px solid #f1f5f9;
   }

   .contact-form-subtitle {
       margin: 0;
       font-size: 14.5px;
       color: #64748b;
       line-height: 1.5;
   }

   @media (max-width: 767px) {
       .contact-cards-section {
           margin-bottom: 24px;
       }

       .contact-cards-row > [class*="col-"] {
           flex: 0 0 100%;
           max-width: 100%;
           padding-left: 0;
           padding-right: 0;
           margin-bottom: 16px;
       }

       .contact-page .contact-item {
           min-height: auto;
           padding: 24px 18px !important;
           border-radius: 14px !important;
       }

       .contact-map-section {
           margin-bottom: 25px;
       }

       .contact-map-wrapper {
           border-radius: 12px;
       }

       .contact-form-card {
           padding: 22px 16px 20px;
           border-radius: 12px;
       }
   }

   .page-content table {
       width: 100%;
       max-width: 100%;
       border-collapse: collapse;
   }
   
   /* --------------------------------------------------------------------------
      4. PHONES AND SMALL TABLETS
      -------------------------------------------------------------------------- */
   @media (max-width: 767px) {
       /* 16px is the minimum that stops iOS Safari from zooming the whole page
          in the moment a field gains focus. */
       .page-content input[type="text"],
       .page-content input[type="email"],
       .page-content input[type="tel"],
       .page-content input[type="number"],
       .page-content input[type="url"],
       .page-content input[type="password"],
       .page-content input[type="search"],
       .page-content input[type="date"],
       .page-content select,
       .page-content textarea,
       .page-content .form-control {
           font-size: 16px !important;
           min-height: 48px;
       }
   
       .page-content .form-group {
           margin-bottom: 16px;
       }
   
       .page-content button[type="submit"],
       .page-content input[type="submit"],
       .page-content form .btn,
        .page-content .btn-submit-complain,
        .page-content .enquiry-submit-btn,
        .page-content .complain-submit-btn,
        .page-content .contact-submit-btn {
           width: 100%;
           max-width: 100%;
           min-height: 50px;
           justify-content: center;
           float: none !important;
       }
   
       /* A wide table scrolls inside its own box instead of dragging the whole
          page sideways. */
       .page-content table {
           display: block;
           width: 100%;
           max-width: 100%;
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
       }
   }
   
   /* --------------------------------------------------------------------------
      5. VERY SMALL PHONES
      -------------------------------------------------------------------------- */
   @media (max-width: 400px) {
       section.page-content {
           padding-top: 14px !important;
       }
   
       .page-content input[type="text"],
       .page-content input[type="email"],
       .page-content input[type="tel"],
       .page-content input[type="number"],
       .page-content select,
       .page-content textarea,
       .page-content .form-control {
           padding-left: 12px;
           padding-right: 12px;
       }
   }
   
   
   
/* Keep the expanded dropdown visibly highlighted on mobile only. */
@media (max-width: 767px) {
    .navborder .navbar-nav > li.open > a,
    .navborder .navbar-nav > li.open > a:hover,
    .navborder .navbar-nav > li.open > a:focus {
        color: var(--primary-royal) !important;
        background: rgba(37, 99, 235, 0.12) !important;
        border-left: 4px solid var(--accent-gold) !important;
        font-weight: 700 !important;
    }
}


/* Mobile header: keep the school name inside its own space beside the menu button. */
@media (max-width: 767px) {
    .header-brand-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .header-brand-col {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px 0 !important;
    }

    .header-brand {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        max-width: calc(100% - 56px) !important;
    }

    .header-brand .logo {
        flex: 0 0 auto !important;
    }

    .header-brand-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .header-brand-text .school-name {
        display: block !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: clamp(13px, 4vw, 17px) !important;
        line-height: 1.25 !important;
    }

    .mobile-menu-bar {
        display: block !important;
        flex: 0 0 46px !important;
        width: 46px !important;
        margin: 0 !important;
    }

    .mobile-navbar-toggle {
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
    }

    .header-extras-col {
        width: 100% !important;
        margin-top: 4px !important;
        padding: 0 !important;
    }
}

@media (max-width: 380px) {
    .header-brand-col {
        gap: 8px !important;
    }

    .header-brand {
        gap: 8px !important;
    }

    .header-brand-text .school-name {
        font-size: 13px !important;
    }
}


/* Mark the current submenu page clearly on mobile. */
@media (max-width: 767px) {
    .navborder .dropdown-menu > li.active > a,
    .navborder .dropdown-menu > li.active > a:hover,
    .navborder .dropdown-menu > li.active > a:focus {
        color: var(--primary-royal) !important;
        background: rgba(37, 99, 235, 0.12) !important;
        border-left: 3px solid var(--accent-gold) !important;
        font-weight: 700 !important;
        padding-left: 32px !important;
    }
}


/* Responsive phone number sizing for contact cards. */
.contact-page .contact-item a[href^="tel:"] {
    display: inline-block !important;
    max-width: 100% !important;
    font-size: clamp(18px, calc(1.25vw + 8px), 24px) !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
    vertical-align: baseline;
}


/* Footer layout adjustment: balance the three visible columns and prevent narrow text overflow. */
@media (min-width: 576px) and (max-width: 991px) {
    .sf-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 32px 28px !important;
    }
    .sf-col--brand { grid-column: 1 / -1 !important; }
    .sf-col--contact { grid-column: auto !important; }
    .sf-contact-list { grid-template-columns: 1fr !important; }
}

@media (min-width: 992px) {
    .sf-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(180px, 1fr) minmax(280px, 1.5fr) !important;
        gap: 36px !important;
    }
}

@media (min-width: 1200px) {
    .sf-grid {
        grid-template-columns: minmax(0, 1.9fr) minmax(190px, 1fr) minmax(300px, 1.6fr) !important;
        gap: 44px !important;
    }
}

@media (max-width: 575px) {
    .sf-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .sf-contact-item__value { overflow-wrap: anywhere !important; }
    .sf-bottom { align-items: flex-start !important; text-align: left !important; }
    .sf-copy { line-height: 1.6 !important; }
}


/* Larger responsive school identity and principal photo sizing. */
.header-brand .logo img {
    height: clamp(56px, 5vw, 70px) !important;
    width: auto !important;
}
.header-brand-text .school-name {
    font-size: clamp(18px, 1.65vw, 24px) !important;
    line-height: 1.25 !important;
}

.principal-photo-wrap {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.principal-portrait {
    display: block !important;
    width: clamp(220px, 24vw, 320px) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
.principal-page-photo {
    max-width: 100%;
    text-align: center;
}
.principal-page-portrait {
    display: block;
    width: min(100%, 360px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .header-brand .logo img { height: 58px !important; }
    .header-brand-text .school-name { font-size: 19px !important; }
}

@media (max-width: 767px) {
    .header-brand .logo img { height: 52px !important; }
    .header-brand-text .school-name { font-size: clamp(16px, 4.2vw, 19px) !important; }
    .principal-photo-wrap { max-width: 100% !important; }
    .principal-portrait { width: min(100%, 300px) !important; max-height: 70vh !important; }
}

@media (max-width: 380px) {
    .header-brand .logo img { height: 46px !important; }
    .header-brand-text .school-name { font-size: 15px !important; }
}

/* Read-page image gallery: four columns on desktop, then adapt to screen width. */
.program-read-page .program-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 18px;
    margin-top: 10px;
}

.program-read-page .program-gallery-grid > [class*="col-"] {
    display: flex;
    min-width: 0;
}

.program-read-page .program-gallery-grid .galleryfancy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 230px;
    padding: 8px;
    overflow: hidden;
    background: #fff;
}

.program-read-page .program-gallery-grid .galleryfancy a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.program-read-page .program-gallery-grid .galleryfancy img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
}

@media (max-width: 991px) {
    .program-read-page .program-gallery-grid .galleryfancy {
        height: 220px;
    }
}

/* Keep the admin/front-CMS navigation above editor cards and media pickers. */
.website-site-header,
.affix#alert,
.navborder {
    position: relative !important;
    z-index: 3000 !important;
}

.navborder .navbar-nav > li {
    position: relative;
}

.navborder .navbar-nav > li.open,
.navborder .navbar-nav > li:focus-within {
    z-index: 3001;
}

.navborder .navbar-nav > li > .dropdown-menu {
    position: absolute;
    z-index: 3002 !important;
}

@media (max-width: 991px) {
    .navborder .navbar-collapse,
    .navborder .navbar-collapse.in,
    .navborder .navbar-collapse.show {
        position: relative;
        z-index: 3000;
    }

    .navborder .navbar-nav > li > .dropdown-menu {
        max-width: min(92vw, 360px);
        max-height: min(70vh, 520px);
        overflow-y: auto;
    }
}

/* Keep the announcement ticker moving and readable on narrow screens. */
.website-site-header .newscontent-wrap {
    width: 100%;
    min-width: 0;
}

.website-site-header .newscontent-wrap .newstab {
    flex: 0 0 auto;
}

.website-site-header .newscontent-ticker {
    flex: 1 1 auto;
    min-width: 0;
    width: 0;
}

.website-site-header .newscontent-ticker marquee {
    display: block;
    width: 100%;
    white-space: nowrap;
}

.website-site-header .newscontent-ticker ul li a {
    white-space: nowrap;
}

@media (max-width: 575px) {
    .website-site-header .newsarea .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .website-site-header .newscontent-wrap .newstab {
        margin-right: 8px !important;
        padding: 5px 9px !important;
        font-size: 10px !important;
        letter-spacing: .04em;
    }

    .website-site-header .newscontent-ticker ul li {
        padding-right: 30px;
    }

    .website-site-header .newscontent-ticker ul li a {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .program-read-page .program-gallery-grid {
        row-gap: 14px;
    }

    .program-read-page .program-gallery-grid .galleryfancy {
        height: 210px;
    }
}

@media (max-width: 575px) {
    .program-read-page .program-gallery-grid .galleryfancy {
        height: 240px;
    }
}

/* Keep the four homepage actions visible in normal flow directly below the banner. */
.home-page-content {
    margin-top: 0 !important;
    padding-top: 22px !important;
    padding-bottom: 6px !important;
    position: relative !important;
    z-index: 2 !important;
}

.home-page-content > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.home-page-content > .row::before,
.home-page-content > .row::after,
.home-page-content .services .service-inner > .container > .row::before,
.home-page-content .services .service-inner > .container > .row::after {
    display: none !important;
    content: none !important;
}

.home-page-content .services .service-inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.home-page-content .services .service-inner > .container {
    width: 100% !important;
    max-width: 1380px !important;
}

.home-page-content .services .service-inner > .container > .row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin: 0 !important;
}

.home-page-content .services .service-box {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.home-page-content .services .service-box-content {
    height: 100% !important;
    min-height: 150px;
}

@media (max-width: 991px) {
    .home-page-content .services .service-inner > .container > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 767px) {
    .home-page-content {
        padding-top: 16px !important;
    }
}

@media (max-width: 360px) {
    .home-page-content .services .service-inner > .container > .row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Home notice, event and achievement panels: keep CMS content readable at every width. */
.threesection .home-widgets-row {
    align-items: stretch;
}

.threesection .home-widget-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.threesection .home-widget-panel {
    height: 400px !important;
    min-height: 320px;
    padding: 14px !important;
    background: #fff !important;
}

.threesection .home-widget-scroll-wrap {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.threesection .home-widget-scroll-track {
    will-change: transform;
}

.threesection .home-widget-card {
    overflow-wrap: anywhere;
    word-break: normal;
}

.threesection .home-widget-card-title,
.threesection .home-widget-card-text {
    overflow-wrap: anywhere;
}

.threesection .home-widget-empty {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #667085;
}

.threesection .home-widget-empty p {
    margin: 0;
}

.threesection .home-widget-panel-achievements {
    padding: 0 !important;
}

.threesection .home-achievement-carousel,
.threesection .home-achievement-carousel .carousel-inner,
.threesection .home-achievement-carousel .item {
    min-height: 100%;
}

.threesection .home-achievement-link {
    min-height: 100%;
    background: #fff;
}

.threesection .home-achievement-image-wrap {
    height: 100%;
    min-height: 240px;
}

.threesection .home-achievement-img-main,
.threesection .home-achievement-img-hover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.threesection .home-achievement-caption {
    z-index: 1;
    background: rgba(255, 255, 255, .96);
}

.threesection .home-widget-viewall {
    margin-top: auto;
    padding-top: 14px;
}

/* Keep desktop navigation dropdowns above page cards and their action buttons. */
@media (min-width: 992px) {
    .website-site-header {
        position: relative;
        z-index: 2000;
    }

    .website-site-header.affix {
        z-index: 2050;
    }

    .navborder {
        z-index: 2001 !important;
    }

    .navborder .navbar-nav > li.open {
        z-index: 2002;
    }

    .navborder .navbar-nav > li > .dropdown-menu {
        z-index: 2003 !important;
    }
}

@media (max-width: 991px) {
    .threesection .home-widget-panel {
        height: 360px !important;
    }
}

@media (max-width: 767px) {
    .threesection .home-widget-panel {
        height: 320px !important;
        min-height: 260px;
    }

    .threesection .home-widget-title {
        font-size: 20px !important;
    }

    .threesection .home-achievement-image-wrap {
        min-height: 210px;
    }

    .threesection .home-achievement-caption {
        padding: 10px 12px;
    }

    .threesection .home-achievement-caption p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .threesection .home-widget-panel {
        height: 290px !important;
        min-height: 230px;
        padding: 10px !important;
    }

    .threesection .home-widget-panel-achievements {
        padding: 0 !important;
    }

    .threesection .home-widget-card {
        padding: 10px 11px;
    }

    .threesection .home-widget-card-title,
    .threesection .home-widget-card-text {
        font-size: 13px !important;
    }

    .threesection .home-widget-viewall {
        text-align: left;
    }
}

/* Public notice-table page */
.notice-board-page {
    padding: clamp(28px, 5vw, 56px) 0 !important;
    background: var(--bg-soft, #f4f7fb);
}

.notice-board-page .program-read-title {
    margin: 0 0 16px;
    color: var(--primary-navy, #102746);
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.notice-board-page > .container,
.notice-board-page .container {
    width: min(100% - 32px, 1180px);
}

.notice-board-page .latestevent {
    margin: 0 0 14px;
}

.notice-board-page .alert-message.alert-message-default {
    position: relative;
    padding: 18px 20px;
    border: 1px solid var(--border-color, #dbe4ef);
    border-left: 4px solid var(--accent-gold, #f59e0b);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(16, 39, 70, .07);
    overflow-wrap: anywhere;
}

.notice-board-page .notice-board-date {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eaf1fb;
    color: var(--primary-royal, #2457a6);
    font-size: 12px;
    font-weight: 700;
}

.notice-board-page .alert-message h4 {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.45;
}

.notice-board-page .alert-message h4 a {
    color: var(--primary-navy, #102746);
    text-decoration: none;
}

.notice-board-page .alert-message h4 a:hover,
.notice-board-page .alert-message h4 a:focus {
    color: var(--primary-royal, #2457a6);
    text-decoration: underline;
}

.notice-board-page .alert-message p {
    overflow-wrap: anywhere;
}

.notice-board-page .notice-board-empty {
    padding: 24px 18px;
    border: 1px solid var(--border-color, #dbe4ef);
    border-radius: 12px;
    background: #fff;
}

@media (max-width: 575px) {
    .notice-board-page > .container,
    .notice-board-page .container {
        width: min(100% - 24px, 100%);
    }

    .notice-board-page .alert-message.alert-message-default {
        padding: 15px 14px;
    }

    .notice-board-page .photo-gallery-pagination-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
}