:root {
     --primary-red: #8b101c;
     --primary-dark: #650611;
     --primary-deep: #3b0209;
     --cream-bg: #f8f2e6;
     --gold-accent: #c89a2e;
     --gold-glow: rgba(200, 154, 46, 0.45);
     --red-glow: rgba(139, 16, 28, 0.55);
     --text-white: #ffffff;
     --text-gold-light: #fbeec8;
     --text-dark: #222222;
     --trans-fluid: cubic-bezier(0.16, 1, 0.3, 1);
     --text-dim: rgba(255, 255, 255, 0.88);

     --font-sans: "Poppins", sans-serif;
     --font-serif: "Lora", serif;

     /* About Us & Principal Section Variables */
     --text-dark-new: #1a1a24;
     --brand-primary: #78101b;
     --brand-secondary: #4f060e;
     --card-shadow: 0 20px 40px rgba(120, 16, 27, 0.06);

     /* Toppers Section Variables */
     --bg-canvas: #f8f9fa;

     /* Pattern image URL */
     --custom-pattern-img: url("../images/school\ pattern.png");

     /* Achievements & Testimonials Variables */
     --achtest-crimson-dark: #3b0306;
     --achtest-gold-bright: #e5c158;
     --achtest-border-warm: #e6dcce;
     --achtest-border-subtle: #f0e8dc;
     --achtest-text-main: #2c1810;
     --achtest-text-muted: #6a584d;
     --achtest-font-body: "Plus Jakarta Sans", sans-serif;
     --achtest-font-cinzel: "Cinzel", serif;
     --achtest-font-playfair: "Playfair Display", serif;
     --achtest-radius-xl: 36px;
     --achtest-radius-lg: 20px;
     --achtest-radius-md: 14px;
     --achtest-radius-pill: 9999px;
     --achtest-shadow-premium: 0 14px 40px -10px rgba(96, 8, 14, 0.08);
     --achtest-shadow-deep: 0 20px 45px -10px rgba(44, 4, 7, 0.28);
   }

   body,
   html {
     margin: 0;
     padding: 0;
     font-family: var(--font-sans);
     background-color: #f6f0db;
     min-height: 100vh;
     overflow-x: hidden;
   }

   /* =========================================
   TOP NAVIGATION BAR 
   ========================================= */
   .navbar-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 3000;
     filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
   }

   .nav-thin-bar {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 12px;
     background-color: var(--primary-dark);
     border-bottom: 2px solid var(--gold-accent);
     z-index: 1;
   }

   .nav-main-bar {
     position: relative;
     z-index: 10;
     width: 100%;
     max-width: 900px;
     margin: 10px auto 0 auto;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 15px;
     box-sizing: border-box;
   }

   .nav-bg {
     position: absolute;
     inset: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 90' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='menuGrad' x1='0' x2='1'%3E%3Cstop offset='0%25' stop-color='%236b0713'/%3E%3Cstop offset='50%25' stop-color='%238b101c'/%3E%3Cstop offset='100%25' stop-color='%23650611'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 H410 C480 0 510 90 590 90 H0 Z' fill='%23f8f2e6'/%3E%3Cpath d='M370 0 H1400 V90 H590 C510 90 480 0 410 0 Z' fill='url(%23menuGrad)'/%3E%3Cpath d='M0 0 H410 C480 0 510 90 590 90' fill='none' stroke='%238b101c' stroke-width='4'/%3E%3Cpath d='M0 1 H410 C480 1 510 89 590 89 H1400' fill='none' stroke='%23c89a2e' stroke-width='2'/%3E%3Cpath d='M0 89 H590 C510 89 480 1 410 1 H0' fill='none' stroke='%23c89a2e' stroke-width='2'/%3E%3C/svg%3E");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     pointer-events: none;
   }

   .nav-main-bar::before,
   .nav-main-bar::after {
     content: "";
     position: absolute;
     top: 0;
     width: 75px;
     height: 100%;
     z-index: 2;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     pointer-events: none;
   }

   .nav-main-bar::before {
     left: -74px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 90' preserveAspectRatio='none'%3E%3Cpath d='M-5 0 H75 V90 C37.5 90 37.5 0 -5 0 Z' fill='%23f8f2e6'/%3E%3Cpath d='M76 89 C37.5 89 37.5 1 -1 1 H76' fill='none' stroke='%23c89a2e' stroke-width='2'/%3E%3C/svg%3E");
   }

   .nav-main-bar::after {
     right: -74px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 90' preserveAspectRatio='none'%3E%3Cpath d='M80 0 H0 V90 C37.5 90 37.5 0 80 0 Z' fill='%23650611'/%3E%3Cpath d='M-1 89 C37.5 89 37.5 1 76 1' fill='none' stroke='%23c89a2e' stroke-width='2'/%3E%3C/svg%3E");
   }

   .brand-section {
     position: relative;
     display: flex;
     align-items: center;
     padding-left: 10px;
     gap: 5px;
     z-index: 10;
     height: 100%;
     left: -50px;
   }

   .brand-crest {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     overflow: hidden;
     background: #fff;
   }

   .school-logo-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .school-title {
     display: flex;
     flex-direction: column;
     color: var(--primary-red);
     line-height: 1.1;
     white-space: nowrap;
   }

   .school-title .light-text {
     font-size: 16px;
     font-weight: 700;
     font-family: var(--font-sans);
   }

   .school-title .bold-text {
     font-size: 16px;
     font-weight: 700;
     font-family: var(--font-serif);
   }

   .divider-thin {
     height: 28px;
     width: 1px;
     background-color: rgba(139, 16, 28, 0.25);
     margin: 0 6px;
   }

   .divider-thick {
     height: 28px;
     width: 2.5px;
     background-color: var(--gold-accent);
     margin: 0 6px;
   }

   .info-block {
     display: flex;
     flex-direction: column;
     color: var(--primary-dark);
     font-size: 9px;
     line-height: 1.25;
     letter-spacing: 0.2px;
     white-space: nowrap;
     font-weight: 500;
   }

   .info-block .bold {
     font-weight: 700;
     font-size: 10px;
   }

   .action-section {
     position: relative;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 15px;
     z-index: 10;
   }

   .nav-links {
     display: flex;
     gap: 4px;
     height: 100%;
     align-items: center;
   }

   .nav-links>a.drop-btn {
     color: var(--text-white);
     text-decoration: none;
     font-size: 14px;
     display: flex;
     align-items: center;
     padding: 10px 14px;
     border-radius: 6px;
     transition: all 0.2s ease;
     cursor: pointer;
   }

   .nav-links>a.drop-btn:hover {
     background-color: rgba(255, 255, 255, 0.15);
     color: var(--gold-accent);
   }

   .nav-links>.dropdown>a.drop-btn {
     color: var(--text-white);
     text-decoration: none;
     font-size: 12px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 10px 14px;
     border-radius: 6px;
     transition: all 0.2s ease;
     cursor: pointer;
     letter-spacing: 0.5px;
   }

   .nav-links>.dropdown>a.drop-btn i.arrow {
     font-size: 9px;
     transition: transform 0.3s ease;
   }

   .dropdown:hover>a.drop-btn {
     background-color: rgba(255, 255, 255, 0.15);
     color: var(--gold-accent);
   }

   .dropdown:hover>a.drop-btn i.arrow {
     transform: rotate(180deg);
   }

   .dropdown {
     position: relative;
     height: 100%;
     display: flex;
     align-items: center;
   }

   .creative-dropdown {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top: 100%;
     left: 0;
     background: #ffffff;
     width: 260px;
     border-radius: 12px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
     border-top: 3px solid var(--primary-red);
     padding: 10px;
     z-index: 100;
     transform: translateY(15px);
     transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     display: flex;
     flex-direction: column;
     gap: 4px;
   }

   .creative-dropdown::before {
     content: "";
     position: absolute;
     top: -20px;
     left: 0;
     right: 0;
     height: 20px;
     background: transparent;
   }

   .nav-links .dropdown:last-child .creative-dropdown {
     left: auto;
     right: 0;
   }

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

   .creative-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px;
     text-decoration: none;
     border-radius: 8px;
     transition: all 0.2s ease;
     background: transparent;
     cursor: pointer;
   }

   .creative-item:hover {
     background: #fcf8f2;
   }

   .c-icon-box {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     background: rgba(200, 154, 46, 0.15);
     color: var(--primary-red);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     transition: all 0.2s ease;
     flex-shrink: 0;
   }

   .creative-item:hover .c-icon-box {
     background: var(--primary-red);
     color: var(--gold-accent);
     transform: scale(1.05);
   }

   .c-text {
     display: flex;
     flex-direction: column;
   }

   .c-title {
     font-size: 13px;
     font-weight: 700;
     color: var(--primary-dark);
     font-family: var(--font-sans);
     transition: color 0.2s ease;
   }

   .c-desc {
     font-size: 11px;
     color: #777;
     margin-top: 2px;
     line-height: 1.2;
   }

   .creative-item:hover .c-title {
     color: var(--primary-red);
   }

   .icon-group {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-left: 10px;
   }

   .dashed-icon {
     width: 24px;
     height: 24px;
     border: 1.5px dashed var(--gold-accent);
     border-radius: 50%;
     cursor: pointer;
     transition: transform 0.3s ease;
   }

   .dashed-icon:hover {
     transform: scale(1.1) rotate(45deg);
   }

   .hamburger-btn {
     background: none;
     border: none;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     padding: 0;
     color: var(--text-white);
     z-index: 1001;
   }

   .hamburger-btn .line {
     width: 22px;
     height: 2px;
     background-color: var(--text-white);
     transition: background-color 0.3s ease;
   }

   .hamburger-btn span {
     font-size: 9px;
     font-family: var(--font-sans);
     font-weight: 700;
     letter-spacing: 1px;
     margin-top: 2px;
     transition: color 0.3s ease;
   }

   .hamburger-btn:hover .line {
     background-color: var(--gold-accent);
   }

   .hamburger-btn:hover span {
     color: var(--gold-accent);
   }

   /* ========================================================
   GRID-STYLE FULL SCREEN OVERLAY MENU
   ======================================================== */
   .full-screen-menu {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background-color: var(--cream-bg);
     z-index: 2000;
     display: flex;
     flex-direction: column;
     align-items: center;
     clip-path: circle(0% at 90% 10%);
     transition: clip-path 0.7s cubic-bezier(0.86, 0, 0.07, 1);
     overflow: hidden;
   }

   .full-screen-menu.active {
     clip-path: circle(150% at 90% 10%);
   }

   .fs-top-left-actions {
     position: absolute;
     top: 130px;
     left: 40px;
     display: flex;
     gap: 15px;
     z-index: 2005;
   }

   .fs-top-btn {
     height: 45px;
     background: #ffffff;
     color: var(--primary-dark);
     border-radius: 25px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     font-size: 16px;
     font-weight: 600;
     font-family: var(--font-sans);
     box-shadow: 0 4px 15px rgba(139, 16, 28, 0.15);
     transition: all 0.3s ease;
     border: 2px solid transparent;
   }

   .fs-top-btn:not(.text-btn) {
     width: 45px;
     border-radius: 50%;
   }

   .fs-top-btn.text-btn {
     padding: 0 20px;
     gap: 8px;
     font-size: 13px;
   }

   .fs-top-btn i {
     color: var(--primary-red);
     transition: color 0.3s ease;
   }

   .fs-top-btn:hover {
     background: var(--primary-red);
     color: #ffffff;
     border-color: var(--primary-dark);
     transform: translateY(-3px);
   }

   .fs-top-btn:hover i {
     color: var(--gold-accent);
   }

   .fs-close-btn {
     position: absolute;
     top: 130px;
     right: 40px;
     background: var(--primary-red);
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: none;
     color: var(--cream-bg);
     font-size: 18px;
     cursor: pointer;
     transition: all 0.4s ease;
     z-index: 2005;
     box-shadow: 0 4px 15px rgba(139, 16, 28, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .fs-close-btn:hover {
     transform: rotate(90deg) scale(1.1);
     background: var(--primary-dark);
   }

   .fs-content-scroll {
     width: 100%;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     padding-top: 210px;
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   .fs-mega-grid {
     width: 95%;
     max-width: 1300px;
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 30px 20px;
     margin-bottom: 50px;
     opacity: 0;
     transform: translateY(30px);
     transition:
       opacity 0.6s ease 0.3s,
       transform 0.6s ease 0.3s;
   }

   .full-screen-menu.active .fs-mega-grid {
     opacity: 1;
     transform: translateY(0);
   }

   .menu-column {
     display: flex;
     flex-direction: column;
   }

   .col-header {
     background: #ffffff;
     color: var(--primary-red);
     font-family: var(--font-sans);
     font-size: 14px;
     font-weight: 700;
     text-align: center;
     padding: 10px 15px;
     border-radius: 25px;
     margin-bottom: 15px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
     border-bottom: 2px solid var(--gold-accent);
     white-space: nowrap;
   }

   a.col-header {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
   }

   a.col-header i {
     font-size: 15px;
     color: var(--gold-accent);
     transition: color 0.3s ease;
   }

   a.col-header:hover {
     background: var(--primary-red);
     color: var(--text-white);
     transform: translateY(-2px);
     box-shadow: 0 6px 15px rgba(139, 16, 28, 0.15);
   }

   a.col-header:hover i {
     color: var(--text-white);
   }

   .col-links {
     list-style: none;
     padding: 0;
     margin: 0 0 0 10px;
   }

   .col-links li {
     margin-bottom: 10px;
   }

   .col-links a {
     text-decoration: none;
     color: var(--text-dark);
     font-size: 13px;
     font-weight: 500;
     font-family: var(--font-sans);
     display: flex;
     gap: 8px;
     align-items: flex-start;
     transition: all 0.2s ease;
   }

   .col-links a::before {
     content: "-";
     color: var(--primary-red);
     font-weight: 700;
   }

   .col-links a:hover {
     color: var(--primary-red);
     transform: translateX(5px);
   }

   .fs-bottom-footer {
     width: 100%;
     margin-top: auto;
     padding: 40px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
   }

   .social-icons-row {
     display: flex;
     gap: 15px;
     margin-bottom: 10px;
   }

   .social-icon-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 1px solid var(--primary-red);
     color: var(--primary-red);
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     font-size: 16px;
     transition: all 0.3s ease;
   }

   .social-icon-btn:hover {
     background: var(--primary-red);
     color: #fff;
   }

   .contact-info-row {
     display: flex;
     gap: 30px;
     color: var(--primary-dark);
     font-size: 13px;
     font-weight: 500;
     font-family: var(--font-sans);
     flex-wrap: wrap;
     justify-content: center;
   }

   .contact-info-row span {
     display: flex;
     align-items: center;
     gap: 8px;
   }

   .contact-info-row i {
     color: var(--gold-accent);
     font-size: 15px;
   }

   .copyright-text {
     color: #666;
     font-size: 12px;
     margin-top: 10px;
     text-align: center;
     font-family: var(--font-sans);
   }

   .copyright-text b {
     color: var(--primary-dark);
   }

   /* =========================================
   CINEMATIC HERO SLIDER
   ========================================= */
   .hero-section {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     background-color: #000;
   }

   .hero-section .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     visibility: hidden;
     transition:
       opacity 1s ease-in-out,
       visibility 1s;
     z-index: 10;
   }

   .hero-section .slide.active {
     opacity: 1;
     visibility: visible;
     z-index: 20;
   }

   .hero-section .slide-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.15);
     transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

   .hero-section .slide.active .slide-bg {
     transform: scale(1);
   }

   .hero-section .slide-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg,
         rgba(101, 6, 17, 0.8) 0%,
         rgba(0, 0, 0, 0.5) 50%,
         rgba(0, 0, 0, 0.2) 100%);
     z-index: 1;
   }

   .hero-section .slide-content {
     position: absolute;
     top: 50%;
     left: 10%;
     transform: translateY(-45%);
     z-index: 2;
     color: var(--text-white);
     max-width: 650px;
     padding-top: 50px;
   }

   .hero-section .slide-subtitle {
     font-family: var(--font-sans);
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 3px;
     color: var(--gold-accent);
     text-transform: uppercase;
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     gap: 10px;
     transform: translateY(30px);
     opacity: 0;
     transition: all 0.8s ease 0.4s;
   }

   .hero-section .slide-subtitle::before {
     content: "";
     width: 40px;
     height: 2px;
     background-color: var(--gold-accent);
   }

   .hero-section .slide-title {
     font-family: var(--font-serif);
     font-size: 4.5rem;
     line-height: 1.1;
     font-weight: 700;
     margin: 0 0 20px 0;
     transform: translateY(40px);
     opacity: 0;
     transition: all 0.8s ease 0.6s;
     text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
   }

   .hero-section .slide-desc {
     font-family: var(--font-sans);
     font-size: 17px;
     line-height: 1.6;
     font-weight: 300;
     margin-bottom: 35px;
     color: #e0e0e0;
     transform: translateY(30px);
     opacity: 0;
     transition: all 0.8s ease 0.8s;
   }

   .hero-section .slide-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 32px;
     background-color: transparent;
     color: var(--text-white);
     border: 2px solid var(--gold-accent);
     border-radius: 30px;
     font-family: var(--font-sans);
     font-weight: 600;
     font-size: 14px;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 1px;
     overflow: hidden;
     position: relative;
     transform: translateY(30px);
     opacity: 0;
     transition: all 0.8s ease 1s;
   }

   .hero-section .slide-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: var(--gold-accent);
     transition: all 0.4s ease;
     z-index: -1;
   }

   .hero-section .slide-btn:hover::before {
     left: 0;
   }

   .hero-section .slide-btn:hover {
     color: var(--primary-dark);
   }

   .hero-section .slide.active .slide-subtitle,
   .hero-section .slide.active .slide-title,
   .hero-section .slide.active .slide-desc,
   .hero-section .slide.active .slide-btn {
     transform: translateY(0);
     opacity: 1;
   }

   /* =========================================
   INTERACTIVE 360° ORB
   ========================================= */
   .widget-360-container {
     position: absolute;
     bottom: 12%;
     right: 8%;
     z-index: 30;
     display: flex;
     align-items: center;
     gap: 15px;
     cursor: pointer;
   }

   .orb-text {
     color: var(--text-white);
     text-align: right;
     font-family: var(--font-sans);
     opacity: 0.8;
     transition: opacity 0.3s ease;
   }

   .orb-text h4 {
     margin: 0;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
   }

   .orb-text p {
     margin: 0;
     font-size: 11px;
     color: var(--gold-accent);
   }

   .orb {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 2px dashed var(--gold-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     animation: spinDashed 15s linear infinite;
   }

   .orb-inner {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     animation: reverseSpin 15s linear infinite;
     color: var(--text-white);
   }

   .orb-inner i {
     font-size: 24px;
     margin-bottom: 2px;
   }

   .orb-inner span {
     font-size: 11px;
     font-weight: 700;
     font-family: var(--font-sans);
   }

   @keyframes spinDashed {
     100% {
       transform: rotate(360deg);
     }
   }

   @keyframes reverseSpin {
     100% {
       transform: rotate(-360deg);
     }
   }

   .widget-360-container:hover .orb-text {
     opacity: 1;
     transform: translateX(-5px);
   }

   .widget-360-container:hover .orb {
     background: var(--primary-red);
     transform: scale(1.15);
     border: 2px solid var(--gold-accent);
     box-shadow: 0 0 30px rgba(200, 154, 46, 0.5);
     animation-play-state: paused;
   }

   .widget-360-container:hover .orb-inner {
     animation-play-state: paused;
     color: var(--gold-accent);
   }

   /* =========================================
   SLIDER CONTROLS
   ========================================= */
   .slider-controls {
     position: absolute;
     bottom: 40px;
     left: 10%;
     z-index: 30;
     display: flex;
     align-items: center;
     gap: 30px;
   }

   .nav-arrow {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: var(--text-white);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
   }

   .nav-arrow:hover {
     border-color: var(--gold-accent);
     background: var(--gold-accent);
     color: var(--primary-dark);
     transform: scale(1.1);
   }

   .slider-pagination {
     display: flex;
     align-items: center;
     gap: 15px;
     color: var(--text-white);
     font-family: var(--font-serif);
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1px;
   }

   .progress-line {
     width: 60px;
     height: 2px;
     background: rgba(255, 255, 255, 0.2);
     position: relative;
   }

   .progress-line-fill {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     background: var(--gold-accent);
     width: 0%;
     transition: width 0.5s ease;
   }

   /* =========================================
   NEWS / NOTICE BOARD SECTION
   ========================================= */
   .NoticeBoard-sec {
     background-color: var(--cream-bg);
     background-image:
       linear-gradient(rgba(248, 242, 230, 0), rgba(248, 242, 230, 0)),
       var(--custom-pattern-img);
     background-repeat: repeat-y;
     background-size: 100% auto;
     background-attachment: scroll;
     color: var(--text-dark-new);
     font-family: "Plus Jakarta Sans", sans-serif;
     position: relative;
     padding: 50px 0 0 0;
     overflow: hidden;
   }

   .myNewsSwiper {
     border-radius: 100px;
     padding: 3px;
   }

   .NoticeBoard {
     height: 850px;
     background: url("../images/mariampurnoticeboard.webp");
     background-size: contain;
     background-repeat: no-repeat;
     padding: 180px 240px 0px 220px;
     width: 100%;
     background-position: center;
   }

   .NoticeBoard .title::after {
     content: "";
     position: absolute;
     top: 0;
     right: -15px;
     height: 150px;
     width: 9px;
     background: var(--gold-accent);
     z-index: 1;
     border-radius: 50px;
   }

   .news-underline {
     width: 300px;
     height: 5px;
     background: var(--primary-dark);
     margin: 0px;
     border-radius: 10px;
   }

   .News-card-sec {
     background: var(--cream-bg);
     border-radius: 10px;
     position: relative;
     padding: 10px 10px 0px 20px;
     margin-top: 10px;
     width: 100%;
   }

   .news-card {
     border-radius: 80px;
     padding-right: 18px;
     background: linear-gradient(135deg, #ffffff 0%, #faf3e6 100%);
     border: 2px solid var(--gold-accent);
     width: 100%;
     margin-bottom: 3px;
     box-shadow: 0 8px 18px rgba(59, 2, 9, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
     transition: transform 0.4s var(--trans-fluid), box-shadow 0.4s var(--trans-fluid), border-color 0.3s ease;
     cursor: pointer;
     overflow: hidden;
   }

   .news-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(120deg, transparent 30%, rgba(200, 154, 46, 0.08) 50%, transparent 70%);
     pointer-events: none;
   }

   .news-card:hover {
     transform: translateY(-4px) scale(1.01);
     border-color: var(--primary-red);
     box-shadow: 0 12px 24px var(--red-glow), 0 0 16px var(--gold-glow);
   }

   .news-card .side-round {
     background: radial-gradient(circle at 30% 30%, var(--primary-red), var(--primary-deep));
     width: 90px;
     height: 90px;
     min-width: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     color: var(--text-white);
     border: 3px solid #ffffff;
     outline: 2px solid var(--gold-accent);
     box-shadow: 0 4px 12px rgba(59, 2, 9, 0.4);
     transition: transform 0.4s var(--trans-fluid), outline-color 0.3s ease;
   }

   .news-card:hover .side-round {
     transform: rotate(-5deg) scale(1.05);
     outline-color: var(--text-gold-light);
   }

   .news-card .side-round .date-num {
     font-size: 25px;
     font-weight: 800;
     line-height: 1;
     color: var(--text-gold-light);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
   }

   .news-card .side-round p {
     font-size: 11px;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 0px;
     margin-top: 3px;
     color: var(--text-dim);
     font-weight: 600;
   }

   .news-card .news-title {
     color: var(--primary-deep);
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 0.2px;
     transition: color 0.3s ease, transform 0.3s ease;
   }

   .news-card:hover .news-title {
     color: var(--primary-red);
     transform: translateX(3px);
   }

   .news-card .news-meta {
     font-size: 12px;
     margin: 0px;
     color: #7a664e;
     font-weight: 500;
   }

   .news-card .news-meta i {
     color: var(--gold-accent);
     margin-right: 4px;
   }

   .carousel-controls .custom-prev1,
   .carousel-controls .custom-next1 {
     border: 1.5px solid var(--gold-accent);
     border-radius: 50px;
     padding: 8px 16px;
     font-size: 14px;
     background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
     color: var(--text-white);
     box-shadow: 0 4px 10px var(--red-glow);
     transition: all 0.3s var(--trans-fluid);
   }

   .carousel-controls .custom-prev1:hover,
   .carousel-controls .custom-next1:hover {
     background: linear-gradient(135deg, var(--primary-dark), var(--primary-deep));
     color: var(--text-gold-light);
     box-shadow: 0 6px 14px var(--gold-glow);
     transform: translateY(-2px);
   }

   .viewall-gallery {
     color: var(--primary-dark);
     font-weight: 700;
     text-decoration: none;
     padding: 6px 14px;
     border-radius: 30px;
     background: rgba(200, 154, 46, 0.12);
     border: 1px dashed var(--gold-accent);
     transition: all 0.3s ease;
   }

   .viewall-gallery:hover {
     background: var(--primary-red);
     color: var(--text-white);
     border-color: var(--primary-red);
   }

   /* =========================================
   ABOUT US SECTION (WITH PATTERN IMAGE)
   ========================================= */
   .abcs {
     background-color: var(--cream-bg);
     background-image:
       linear-gradient(rgba(248, 242, 230, 0), rgba(248, 242, 230, 0)),
       var(--custom-pattern-img);
     background-repeat: repeat-y;
     background-size: 100% auto;
     background-attachment: scroll;
     color: var(--text-dark-new);
     font-family: "Plus Jakarta Sans", sans-serif;
     position: relative;
     padding: 50px 0 0 0;
     overflow: hidden;
   }

   .abcs .bg-shape {
     position: absolute;
     background: linear-gradient(135deg,
         rgba(120, 16, 27, 0.04) 0%,
         rgba(79, 6, 14, 0.07) 100%);
     border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
     z-index: 0;
     pointer-events: none;
   }

   .abcs .shape-1 {
     width: 500px;
     height: 500px;
     top: -10%;
     left: -5%;
   }

   .abcs .heritage-badge {
     background: linear-gradient(135deg,
         var(--brand-primary),
         var(--brand-secondary));
     color: #ffffff;
     font-size: 0.75rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding: 0.6rem 1.2rem;
     border-radius: 8px;
     display: inline-block;
     box-shadow: 0 4px 12px rgba(120, 16, 27, 0.25);
     border: 1px solid rgba(200, 154, 46, 0.35);
   }

   .abcs .editorial-title {
     font-family: "Cinzel", serif;
     font-size: 3rem;
     font-weight: 700;
     line-height: 1.2;
     letter-spacing: -0.5px;
     color: #111116;
   }

   .abcs .editorial-title span {
     color: var(--brand-primary);
     display: block;
   }

   .abcs .lead-text {
     font-size: 1.1rem;
     line-height: 1.7;
     color: #4a4a58;
     border-left: 3px solid var(--gold-accent);
     padding-left: 1rem;
   }

   .abcs .value-box {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 16px;
     padding: 1.25rem;
     box-shadow: var(--card-shadow);
     transition: all 0.3s ease;
   }

   .abcs .value-box:hover {
     transform: translateY(-4px);
     border-color: var(--gold-accent);
     box-shadow: 0 25px 50px rgba(120, 16, 27, 0.08);
   }

   .abcs .icon-circle {
     width: 48px;
     height: 48px;
     background-color: rgba(120, 16, 27, 0.08);
     color: var(--brand-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
   }

   .abcs .btn-admission {
     background: linear-gradient(135deg, #78101b 0%, #560810 100%);
     color: #ffffff;
     font-weight: 600;
     padding: 0.8rem 2rem;
     border-radius: 100px;
     border: 1.5px solid rgba(200, 154, 46, 0.4);
     box-shadow: 0 8px 20px rgba(120, 16, 27, 0.25);
     transition: all 0.3s;
   }

   .abcs .btn-admission:hover {
     background: linear-gradient(135deg, #8f1522 0%, #680a13 100%);
     color: var(--text-gold-light);
     border-color: var(--gold-accent);
     transform: translateY(-2px);
     box-shadow: 0 12px 25px rgba(120, 16, 27, 0.35);
   }

   .abcs .btn-read-more {
     background-color: transparent;
     color: var(--brand-primary);
     font-weight: 600;
     padding: 0.8rem 2rem;
     border-radius: 100px;
     border: 2px solid var(--brand-primary);
     transition: all 0.3s;
   }

   .abcs .btn-read-more:hover {
     background-color: var(--brand-primary);
     color: #ffffff;
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(120, 16, 27, 0.2);
   }

   .abcs .creative-collage {
     position: relative;
     height: 560px;
     width: 100%;
   }

   .abcs .frame-main {
     position: absolute;
     width: 65%;
     height: 85%;
     top: 0;
     left: 0;
     border-radius: 40px;
     overflow: hidden;
     border: 8px solid #ffffff;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
     z-index: 2;
     transition: transform 0.4s ease;
   }

   .abcs .frame-sub-top {
     position: absolute;
     width: 45%;
     height: 45%;
     top: 10%;
     right: 0;
     border-radius: 30px;
     overflow: hidden;
     border: 8px solid #ffffff;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
     z-index: 3;
     transition: transform 0.4s ease;
   }

   .abcs .frame-sub-bottom {
     position: absolute;
     width: 45%;
     height: 45%;
     bottom: 0;
     right: 5%;
     border-radius: 30px;
     overflow: hidden;
     border: 8px solid #ffffff;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
     z-index: 1;
     transition: transform 0.4s ease;
   }

   .abcs .creative-collage img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
   }

   .abcs .creative-collage:hover .frame-main {
     transform: translate(-10px, -5px) scale(1.01);
   }

   .abcs .creative-collage:hover .frame-sub-top {
     transform: translate(15px, -15px);
   }

   .abcs .creative-collage:hover .frame-sub-bottom {
     transform: translate(5px, 20px);
   }

   .abcs .creative-collage:hover img {
     transform: scale(1.05);
   }

   /* =========================================
   PRINCIPAL MESSAGE SECTION
   ========================================= */
   .principal-sec {
     background-color: var(--cream-bg);
     background-image:
       linear-gradient(rgba(248, 242, 230, 0), rgba(248, 242, 230, 0)),
       var(--custom-pattern-img);
     background-repeat: repeat-y;
     background-size: 100% auto;
     background-attachment: scroll;
     color: var(--text-dark-new);
     font-family: "Plus Jakarta Sans", sans-serif;
     position: relative;
     padding: 50px 0;
     overflow: hidden;
   }

   .active-profile-frame {
     box-shadow: var(--card-shadow);
     transition: all 0.4s ease;
     border: 5px solid var(--primary-red);
   }

   .inactive-toggle-card {
     cursor: pointer;
     transition: all 0.3s ease;
     border-radius: 100px;
     position: absolute;
     bottom: -30px;
     right: 200px;
   }

   .inactive-toggle-card:hover {
     opacity: 1 !important;
     transform: translateY(-3px);
     border-color: var(--gold-accent);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
   }

   .role-badge {
     font-weight: 600;
     color: var(--primary-red);
     font-size: 15px;
     letter-spacing: 0.5px;
   }

   .name-text {
     color: var(--brand-primary);
     font-family: var(--font-serif);
   }

   .message-text {
     color: var(--text-dark-new);
     line-height: 1.7;
   }

   .brand-text {
     color: var(--brand-primary);
   }

   .read-more-text {
     color: var(--primary-red);
     text-decoration: none;
     font-weight: bold;
   }

   .read-more-text:hover {
     color: #fff;
   }

   .fade-in {
     animation: fadeIn 0.5s ease-in;
   }

   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(10px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   #preview-photo {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border: 2px solid var(--brand-primary);
   }

   .message-title-wrapper {
     padding: 12px 50px;
     display: inline-block;
   }

   .message-title-svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     filter: drop-shadow(0 10px 15px rgba(101, 6, 17, 0.15));
   }

   .message-title-content {
     z-index: 1;
   }

   .message-title-content h1 {
     color: var(--text-white);
     font-family: var(--font-serif);
     font-size: 2rem;
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
     margin-bottom: 2px !important;
   }

   .message-title-content p {
     color: var(--gold-accent);
     font-weight: 500;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     font-size: 0.8rem;
     margin: 0;
   }

   /* =========================================
   CAMPUS FACILITIES SECTION
   ========================================= */
   /* =========================================
   CAMPUS FACILITIES SECTION
   ========================================= */
   .fac-section-wrapper {
     background-color: var(--cream-bg);
     background-image:
       linear-gradient(rgba(248, 242, 230, 0), rgba(248, 242, 230, 0)),
       var(--custom-pattern-img);
     background-repeat: repeat-y;
     background-size: 100% auto;
     background-attachment: scroll;
     color: var(--text-dark-new);
     font-family: "Plus Jakarta Sans", sans-serif;
     position: relative;
     padding: 50px 0;
     overflow: hidden;
   }

   .fac-student-dock {
     position: absolute;
     left: -123px;
     bottom: -53px;
     height: 111%;
     max-height: 700px;
     width: 390px;
     z-index: 100;
     pointer-events: none;
     filter: drop-shadow(18px 22px 30px rgba(0, 0, 0, 0.42));
   }

   .fac-student-dock img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     object-position: bottom left;
     display: block;
   }

   .fac-main-board {
     position: relative;
     width: 100%;
     min-height: 520px;
     background: linear-gradient(180deg,
         var(--primary-red) 0%,
         var(--primary-dark) 51%,
         var(--primary-deep) 100%);
     border-radius: 80px;
     box-shadow: 0 35px 70px -15px var(--red-glow);
     display: grid;
     grid-template-columns: 1fr 1.25fr;
     padding: 55px 45px 55px 150px;
     gap: 30px;
     align-items: center;
     overflow: visible;
     z-index: 99;
   }

   .fac-content-col {
     color: var(--text-white);
     z-index: 4;
     position: relative;
     width: 100%;
   }

   .fac-tag {
     display: inline-block;
     color: var(--gold-accent);
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 10px;
   }

   .fac-title {
     font-family: "Cinzel", serif;
     font-size: 2.65rem;
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 14px;
     color: var(--text-white);
     letter-spacing: 0.5px;
     text-transform: uppercase;
   }

   .fac-title span {
     color: var(--gold-accent);
     display: block;
   }

   .fac-desc {
     font-size: 0.9rem;
     line-height: 1.55;
     color: var(--text-dim);
     margin-bottom: 20px;
     width: 100%;
     max-width: 380px;
   }

   .fac-tab-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 380px;
     padding: 0;
     margin: 0;
   }

   .fac-tab-item {
     position: relative;
     padding: 9px 0;
     font-size: 0.96rem;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.85);
     cursor: pointer;
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
     transition:
       color 0.25s ease,
       padding-left 0.25s ease;
     display: flex;
     align-items: center;
     gap: 10px;
     user-select: none;
   }

   .fac-tab-item:last-child {
     border-bottom: none;
   }

   .fac-tab-item .chevron {
     font-size: 1.15rem;
     color: var(--gold-accent);
     display: none;
     line-height: 1;
     font-weight: 700;
   }

   .fac-tab-item:hover:not(.active) {
     color: var(--text-white);
     padding-left: 6px;
   }

   .fac-tab-item.active {
     color: var(--gold-accent);
     font-weight: 700;
     font-size: 1.02rem;
   }

   .fac-tab-item.active .chevron {
     display: inline-block;
   }

   .fac-slider-box {
     position: relative;
     width: calc(100% + 120px);
     height: 450px;
     margin-top: -85px;
     margin-bottom: -85px;
     margin-right: -120px;
     border-radius: 44px;
     overflow: hidden;
     box-shadow:
       0 40px 85px rgba(0, 0, 0, 0.6),
       0 15px 35px var(--red-glow);
     z-index: 10;
     background: var(--primary-deep);
   }

   .fac-slider-box .swiper {
     width: 100%;
     height: 100%;
     border-radius: 44px;
   }

   .fac-slider-box .swiper-slide {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: var(--primary-deep);
   }

   .fac-slider-box .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transform: scale(1);
     transition: transform 1.4s var(--trans-fluid);
   }

   .fac-slider-box .swiper-slide-active img {
     transform: scale(1.05);
   }

   .fac-slide-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top,
         rgba(35, 2, 6, 0.95) 0%,
         rgba(35, 2, 6, 0.7) 28%,
         rgba(35, 2, 6, 0.15) 55%,
         transparent 100%);
     display: flex;
     align-items: flex-end;
     padding: 32px;
     z-index: 3;
   }

   .fac-slide-content {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }

   .fac-slide-text h3 {
     font-family: "Cinzel", serif;
     font-size: 1.45rem;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 4px;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
     letter-spacing: 0.5px;
   }

   .fac-slide-text p {
     font-size: 0.88rem;
     line-height: 1.5;
     color: var(--text-dim);
     max-width: 480px;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
     margin: 0;
   }

   .fac-btn-learn {
     color: var(--gold-accent);
     font-size: 0.92rem;
     font-weight: 800;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition:
       gap 0.25s ease,
       transform 0.25s ease;
     text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
     align-self: flex-start;
     margin-top: 4px;
   }

   .fac-btn-learn:hover {
     color: var(--text-gold-light);
     gap: 10px;
     transform: translateX(4px);
   }

   /* =========================================
   RESPONSIVE BREAKPOINTS (988px & below)
   ========================================= */
   @media screen and (max-width: 988px) {

     /* Hide the student dock cutout below 988px */
     .fac-student-dock {
       display: none !important;
     }

     /* Switch grid to single column and reset board padding */
     .fac-main-board {
       grid-template-columns: 1fr;
       padding: 40px 30px;
       border-radius: 40px;
       gap: 40px;
     }

     .fac-desc,
     .fac-tab-list {
       max-width: 100%;
     }

     /* Reset slider margins so it fits inside the board */
     .fac-slider-box {
       width: 100%;
       margin-top: 0;
       margin-bottom: 0;
       margin-right: 0;
       height: 380px;
       border-radius: 28px;
     }

     .fac-slider-box .swiper {
       border-radius: 28px;
     }
   }

   @media screen and (max-width: 576px) {
     .fac-title {
       font-size: 2.1rem;
     }

     .fac-main-board {
       padding: 30px 20px;
       border-radius: 24px;
     }

     .fac-slider-box {
       height: 320px;
       border-radius: 20px;
     }

     .fac-slider-box .swiper {
       border-radius: 20px;
     }

     .fac-slide-overlay {
       padding: 20px;
     }
   }

   /* =========================================================================
   ACHIEVEMENTS & TESTIMONIALS SECTION
   ========================================================================= */
   .organic-showcase-section {
     background-color: var(--cream-bg);
     background-image:
       linear-gradient(rgba(248, 242, 230, 0), rgba(248, 242, 230, 0)),
       var(--custom-pattern-img);
     background-repeat: repeat-y;
     background-size: 100% auto;
     background-attachment: scroll;
     color: var(--text-dark-new);
     font-family: "Plus Jakarta Sans", sans-serif;
     position: relative;
     padding: 50px 50px;
     overflow: hidden;
   }

   .section-badge-pill {
     display: inline-block;
     font-size: 0.8rem;
     font-weight: 800;
     letter-spacing: 2px;
     color: var(--primary-red);
     text-transform: uppercase;
     background: #ffffff;
     border: 1px solid rgba(200, 154, 46, 0.4);
     padding: 6px 20px;
     border-radius: 999px;
     margin-bottom: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   }

   .section-main-heading {
     font-family: "Cinzel", serif;
     font-size: 2.2rem;
     font-weight: 800;
     color: var(--primary-deep);
     margin: 0;
     letter-spacing: 1px;
   }

   .section-sub-italic {
     font-family: "Lora", serif;
     font-style: italic;
     color: #6a584d;
     font-size: 1.1rem;
     margin: 6px 0 16px 0;
   }

   .floral-divider-svg {
     width: 140px;
     height: 20px;
     margin: 0 auto 40px auto;
     display: block;
   }

   .organic-showcase-grid {
     max-width: 1440px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 50px;
     align-items: stretch;
     position: relative;
     z-index: 2;
   }

   .deck-minimal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 22px;
     flex-wrap: wrap;
     gap: 12px;
   }

   .deck-badge-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 18px;
     background: #ffffff;
     border-radius: 999px;
     color: var(--primary-dark);
     font-size: 0.82rem;
     font-weight: 800;
     letter-spacing: 1px;
     text-transform: uppercase;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(200, 154, 46, 0.3);
   }

   .deck-badge-chip i {
     color: var(--gold-accent);
   }

   .deck-nav-action-cluster {
     display: flex;
     align-items: center;
     gap: 10px;
   }

   .deck-arrow-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #ffffff;
     border: 1px solid rgba(200, 154, 46, 0.35);
     color: var(--primary-dark);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
     transition: all 0.3s ease;
   }

   .deck-arrow-btn:hover {
     background: var(--primary-red);
     color: #ffffff;
     border-color: var(--primary-red);
     transform: scale(1.08);
   }

   .btn-inline-view-all {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: #ffffff;
     color: var(--primary-dark);
     border: 1.5px solid rgba(200, 154, 46, 0.45);
     font-size: 0.76rem;
     font-weight: 800;
     letter-spacing: 0.8px;
     text-transform: uppercase;
     padding: 9px 18px;
     border-radius: 999px;
     text-decoration: none;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     white-space: nowrap;
   }

   .btn-inline-view-all i {
     color: var(--gold-accent);
     font-size: 0.72rem;
     transition: transform 0.3s ease;
   }

   .btn-inline-view-all:hover {
     background: linear-gradient(135deg,
         var(--primary-red),
         var(--primary-dark));
     color: #ffffff;
     border-color: var(--primary-red);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(139, 16, 28, 0.25);
   }

   .btn-inline-view-all:hover i {
     color: #ffffff;
     transform: translateX(3px);
   }

   .achieve-organic-deck {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-width: 0;
     position: relative;
   }

   .achieveSwiperHorizontal {
     width: 100%;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 25px 55px -10px rgba(60, 4, 9, 0.25);
   }

   .achieve-slide-canvas {
     position: relative;
     height: 440px;
     width: 100%;
     background: #150204;
     overflow: hidden;
   }

   .achieve-slide-canvas img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.8s ease;
   }

   .achieveSwiperHorizontal:hover .achieve-slide-canvas img {
     transform: scale(1.05);
   }

   .achieve-slide-scrim {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg,
         rgba(0, 0, 0, 0.1) 0%,
         rgba(30, 2, 5, 0.6) 45%,
         rgba(20, 1, 3, 0.98) 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 34px 30px;
     color: #ffffff;
   }

   .achieve-pill-category {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 5px 14px;
     background: var(--gold-accent);
     color: var(--primary-deep);
     font-size: 0.74rem;
     font-weight: 800;
     letter-spacing: 1px;
     text-transform: uppercase;
     border-radius: 999px;
     margin-bottom: 12px;
     width: fit-content;
   }

   .achieve-slide-scrim h3 {
     font-family: "Cinzel", serif;
     font-size: 1.55rem;
     font-weight: 700;
     margin: 0 0 8px 0;
     color: #ffffff;
     line-height: 1.25;
   }

   .achieve-slide-scrim p {
     font-size: 0.92rem;
     color: #ebdcdb;
     line-height: 1.55;
     margin: 0 0 14px 0;
     max-width: 90%;
   }

   .achieve-read-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--gold-accent);
     text-decoration: none;
     font-weight: 800;
     font-size: 0.84rem;
     letter-spacing: 1px;
     text-transform: uppercase;
     transition:
       gap 0.2s ease,
       color 0.2s ease;
   }

   .achieve-read-btn:hover {
     gap: 12px;
     color: var(--text-gold-light);
   }

   .testi-organic-deck {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-width: 0;
   }

   .testiSwiperVertical {
     width: 100%;
     height: 440px;
     overflow: hidden;
     padding: 4px 0;
   }

   .floating-testi-card {
     background: #ffffff;
     border-radius: 24px;
     padding: 22px 26px;
     box-shadow: 0 12px 30px rgba(80, 6, 14, 0.06);
     border: 1px solid rgba(200, 154, 46, 0.22);
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: all 0.35s ease;
     height: 100%;
     box-sizing: border-box;
   }

   .floating-testi-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 16px 36px rgba(80, 6, 14, 0.12);
     border-color: var(--gold-accent);
   }

   .floating-testi-card.wine-variant {
     background: linear-gradient(145deg, #650611 0%, #460408 100%);
     color: #ffffff;
     border-color: rgba(200, 154, 46, 0.35);
     box-shadow: 0 14px 32px rgba(60, 4, 8, 0.22);
   }

   .testi-watermark-glyph {
     position: absolute;
     top: 16px;
     right: 20px;
     font-size: 2rem;
     opacity: 0.12;
     font-family: "Playfair Display", serif;
     font-style: italic;
     pointer-events: none;
   }

   .testi-tag-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
   }

   .testi-role-tag {
     font-size: 0.74rem;
     font-weight: 800;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--primary-red);
   }

   .wine-variant .testi-role-tag {
     color: var(--gold-accent);
   }

   .testi-stars-wrap {
     display: flex;
     gap: 3px;
     color: var(--gold-accent);
     font-size: 0.78rem;
   }

   .testi-quote-body {
     font-family: "Lora", serif;
     font-style: italic;
     font-size: 0.92rem;
     line-height: 1.55;
     color: #3b2c26;
     margin-bottom: 14px;
   }

   .wine-variant .testi-quote-body {
     color: #f7eded;
   }

   .testi-profile-row {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-top: 10px;
     border-top: 1px solid rgba(0, 0, 0, 0.06);
   }

   .wine-variant .testi-profile-row {
     border-top-color: rgba(255, 255, 255, 0.12);
   }

   .testi-avatar-orb {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     object-fit: cover;
     border: 1.5px solid var(--gold-accent);
   }

   .testi-name-meta h6 {
     font-size: 0.86rem;
     font-weight: 700;
     margin: 0;
     color: var(--primary-deep);
   }

   .wine-variant .testi-name-meta h6 {
     color: #ffffff;
   }

   .testi-name-meta span {
     font-size: 0.74rem;
     color: #7a6a61;
   }

   .wine-variant .testi-name-meta span {
     color: #d1b5b8;
   }

   /* =========================================
   QUICK LINK SECTION (RED & GOLD PALETTE)
   ========================================= */
   .quick-link3 {
     background:
       linear-gradient(180deg,
         rgba(139, 16, 28, 0.92),
         rgba(101, 6, 17, 0.95)),
       url(../images/Quick-link-bg.jpg) center center / cover;
     display: flex;
     align-items: center;
     padding: 60px 0;
     position: relative;
     border-top: 3px solid var(--gold-accent);
     border-bottom: 3px solid var(--gold-accent);
   }

   .quick-link3 .quick-link-sec h5 {
     color: #fff;
     text-transform: uppercase;
     margin-bottom: 5px;
     margin-top: 20px;
   }

   .quick-link3 .quick-link-sec img {
     width: 100%;
     position: relative;
     bottom: -80px;
     filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
   }

   .quick-link-sec1 img {
     width: 60px;
     margin: 10px 0px;
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
     transition: transform 0.3s ease;
   }

   .quick-link-sec1 h2 {
     color: var(--gold-accent);
     font-family: var(--font-serif);
     font-size: 1.8rem;
     line-height: 1.35;
   }

   .quick-link-sec1 .quick-link-round {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(200, 154, 46, 0.4);
     border-radius: 16px;
     padding: 12px 6px;
     transition: all 0.3s ease;
     backdrop-filter: blur(8px);
   }

   .quick-link-sec1 .quick-link-round:hover {
     background: rgba(200, 154, 46, 0.2);
     border-color: var(--gold-accent);
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
   }

   .quick-link-sec1 .quick-link-round:hover img {
     transform: scale(1.1);
   }

   .quick-link-sec1 .quick-link-round h6 {
     color: #fff;
     margin-top: 5px;
     font-weight: 600;
     font-size: 0.82rem;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
     letter-spacing: 0.5px;
     line-height: 1.25;
   }

   .quick-link-sec1 .quick-link-round a {
     text-decoration: none;
     display: block;
   }

   .viewall-gallery1 {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(135deg, var(--gold-accent), #dfb34a);
     color: #ffffff;
     font-family: var(--font-sans);
     font-weight: 700;
     font-size: 0.88rem;
     letter-spacing: 1px;
     text-transform: uppercase;
     text-decoration: none;
     padding: 12px 28px;
     border-radius: 30px;
     border: 1.5px solid var(--gold-accent);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
     transition: all 0.3s ease;
   }

   .viewall-gallery1:hover {
     background: linear-gradient(135deg, var(--gold-accent), #dfb34a);
     color: #192a56;
     transform: translateY(-2px);
     box-shadow: 0 10px 25px var(--gold-glow);
   }

   /* =========================================
   PREMIUM 3D GALLERY SHOWCASE DESIGN
   ========================================= */
   .gallery-showcase-section {
     position: relative;
     background: radial-gradient(circle at 50% 10%,
         #9e1422 0%,
         var(--primary-red) 35%,
         var(--primary-dark) 70%,
         #1a0104 100%);
     min-height: 100vh;
     padding: 5.5rem 0;
     overflow: hidden;
     display: flex;
     align-items: center;
   }

   .ambient-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(150px);
     opacity: 0.4;
     pointer-events: none;
     z-index: 0;
     animation: pulseGlow 8s ease-in-out infinite alternate;
   }

   @keyframes pulseGlow {
     0% {
       transform: scale(1);
       opacity: 0.35;
     }

     100% {
       transform: scale(1.15);
       opacity: 0.55;
     }
   }

   .orb-left {
     top: 15%;
     left: -8%;
     width: 650px;
     height: 650px;
     background: radial-gradient(circle,
         rgba(200, 154, 46, 0.8),
         transparent 70%);
   }

   .orb-right {
     bottom: 10%;
     right: -8%;
     width: 700px;
     height: 700px;
     background: radial-gradient(circle,
         rgba(255, 42, 68, 0.75),
         transparent 70%);
   }

   .spatial-grid {
     position: absolute;
     inset: 0;
     background-image:
       radial-gradient(circle at 50% 50%,
         rgba(200, 154, 46, 0.08) 1.5px,
         transparent 1.5px),
       linear-gradient(to right,
         rgba(200, 154, 46, 0.03) 1px,
         transparent 1px),
       linear-gradient(to bottom,
         rgba(200, 154, 46, 0.03) 1px,
         transparent 1px);
     background-size:
       40px 40px,
       40px 40px,
       40px 40px;
     pointer-events: none;
     z-index: 1;
   }

   .showcase-header {
     position: relative;
     z-index: 10;
     text-align: center;
     max-width: 960px;
     margin: 0 auto 3.8rem auto;
   }

   .header-pill {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 0.8rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: var(--gold-accent);
     background: rgba(15, 2, 5, 0.75);
     padding: 9px 26px;
     border-radius: 999px;
     border: 1px solid rgba(200, 154, 46, 0.45);
     box-shadow:
       0 10px 30px rgba(0, 0, 0, 0.5),
       0 0 25px var(--gold-glow);
     margin-bottom: 1.4rem;
     backdrop-filter: blur(14px);
   }

   .showcase-header h1 {
     font-family: "Cinzel", serif;
     font-size: clamp(2.4rem, 4.8vw, 4rem);
     font-weight: 900;
     letter-spacing: 1.8px;
     color: var(--text-white);
     line-height: 1.15;
     margin-bottom: 0.9rem;
     text-shadow: 0 8px 35px rgba(0, 0, 0, 0.7);
   }

   .showcase-header h1 span {
     background: linear-gradient(135deg,
         #fbeec8 0%,
         var(--gold-accent) 50%,
         #f7d58a 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     filter: drop-shadow(0 0 20px rgba(200, 154, 46, 0.55));
   }

   .showcase-header p {
     color: var(--text-gold-light);
     font-size: 1.08rem;
     font-weight: 400;
     opacity: 0.95;
     line-height: 1.7;
     max-width: 780px;
     margin: 0 auto;
   }

   .showcase-matrix {
     position: relative;
     z-index: 10;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3.5rem;
     width: 100%;
     max-width: 1650px;
     margin: 0 auto;
   }

   .stage-column {
     position: relative;
     display: flex;
     flex-direction: column;
     padding: 24px;
     border-radius: 36px;
     backdrop-filter: blur(16px);
     transition:
       border-color 0.3s ease,
       box-shadow 0.3s ease;
   }

   .stage-column:hover {
     border-color: rgba(200, 154, 46, 0.4);
     box-shadow:
       0 35px 70px rgba(0, 0, 0, 0.55),
       0 0 30px rgba(139, 16, 28, 0.3);
   }

   .column-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.6rem;
     padding-bottom: 1.2rem;
     border-bottom: 1px solid rgba(200, 154, 46, 0.25);
   }

   .title-badge {
     display: flex;
     align-items: center;
     gap: 14px;
     font-family: "Cinzel", serif;
     font-size: 1.45rem;
     font-weight: 700;
     letter-spacing: 1.5px;
     color: var(--text-white);
   }

   .badge-glyph {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: linear-gradient(135deg,
         rgba(200, 154, 46, 0.3),
         rgba(101, 6, 17, 0.75));
     border: 1.5px solid var(--gold-accent);
     color: var(--gold-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     box-shadow: 0 0 25px var(--gold-glow);
   }

   .radar-pill {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 0.74rem;
     font-weight: 800;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--gold-accent);
     background: rgba(10, 1, 3, 0.85);
     border: 1px solid rgba(200, 154, 46, 0.4);
     padding: 7px 18px;
     border-radius: 999px;
     box-shadow:
       0 4px 20px rgba(0, 0, 0, 0.4),
       0 0 15px rgba(200, 154, 46, 0.15);
   }

   .radar-svg {
     width: 22px;
     height: 22px;
     transform: rotate(-90deg);
   }

   .radar-svg circle {
     fill: none;
     stroke-width: 3;
     stroke-linecap: round;
   }

   .radar-bg {
     stroke: rgba(200, 154, 46, 0.2);
   }

   .radar-fill {
     stroke: var(--gold-accent);
     stroke-dasharray: 44;
     stroke-dashoffset: 0;
     transition: stroke-dashoffset 0.05s linear;
   }

   .stage-viewport {
     position: relative;
     width: 100%;
     height: 520px;
     perspective: 1500px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.8rem;
   }

   .perspective-rotator {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     transform-style: preserve-3d;
   }

   .spatial-card {
     position: absolute;
     width: 380px;
     height: 480px;
     border-radius: 28px;
     overflow: hidden;
     background: #120104;
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
     cursor: pointer;
     transition:
       transform 0.85s var(--trans-fluid),
       width 0.5s ease,
       height 0.5s ease,
       opacity 0.85s ease,
       filter 0.85s ease,
       border-color 0.4s ease;
     border: 1.5px solid rgba(200, 154, 46, 0.2);
     text-decoration: none;
     color: inherit;
   }

   .spatial-card.active-card {
     width: 440px;
     height: 500px;
     border-color: var(--gold-accent);
     box-shadow:
       0 35px 90px rgba(0, 0, 0, 0.95),
       0 0 40px var(--gold-glow);
   }

   .media-container {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
   }

   .media-container img,
   .media-container iframe {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border: none;
     transition: transform 0.8s ease;
   }

   .spatial-card:hover .media-container img {
     transform: scale(1.08);
   }

   .corner-bracket {
     position: absolute;
     width: 18px;
     height: 18px;
     border: 2.5px solid var(--gold-accent);
     pointer-events: none;
     z-index: 4;
     opacity: 0;
     transition:
       opacity 0.4s ease,
       transform 0.4s ease;
   }

   .spatial-card.active-card .corner-bracket {
     opacity: 1;
   }

   .bracket-tl {
     top: 18px;
     left: 18px;
     border-right: none;
     border-bottom: none;
   }

   .bracket-br {
     bottom: 18px;
     right: 18px;
     border-left: none;
     border-top: none;
   }

   .spatial-card.active-card:hover .bracket-tl {
     transform: translate(-3px, -3px);
   }

   .spatial-card.active-card:hover .bracket-br {
     transform: translate(3px, 3px);
   }

   .media-scrim {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top,
         rgba(14, 1, 3, 0.97) 0%,
         rgba(14, 1, 3, 0.6) 42%,
         rgba(14, 1, 3, 0.1) 75%,
         transparent 100%);
     z-index: 2;
     pointer-events: none;
   }

   .story-capsule {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 1.8rem;
     z-index: 3;
     transform: translateY(6px);
     transition: transform 0.5s var(--trans-fluid);
     pointer-events: none;
   }

   .spatial-card.active-card .story-capsule {
     transform: translateY(0);
   }

   .meta-chip-row {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 0.6rem;
   }

   .category-badge {
     font-size: 0.68rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     padding: 5px 14px;
     border-radius: 999px;
     background: linear-gradient(135deg, #fbeec8, var(--gold-accent));
     color: var(--primary-dark);
     box-shadow: 0 4px 15px var(--gold-glow);
   }

   .date-badge {
     font-size: 0.75rem;
     color: var(--text-gold-light);
     font-weight: 600;
     opacity: 0.95;
   }

   .story-heading {
     font-family: "Cinzel", serif;
     font-size: 1.38rem;
     font-weight: 700;
     color: var(--text-white);
     margin-bottom: 0.35rem;
     line-height: 1.25;
     letter-spacing: 0.5px;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   }

   .story-detail {
     font-size: 0.85rem;
     color: var(--text-gold-light);
     line-height: 1.55;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     opacity: 0.88;
   }

   .cinema-chip {
     position: absolute;
     top: 18px;
     right: 18px;
     background: rgba(14, 1, 3, 0.85);
     backdrop-filter: blur(14px);
     border: 1px solid rgba(200, 154, 46, 0.5);
     color: #ffffff;
     padding: 6px 15px;
     border-radius: 999px;
     font-size: 0.72rem;
     font-weight: 800;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 8px;
     z-index: 4;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
     pointer-events: none;
   }

   .equalizer {
     display: flex;
     align-items: center;
     gap: 3px;
     height: 12px;
   }

   .equalizer span {
     width: 2px;
     height: 100%;
     background: var(--gold-accent);
     border-radius: 2px;
     animation: eqMotion 1.2s infinite ease-in-out;
   }

   .equalizer span:nth-child(2) {
     animation-delay: 0.2s;
   }

   .equalizer span:nth-child(3) {
     animation-delay: 0.4s;
   }

   @keyframes eqMotion {

     0%,
     100% {
       height: 3px;
     }

     50% {
       height: 12px;
     }
   }

   .column-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 1.4rem;
     border-top: 1px solid rgba(200, 154, 46, 0.2);
   }

   .action-cluster {
     display: flex;
     align-items: center;
     gap: 14px;
   }

   .view-all-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
     font-family: "Plus Jakarta Sans", sans-serif;
     font-size: 0.8rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--gold-accent);
     background: rgba(12, 1, 3, 0.75);
     border: 1px solid rgba(200, 154, 46, 0.4);
     padding: 11px 26px;
     border-radius: 999px;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   }

   .view-all-link:hover {
     background: linear-gradient(135deg, var(--gold-accent), #dfb34a);
     color: var(--primary-dark);
     box-shadow: 0 0 30px var(--gold-glow);
     transform: scale(1.05);
   }

   .glyph-btn {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 1px solid rgba(200, 154, 46, 0.4);
     background: rgba(12, 1, 3, 0.75);
     color: var(--gold-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 1rem;
     transition: all 0.25s ease;
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   }

   .glyph-btn:hover {
     background: var(--gold-accent);
     color: var(--primary-dark);
     transform: scale(1.12);
     box-shadow: 0 0 25px var(--gold-glow);
   }

   /* ========================================================
   TOPPERS & CELEBRATIONS SECTION
   ======================================================== */
   .toppers-section {
     background-color: var(--cream-bg);
     background-image:
       linear-gradient(rgba(248, 242, 230, 0), rgba(248, 242, 230, 0)),
       var(--custom-pattern-img);
     background-repeat: repeat-y;
     background-size: 100% auto;
     background-attachment: scroll;
     color: var(--text-dark-new);
     font-family: "Plus Jakarta Sans", sans-serif;
     position: relative;
     padding: 50px 0 0 0;
     overflow: hidden;
   }

   .topper-top-box,
   .topper-top-box1 {
     background-repeat: no-repeat;
     background-position: center top;
     min-height: 700px;
     position: relative;
     background-size: contain;
     width: 98%;
     filter: drop-shadow(0 20px 35px rgba(101, 6, 17, 0.2));
   }

   .topper-top-box {
     background-image: url("../images/home\ toppers.webp");
   }

   .topper-top-box1 {
     background-image: url("../images/mariampur\ birthday.webp");
   }

   .toppers-padding {
     padding-top: 28%;
   }

   .pt-lg-32p {
     padding-top: 42%;
   }

   .top-head {
     color: var(--text-white);
     font-family: "Cinzel", serif;
     font-size: 1.25rem;
     font-weight: 800;
     letter-spacing: 2px;
     text-transform: uppercase;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
     margin: 0;
     display: inline-block;
   }

   .topper-frame-container {
     position: relative;
     width: 175px;
     height: 175px;
     margin: 0 auto;
     border-radius: 50%;
     padding: 4px;
     background: linear-gradient(135deg,
         #fbeec8 0%,
         #c89a2e 50%,
         #8b101c 100%);
     box-shadow:
       0 10px 25px rgba(0, 0, 0, 0.4),
       0 0 20px rgba(200, 154, 46, 0.35);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     box-sizing: border-box;
     transition:
       transform 0.3s ease,
       box-shadow 0.3s ease;
   }

   .topper-frame-container:hover {
     transform: scale(1.03);
     box-shadow:
       0 14px 30px rgba(0, 0, 0, 0.5),
       0 0 28px rgba(200, 154, 46, 0.55);
   }

   .Topper-student {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50% !important;
     border: 2.5px solid #ffffff;
     display: block;
     background: #ffffff;
     margin: 0;
     box-sizing: border-box;
   }

   .stud-name {
     color: #ffffff;
     font-family: "Cinzel", serif;
     font-size: 1.12rem;
     font-weight: 800;
     letter-spacing: 0.8px;
     margin-top: 14px !important;
     margin-bottom: 6px;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
     display: block;
     text-align: center;
   }

   .stud-name::after {
     content: "";
     display: block;
     width: 40px;
     height: 2px;
     background: linear-gradient(90deg,
         transparent,
         var(--gold-accent),
         transparent);
     margin: 4px auto 0 auto;
   }

   .score-pill {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: rgba(15, 2, 5, 0.88);
     border: 1.5px solid var(--gold-accent);
     padding: 5px 18px;
     border-radius: 999px;
     color: #ffffff;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 0.5px;
     box-shadow:
       0 6px 16px rgba(0, 0, 0, 0.5),
       0 0 15px var(--gold-glow);
     backdrop-filter: blur(10px);
     margin-top: 4px;
     white-space: nowrap;
   }

   .score-pill .score-highlight {
     background: linear-gradient(135deg, #fbeec8, #c89a2e);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 800;
     font-size: 0.95rem;
     margin-left: 4px;
   }

   .wish-pill {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: rgba(101, 6, 17, 0.85);
     border: 1px solid rgba(200, 154, 46, 0.6);
     padding: 6px 16px;
     border-radius: 999px;
     color: var(--text-gold-light);
     font-size: 0.78rem;
     font-weight: 600;
     line-height: 1.2;
     letter-spacing: 0.3px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(8px);
     margin-top: 4px;
     white-space: nowrap;
   }

   .continue-link {
     color: var(--gold-accent);
     font-weight: 700;
     font-size: 0.88rem;
     letter-spacing: 1px;
     text-transform: uppercase;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 4px 12px;
     border-radius: 20px;
     background: rgba(0, 0, 0, 0.25);
   }

   .continue-link:hover {
     color: #ffffff;
     background: var(--primary-red);
     transform: translateX(4px);
   }

   .carousel-controls .custom-prev2,
   .carousel-controls .custom-next2 {
     background: linear-gradient(135deg, var(--gold-accent), #8b101c);
     color: #ffffff;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
     margin: 0 5px;
     transition: all 0.3s ease-in-out;
     border: 1px solid rgba(255, 255, 255, 0.4);
     font-size: 12px;
   }

   .carousel-controls .custom-prev2:hover,
   .carousel-controls .custom-next2:hover {
     background: #ffffff;
     color: var(--primary-dark);
     transform: scale(1.12);
     box-shadow: 0 0 20px var(--gold-glow);
   }

   /* ==========================================
   MATCHING ROYAL GARNET & GOLD FOOTER THEME
   (Harmonized with Navbar & Sunset Background)
   ========================================== */
   .ftr-site-footer {
     position: relative;
     background-color: var(--cream-bg);
     color: var(--primary-deep);
     padding-top: 100px;
     overflow: hidden;
   }

   /* Background Image Container */
   .ftr-bg-container {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
   }

   .ftr-bg-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }

   /* Top Wave Transition */
   .ftr-wave {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     line-height: 0;
     z-index: 3;
   }

   .ftr-wave svg {
     display: block;
     width: 100%;
     height: 60px;
   }

   .ftr-wave .shape-fill {
     fill: #f6f0db;
   }

   /* Main Content Container */
   .ftr-main-container {
     position: relative;
     z-index: 5;
   }

   /* Logo Box */
   .ftr-logo-box {
     background: var(--text-white);
     width: fit-content;
     padding: 12px 18px;
     border-radius: var(--achtest-radius-lg);
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--gold-accent);
     box-shadow: 0 10px 25px rgba(120, 16, 27, 0.15);
   }

   .ftr-logo-box img {
     max-width: 90px;
     height: auto;
   }

   /* School Name & Brand Typography */
   .ftr-brand h2 {
     font-family: var(--font-serif);
     font-size: 1.55rem;
     font-weight: 800;
     color: var(--primary-red);
     margin-bottom: 15px;
     line-height: 1.25;
     letter-spacing: 0.5px;
   }

   .ftr-brand h2 span {
     color: var(--primary-dark);
     font-size: 1.25rem;
     font-weight: 700;
   }

   .ftr-brand p {
     font-family: var(--font-sans);
     font-size: 0.9rem;
     color: var(--primary-deep);
     font-weight: 600;
     line-height: 1.7;
   }

   /* Section Headings */
   .ftr-heading {
     font-family: var(--font-sans);
     font-size: 1.15rem;
     font-weight: 800;
     color: var(--primary-dark);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 25px;
     position: relative;
     display: inline-block;
   }

   .ftr-heading::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 45px;
     height: 3px;
     background: var(--primary-red);
     border-radius: 2px;
   }

   /* Quick Links */
   .ftr-links {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .ftr-links li {
     margin-bottom: 12px;
   }

   .ftr-links a {
     font-family: var(--font-sans);
     color: var(--primary-deep);
     text-decoration: none;
     font-size: 0.92rem;
     font-weight: 700;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
   }

   .ftr-links a i {
     font-size: 0.8rem;
     margin-right: 10px;
     color: var(--primary-red);
     transition: transform 0.3s ease;
   }

   .ftr-links a:hover {
     color: var(--primary-red);
     transform: translateX(6px);
   }

   .ftr-links a:hover i {
     transform: translateX(4px);
     color: var(--primary-dark);
   }

   /* Contact Info Items */
   .ftr-c-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 18px;
   }

   .ftr-c-item i {
     background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
     color: var(--text-gold-light);
     width: 38px;
     height: 38px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 14px;
     flex-shrink: 0;
     box-shadow: 0 4px 12px var(--red-glow);
     font-size: 0.95rem;
     border: 1px solid var(--gold-accent);
   }

   .ftr-c-item p {
     margin: 0;
     font-family: var(--font-sans);
     font-size: 0.9rem;
     font-weight: 700;
     line-height: 1.5;
     color: var(--primary-deep);
   }

   /* Social Media Icons */
   .ftr-social-row {
     display: flex;
     gap: 10px;
     margin-top: 15px;
   }

   .ftr-social-row a {
     color: var(--text-white);
     background: linear-gradient(135deg, var(--primary-red), var(--primary-dark));
     border: 1px solid var(--gold-accent);
     width: 38px;
     height: 38px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: all 0.3s ease;
     text-decoration: none;
     box-shadow: 0 4px 12px var(--red-glow);
   }

   .ftr-social-row a:hover {
     background: var(--gold-accent);
     color: var(--primary-dark);
     border-color: var(--primary-dark);
     transform: translateY(-4px);
     box-shadow: 0 6px 15px var(--gold-glow);
   }

   /* Map Frame */
   .ftr-map-container {
     border-radius: 14px;
     overflow: hidden;
     height: 130px;
     margin-bottom: 18px;
     border: 2.5px solid var(--text-white);
     background: var(--text-white);
     box-shadow: 0 8px 25px rgba(101, 6, 17, 0.2);
   }

   .ftr-map-container iframe {
     width: 100%;
     height: 100%;
     border: 0;
   }

   /* App Store Buttons */
   .ftr-store-btns {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
   }

   .ftr-store-btn {
     flex: 1;
     min-width: 120px;
     background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-deep) 100%);
     padding: 8px 12px;
     border-radius: 30px;
     display: flex;
     align-items: center;
     text-decoration: none;
     color: var(--text-white);
     transition: all 0.3s ease;
     border: 1.5px solid var(--gold-accent);
     box-shadow: 0 4px 14px var(--red-glow);
   }

   .ftr-store-btn:hover {
     background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-deep) 100%);
     color: var(--text-gold-light);
     transform: translateY(-3px);
     box-shadow: 0 8px 20px var(--gold-glow);
   }

   .ftr-store-btn i {
     font-size: 1.2rem;
     margin-right: 10px;
     color: var(--gold-accent);
     transition: color 0.3s ease;
   }

   .ftr-store-btn:hover i {
     color: var(--text-gold-light);
   }

   .ftr-store-btn span {
     display: block;
     font-size: 0.62rem;
     opacity: 0.9;
     line-height: 1;
     text-transform: uppercase;
   }

   .ftr-store-btn b {
     font-size: 0.8rem;
   }

   /* Bottom Frame & School Image Bar */
   .ftr-school-frame {
     position: relative;
     margin-top: 50px;
     border-radius: 20px 20px 0 0;
     overflow: hidden;
     line-height: 0;
     z-index: 5;
   }

   .ftr-school-frame img {
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-top: -80px;
   }

   .ftr-bottom-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: var(--primary-red);
     backdrop-filter: blur(8px);
     padding: 16px 0;
     text-align: center;
     font-family: var(--font-sans);
     font-size: 0.85rem;
     line-height: 1.6;
     border-top: 2px solid var(--gold-accent);
     color: var(--text-white);
   }

   .ftr-bottom-bar p {
     margin: 0;
   }

   .ftr-bottom-bar span {
     color: var(--gold-accent);
     font-weight: 700;
   }

   /* Floating Back to Top Button */
   .ftr-back-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 45px;
     height: 45px;
     background: var(--primary-red);
     color: var(--text-gold-light);
     border: 2px solid var(--gold-accent);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     cursor: pointer;
     z-index: 99;
     transition: all 0.3s ease;
     box-shadow: 0 6px 20px var(--red-glow);
     text-decoration: none;
   }

   .ftr-back-to-top:hover {
     transform: translateY(-5px);
     background: var(--gold-accent);
     color: var(--primary-deep);
     border-color: var(--primary-dark);
     box-shadow: 0 8px 25px var(--gold-glow);
   }

   /* Mobile Responsive */
   @media (max-width: 575px) {
     .ftr-school-frame img {
       margin-bottom: 80px;
       margin-top: 0 !important;
     }
   }

   /* ========================================================
   RESPONSIVE MEDIA QUERIES (DESKTOP TO MOBILE)
   ======================================================== */

   @media (min-width: 1200px) and (max-width: 1400px) {
     .topper-frame-container {
       width: 135px !important;
       height: 135px !important;
     }
   }

   @media (min-width: 1200px) and (max-width: 1399px) {
     .NoticeBoard {
       height: 850px;
       background-size: contain;
       padding: 200px 240px 0 220px;
     }
   }

   @media (max-width: 1280px) {
     .showcase-matrix {
       grid-template-columns: 1fr;
       gap: 4.5rem;
       max-width: 820px;
     }

     .spatial-card.active-card {
       width: 410px;
     }
   }

   @media (min-width: 992px) and (max-width: 1200px) {
     .inactive-toggle-card {
       cursor: pointer;
       transition: all 0.3s ease;
       border-radius: 100px;
       position: absolute;
       bottom: 30px;
       right: 80px;
     }
   }

   @media (min-width: 992px) and (max-width: 1199px) {
     .NoticeBoard {
       height: 850px;
       background-size: 100% 100%;
       padding: 180px 240px 240px 240px;
     }

     .toppers-padding {
       padding-top: 25%;
     }
   }

   @media (max-width: 1180px) {
     .fac-section-wrapper {
       padding: 80px 30px;
     }

     .fac-main-board {
       padding: 50px 30px 50px 140px;
       gap: 20px;
     }

     .fac-title {
       font-size: 2.25rem;
     }

     .fac-slider-box {
       width: 100%;
       margin: 0;
       height: 400px;
     }
   }

   @media (max-width: 1100px) {

     .info-block,
     .divider-thick,
     .divider-thin {
       display: none;
     }

     .nav-links>.dropdown>a.drop-btn {
       padding: 10px 8px;
       font-size: 11px;
     }

     .fs-mega-grid {
       grid-template-columns: repeat(4, 1fr);
       gap: 40px 20px;
     }

     .hero-section .slide-title {
       font-size: 3.5rem;
     }
   }

   @media (max-width: 1024px) {
     .achtest-grid {
       grid-template-columns: 1fr;
     }
   }

   @media screen and (max-width: 991px) {
     .nav-thin-bar {
       display: none;
     }

     .navbar-container {
       filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
     }

     .nav-main-bar {
       max-width: 100%;
       margin-top: 0;
       height: 70px;
       padding: 0 16px;
       background: var(--primary-red);
       border-bottom: 2px solid var(--gold-accent);
     }

     .nav-bg,
     .nav-main-bar::before,
     .nav-main-bar::after {
       display: none !important;
     }

     .brand-section {
       left: 0;
       gap: 10px;
       padding-left: 0;
     }

     .brand-crest {
       width: 50px;
       height: 50px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     }

     .school-title .light-text,
     .school-title .bold-text {
       color: #ffffff;
       font-size: 13px;
       line-height: 1.2;
     }

     .nav-links {
       display: none;
     }

     .action-section {
       gap: 12px;
     }

     .dashed-icon {
       width: 20px;
       height: 20px;
     }

     .hamburger-btn span {
       font-size: 8px;
     }

     .fac-main-board {
       grid-template-columns: 1fr;
       padding: 40px 24px;
       border-radius: 40px;
       gap: 30px;
     }

     .fac-slider-box {
       width: 100%;
       margin: 0;
       height: 320px;
       border-radius: 24px;
     }

     .fac-slider-box .swiper {
       border-radius: 24px;
     }

     .fac-student-dock {
       display: none;
     }

     .organic-showcase-section {
       padding: 40px 20px;
     }

     .organic-showcase-grid {
       grid-template-columns: 1fr;
       gap: 40px;
     }

     .deck-minimal-header {
       flex-direction: row;
       justify-content: space-between;
       gap: 10px;
     }

     .achieve-slide-canvas {
       height: 380px;
     }

     .testiSwiperVertical {
       height: 340px;
     }

     .fs-close-btn {
       top: 130px;
       right: 20px;
       width: 35px;
       height: 35px;
       font-size: 15px;
     }

     .fs-top-left-actions {
       top: 130px;
       left: 20px;
       gap: 10px;
     }

     .fs-top-btn {
       height: 35px;
     }

     .fs-top-btn:not(.text-btn) {
       width: 35px;
       font-size: 14px;
     }

     .fs-top-btn.text-btn {
       padding: 0 12px;
       font-size: 11px;
     }

     .fs-content-scroll {
       padding-top: 190px;
     }

     .fs-mega-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     .contact-info-row {
       flex-direction: column;
       gap: 10px;
       align-items: center;
       text-align: center;
     }

     .active-profile-frame {
       margin-bottom: 110px;
     }

     .inactive-toggle-card {
       bottom: 57%;
       right: 60px;
     }
   }

   @media (max-width: 992px) {
     .toppers-padding {
       padding-top: 0%;
       display: flex !important;
       flex-wrap: wrap;
       flex-direction: row !important;
     }

     .topper-top-box,
     .topper-top-box1 {
       background-position: center;
       min-height: 824px;
       background-size: 770px;
       margin: 0;
       padding-top: 60%;
     }

     .pt-lg-32p {
       padding-top: 35px !important;
     }
   }

   @media (min-width: 768px) and (max-width: 991px) {
     .NoticeBoard {
       height: 850px;
       background-size: 100% 100%;
       padding: 180px 140px 140px 140px;
     }

     .inactive-toggle-card {
       bottom: 20%;
       right: -10px;
     }
   }

   @media (min-width: 767px) and (max-width: 992px) {

     .topper-top-box,
     .topper-top-box1 {
       padding-top: 27%;
     }
   }


  

   @media (max-width: 900px) {
     .fac-section-wrapper {
       padding: 40px 16px;
     }

     .fac-student-dock {
       display: none;
     }

     .fac-main-board {
       grid-template-columns: 1fr;
       padding: 40px 24px;
       border-radius: 36px;
     }

     .fac-slider-box {
       width: 100%;
       margin: 0;
       height: 320px;
     }

     .fac-desc,
     .fac-tab-list {
       max-width: 100%;
     }
   }

   @media (max-width: 768px) {
     .hero-section .slide-title {
       font-size: 2.5rem;
     }

     .hero-section .slide-desc {
       font-size: 14px;
     }

     .hero-section .slide-content {
       left: 5%;
       right: 5%;
       text-align: center;
     }

     .hero-section .slide-subtitle {
       justify-content: center;
     }

     .hero-section .slide-subtitle::before {
       display: none;
     }

     .slider-controls {
       left: 50%;
       transform: translateX(-50%);
       bottom: 30px;
     }

     .orb-text {
       display: none;
     }

     .widget-360-container {
       bottom: 120px;
       right: 5%;
     }

     .orb {
       width: 60px;
       height: 60px;
     }

     .orb-inner i {
       font-size: 18px;
     }

     .message-title-wrapper {
       padding: 10px 35px !important;
     }

     .message-title-content h1 {
       font-size: 1.6rem !important;
     }

     .message-title-content p {
       font-size: 0.7rem !important;
     }

     .achtest-section {
       padding: 60px 14px;
     }

     .achtest-achieve-card,
     .achtest-testi-card {
       padding: 22px 18px;
     }

     .achtest-slide-media {
       height: 320px;
     }
   }

   @media (max-width: 767px) {
     .fac-slide-text p {
       display: none;
     }

     .fac-slide-overlay {
       padding: 20px;
     }

     .fac-slide-text h3 {
       font-size: 1.2rem;
     }

     .fac-btn-learn {
       font-size: 0.82rem;
     }

     .fac-title {
       font-size: 2rem;
     }
   }

   @media (min-width: 574px) and (max-width: 767px) {
     .NoticeBoard {
       height: 850px;
       background-size: 100% 100%;
       padding: 180px 80px 80px 80px;
     }
   }

   @media (min-width: 540px) and (max-width: 767px) {
     .inactive-toggle-card {
       bottom: 45%;
       right: 250px;
     }
   }

   @media (max-width: 600px) {
     .gallery-showcase-section {
       padding: 3.5rem 0;
     }

     .stage-column {
       padding: 16px;
       border-radius: 26px;
     }

     .spatial-card {
       width: 280px;
       height: 390px;
     }

     .spatial-card.active-card {
       width: 320px;
       height: 420px;
     }

     .stage-viewport {
       height: 440px;
     }

     .story-capsule {
       padding: 1.25rem;
     }

     .story-heading {
       font-size: 1.15rem;
     }
   }

   @media (max-width: 576px) {
     .News-card-sec {
       width: 80%;
       margin: 50px auto 0px auto;
     }

     .section-main-heading {
       font-size: 1.6rem;
     }

     .section-sub-italic {
       font-size: 0.95rem;
     }

     .achieve-slide-canvas {
       height: 340px;
     }

     .achieve-slide-scrim {
       padding: 24px 18px;
     }

     .achieve-slide-scrim h3 {
       font-size: 1.25rem;
     }

     .achieve-slide-scrim p {
       font-size: 0.85rem;
       max-width: 100%;
     }

     .floating-testi-card {
       padding: 18px 20px;
     }

     .topper-top-box,
     .topper-top-box1 {
       min-height: 900px;
       width: 100%;
       margin-top: 10px !important;
     }

     .toppers-padding {
       padding-top: 5%;
     }

     .topper-top-box .row>div[class*="col-5"],
     .topper-top-box1 .row>div[class*="col-5"] {
       width: 48% !important;
       padding-left: 4px !important;
       padding-right: 4px !important;
     }

     .topper-frame-container {
       width: 155px;
       height: 155px;
       padding: 3px;
     }

     .top-head {
       font-size: 1.05rem;
       letter-spacing: 1px;
       margin-bottom: 4px;
     }

     .stud-name {
       font-size: 0.95rem;
       margin-top: 10px !important;
       margin-bottom: 4px;
     }

     .stud-name::after {
       width: 32px;
       height: 2px;
       margin-top: 3px;
     }

     .score-pill {
       padding: 4px 12px;
       font-size: 0.78rem;
       letter-spacing: 0.3px;
     }

     .score-pill .score-highlight {
       font-size: 0.86rem;
       margin-left: 3px;
     }

     .wish-pill {
       padding: 4px 10px;
       font-size: 0.72rem;
       white-space: normal;
     }

     .carousel-controls .custom-prev2,
     .carousel-controls .custom-next2 {
       width: 32px;
       height: 32px;
       font-size: 11px;
       margin: 0 4px;
     }

     .continue-link {
       font-size: 0.8rem;
       padding: 3px 10px;
     }
   }

   @media (max-width: 575px) {
     .ftr-school-frame img {
       margin-bottom: 80px;
       margin-top: 0 !important;
     }
   }

   @media (max-width: 574px) {
     .NoticeBoard {
       width: 100%;
       height: auto;
       background-position: center;
       padding: 0px 0px 10px 0px;
       background-size: 290%;
       background: none;
     }
   }

   @media (max-width: 500px) {
     .fs-mega-grid {
       grid-template-columns: 1fr;
       gap: 30px;
     }
   }

   @media (min-width: 474px) and (max-width: 539px) {
     .inactive-toggle-card {
       bottom: 48%;
       right: 200px;
     }
   }

   @media (min-width: 440px) and (max-width: 473px) {
     .inactive-toggle-card {
       bottom: 50%;
       right: 150px;
     }
   }

   @media (min-width: 422px) and (max-width: 439px) {
     .inactive-toggle-card {
       bottom: 53%;
       right: 100px;
     }
   }

   @media (min-width: 421px) and (max-width: 421px) {
     .inactive-toggle-card {
       bottom: 54%;
       right: 80px;
     }
   }

   @media (min-width: 406px) and (max-width: 767px) {

     .topper-top-box,
     .topper-top-box1 {
       background-position: center;
       min-height: 900px;
       background-size: 750px;
       margin: 0;
       padding-top: 45%;
     }
   }

   @media (min-width: 381px) and (max-width: 400px) {
     .inactive-toggle-card {
       bottom: 57%;
       right: 80px;
     }
   }

   @media (min-width: 360px) and (max-width: 380px) {
     .inactive-toggle-card {
       bottom: 59%;
       right: 80px;
     }
   }



   /* ==========================================================================
   BANNER SECTION
   ========================================================================== */
   .universal-banner {
     position: relative;
     height: 480px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background: linear-gradient(rgba(139, 16, 28, 0.79), rgba(101, 6, 17, 0.94)), url('../images/schoolab.webp');
     background-size: cover;
     background-position: center;
   }

   .pg-breadcrumb-area {
     position: absolute;
     top: 3rem;
     z-index: 20;
   }

   .pg-glass-pill {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.25);
     padding: 0.5rem 1.5rem;
     border-radius: 9999px;
     color: var(--white);
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.3em;
     display: flex;
     align-items: center;
     gap: 0.75rem;
   }

   .pg-link:hover {
     color: var(--gold-accent);
     transition: 0.3s;
   }

   .pg-sep {
     opacity: 0.4;
   }

   .pg-active {
     color: var(--gold-accent);
     font-weight: 700;
   }

   .banner-content {
     position: relative;
     z-index: 10;
     text-align: center;
     padding: 0 1.5rem;
     margin-top: 3rem;
   }

   .est-tag {
     display: inline-block;
     background-color: var(--gold-glow);
     color: var(--gold-accent);
     font-weight: 700;
     letter-spacing: 0.2em;
     font-size: 0.75rem;
     padding: 6px 16px;
     border-radius: 50px;
     margin-bottom: 1rem;
     text-transform: uppercase;
     border: 1px solid var(--gold-accent);
   }

   .main-title {
     color: var(--white);
     margin-bottom: 1.5rem;
     line-height: 1.2;
     text-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
   }

   .italic-gold {
     font-style: italic;
     font-weight: 300;
     color: var(--gold-accent);
   }

   .banner-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     margin-top: 2rem;
   }

   .decorative-line {
     height: 1px;
     width: 3rem;
     background-color: var(--gold-accent);
   }

   .location-tag {
     color: rgba(255, 255, 255, 0.9);
     text-transform: uppercase;
     letter-spacing: 0.2em;
     font-size: 0.65rem;
     font-weight: 300;
   }

   /* Shape Divider */
   .shape-divider {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     line-height: 0;
   }

   .shape-divider svg {
     width: calc(100% + 1.3px);
     height: 80px;
   }

   .shape-fill {
     fill: var(--pg-body-bg);
   }

   /* ==========================================================================
   PAGE CONTENT & UTILITIES
   ========================================================================== */
   .about-content {
     padding: 60px 0;
   }

   .pg-heading,
   .page-heading,
   .main-heading {
     color: var(--primary-red);
     font-weight: 700;
     font-size: 2.2rem;
     margin-bottom: 20px;
     line-height: 1.2;
   }

   .herobannertitle {
     color: var(--white) !important;
     font-family: var(--font-sans);
     font-weight: 900;
     font-size: 4rem;
   }

   .pg-text,
   .paragraph,
   .content-p {
     color: var(--text-body);
     line-height: 1.8;
     font-size: 1rem;
     margin-bottom: 20px;
   }

   .pg-quote,
   .about-quote {
     color: var(--primary-red);
     font-weight: 700;
     letter-spacing: 0.5px;
     border-left: 4px solid var(--gold-accent);
     padding-left: 12px;
     margin-bottom: 20px;
   }

   .highlight-text {
     color: var(--primary-red);
     font-weight: 700;
   }

   .yellow-divider {
     width: 180px;
     height: 4px;
     background: var(--gold-accent);
     margin: 15px auto;
     border-radius: 2px;
   }

   /* Custom Cards */
   .custom-card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .custom-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px var(--red-glow);
   }

   .card-img-top {
     height: 220px;
     object-fit: cover;
   }

   /* List Formatting */
   .list-styling-arrow {
     padding: 0 0 0 1%;
     margin: 20px 0;
   }

   .list-styling-arrow li {
     position: relative;
     line-height: 28px;
     padding: 0 0 0 36px;
     list-style: none;
     margin: 10px 0;
     color: var(--text-body);
   }

   .list-styling-arrow li::before {
     content: "\f00c";
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     position: absolute;
     left: 0;
     top: 14px;
     transform: translateY(-50%);
     width: 22px;
     height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary-red);
     color: var(--gold-accent);
     font-size: 11px;
     border-radius: 50%;
   }

   ol li {
     line-height: 28px;
     padding: 0 !important;
     list-style-type: decimal !important;
     background: none !important;
     margin: 8px 0;
     color: var(--text-body);
   }

   /* ==========================================================================
   DATA TABLES
   ========================================================================== */
   .table-responsive {
     border-radius: 0;
     overflow: hidden;
     box-shadow: none;
     margin-bottom: 25px;
     border: none !important;
   }

   .table {
     width: 100%;
     margin-bottom: 0;
     border-collapse: collapse !important;
     --bs-table-border-color: var(--primary-red) !important;
   }

   /* Header Cells */
   .table thead th {
     background: var(--primary-red) !important;
     color: #ffffff !important;
     text-align: center;
     vertical-align: middle;
     font-weight: 700;
     padding: 14px !important;
     border: none !important;
     border-bottom: 2px solid var(--primary-red) !important;
   }

   /* Vertical separator between header columns */
   .table thead th:not(:last-child) {
     border-right: 2px solid rgba(255, 255, 255, 0.4) !important;
   }

   /* Body Cells - 2px Red Lines on All Four Sides (Left, Right, Top, Bottom) */
   .table tbody td {
     font-size: 15px;
     background: transparent !important;
     color: var(--text-body, #333333) !important;
     padding: 14px 12px !important;
     vertical-align: middle;
     border: 2px solid var(--primary-red) !important;
   }

   /* Link Styling */
   .table tbody td a {
     color: var(--primary-red);
     font-weight: 700;
     text-decoration: underline;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     transition: color 0.2s ease;
   }

   .table tbody td a:hover {
     color: var(--gold-accent);
   }

   /* ==========================================================================
   ACCORDION STYLING
   ========================================================================== */
   .accordion-item {
     border: none;
     background: transparent;
     margin-bottom: 12px;
   }

   .accordion-button {
     background: var(--primary-red);
     color: var(--white);
     border-radius: 8px !important;
     padding: 16px 20px;
     border: 1px solid var(--primary-dark);
     box-shadow: none;
     transition: all 0.3s ease;
     font-weight: 600;
   }

   .accordion-button::after {
     display: none;
   }

   .arrow-icon {
     transition: transform 0.3s ease;
     font-size: 14px;
     color: var(--gold-accent);
   }

   .accordion-button:not(.collapsed) .arrow-icon {
     transform: rotate(180deg);
   }

   .accordion-button:not(.collapsed) {
     border-radius: 8px 8px 0 0 !important;
     background: var(--primary-dark);
     color: var(--gold-accent);
     box-shadow: none;
   }

   .accordion-body {
     background: var(--card-bg);
     color: var(--text-body);
     border: 1px solid var(--border-color);
     border-top: none;
     border-radius: 0 0 8px 8px;
     padding: 20px;
   }

   .accordion-collapse {
     border: none;
   }

   .accordion-button:focus {
     box-shadow: none;
   }

   /* ==========================================================================
   SECTIONS & BADGES
   ========================================================================== */
   .page-section {
     padding-top: 50px;
     padding-bottom: 100px;
     background: var(--pg-body-bg);
   }

   .image-wrapper {
     position: relative;
     border-radius: 16px;
   }

   .school-img {
     width: 100%;
     border-radius: 16px;
     display: block;
     box-shadow: 0 15px 35px var(--red-glow);
     border: 3px solid var(--white);
   }

   .legacy-badge {
     position: absolute;
     bottom: -25px;
     left: 20px;
     right: 20px;
     background-color: var(--primary-red);
     color: var(--white);
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     border-bottom: 4px solid var(--gold-accent);
   }

   .legacy-badge h6 {
     color: var(--gold-accent);
     text-transform: uppercase;
     font-weight: 700;
     margin-bottom: 8px;
     font-size: 0.85rem;
     letter-spacing: 1.5px;
     display: flex;
     align-items: center;
     gap: 10px;
   }

   .legacy-badge p {
     margin: 0;
     font-size: 0.85rem;
     opacity: 0.95;
     font-weight: 300;
   }

   /* Mission & Vision Section */
   .motto-section {
     padding-top: 25px;
     border-top: 2px solid var(--border-color);
   }

   .info-item2 {
     display: flex;
     gap: 15px;
     margin-bottom: 25px;
   }

   .icon-box {
     width: 48px;
     height: 48px;
     background: var(--primary-red);
     color: var(--gold-accent);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     flex-shrink: 0;
   }

   .info-title {
     font-weight: 700;
     color: var(--primary-red);
     margin-bottom: 5px;
     font-size: 1.1rem;
   }

   .info-desc {
     font-size: 0.92rem;
     margin: 0;
     color: var(--text-body);
   }

   .motto-banner {
     background: var(--gold-accent);
     color: var(--primary-deep);
     padding: 10px 20px;
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
     font-weight: 700;
     margin-bottom: 30px;
   }