:root {
     --navy: #471771;
     --royal: #471771;
     --gold: #c8951a;
     --gold-light: #f5c842;
     --cream: #fdf8f0;
     --warm-white: #fffcf5;
 }

 * {
     font-family: 'Roboto Slab', sans-serif;
 }

 h1,
 h2,
 h3,
 .font-display {
     font-family: 'Roboto Slab', serif;
 }

 /* TOPBAR */
 #topbar {
     background: var(--navy);
 }

 /* BANNER */
 #school-banner {
     background: linear-gradient(135deg, var(--navy) 0%, var(--royal) 50%, #0e2a5c 100%);
     position: relative;
     overflow: hidden;
 }

 #school-banner::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 20% 50%, rgba(200, 149, 26, 0.18) 0%, transparent 60%),
         radial-gradient(ellipse at 80% 50%, rgba(200, 149, 26, 0.1) 0%, transparent 60%);
 }

 .banner-pattern {
     position: absolute;
     inset: 0;
     background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 40px),
         repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 40px);
 }

 /* NAVBAR */
 #navbar {
     background: var(--gold);
     position: sticky;
     top: 0;
     z-index: 1000;
 }

 .nav-link {
     color: var(--navy);
     font-weight: 600;
     font-size: 14px;
     letter-spacing: 0.04em;
     padding: 10px 13px;
     display: block;
     transition: background 0.2s;
     position: relative;
 }

 .nav-link:hover,
 .nav-link.active {
     background: var(--navy);
     color: var(--gold-light);
 }

 .dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 200px;
     background: var(--navy);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px);
     transition: all 0.25s;
     z-index: 999;
 }

 .nav-item:hover .dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown a {
     display: block;
     padding: 10px 18px;
     font-size: 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.07);
     transition: all 0.2s;
 }

 .dropdown a:hover {
     background: var(--gold);
     color: var(--navy);
     padding-left: 26px;
 }

 .sub-dropdown {
     position: absolute;
     left: 100%;
     top: 0;
     min-width: 190px;
     background: var(--royal);
     opacity: 0;
     visibility: hidden;
     transform: translateX(-6px);
     transition: all 0.25s;
 }

 .dropdown-item:hover .sub-dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
 }

 .dropdown-item {
     position: relative;
 }

 /* HERO CAROUSEL */
 .carousel-slide {
     display: none;
     animation: fadeSlide 0.7s ease;
 }

 .carousel-slide.active {
     display: block;
 }

 @keyframes fadeSlide {
     from {
         opacity: 0;
         transform: scale(1.03);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* FLASH NEWS */
 #flash-news {
     background: var(--navy);
     overflow: hidden;
 }

 .flash-ticker {
     white-space: nowrap;
     animation: ticker 35s linear infinite;
     display: inline-block;
 }

 @keyframes ticker {
     from {
         transform: translateX(100vw);
     }

     to {
         transform: translateX(-100%);
     }
 }

 /* SECTION HEADINGS */
 .section-title {
     font-family: 'Playfair Display', serif;
     color: var(--navy);
     position: relative;
     display: inline-block;
 }

 .section-title::after {
     content: '';
     display: block;
     height: 3px;
     background: linear-gradient(90deg, var(--gold), transparent);
     margin-top: 6px;
     width: 70%;
 }

 .section-badge {
     background: var(--gold);
     color: var(--navy);
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 3px 12px;
     display: inline-block;
     margin-bottom: 8px;
 }

 /* CARDS */
 .news-card {
     border-left: 4px solid var(--gold);
     background: white;
     box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .news-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
 }

 .event-card {
     background: white;
     border-top: 3px solid var(--gold);
     box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .event-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
 }

 .date-badge {
     background: var(--navy);
     color: white;
     text-align: center;
     padding: 8px 14px;
     flex-shrink: 0;
 }

 /* THOUGHT OF THE DAY */
 #thought-section {
     background: linear-gradient(135deg, var(--navy), var(--royal));
 }

 /* GALLERY */
 .gallery-item {
     overflow: hidden;
     position: relative;
     aspect-ratio: 4/3;
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s;
 }

 .gallery-item:hover img {
     transform: scale(1.08);
 }

 .gallery-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(10, 22, 40, 0.85) 0%, transparent 50%);
     opacity: 0;
     transition: opacity 0.3s;
     display: flex;
     align-items: flex-end;
     padding: 12px;
 }

 .gallery-item:hover .gallery-overlay {
     opacity: 1;
 }

 /* FOOTER */
 footer {
     background: var(--navy);
 }

 /* WELCOME */
 #welcome-section {
     background: var(--cream);
 }

 .principal-card {
     background: white;
     box-shadow: 0 4px 28px rgba(0, 0, 0, 0.1);
     border-radius: 2px;
     overflow: hidden;
 }

 .principal-img {
     width: 100%;
     height: 220px;
     object-fit: cover;
     background: linear-gradient(135deg, var(--royal), var(--navy));
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Mobile nav */
 #mobile-menu {
     display: none;
 }

 #mobile-menu.open {
     display: block;
 }

 /* Scroll to top */
 #scroll-top {
     position: fixed;
     bottom: 28px;
     right: 28px;
     z-index: 999;
     background: var(--gold);
     color: var(--navy);
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: none;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     transition: all 0.2s;
 }

 #scroll-top.show {
     display: flex;
 }

 #scroll-top:hover {
     background: var(--navy);
     color: var(--gold);
 }