:root {
              --red: #b30d12;
              --deep: #8a0910;
              --gold: #f2b632;
              --cream: #faf1d2;
              --ink: #1a1a1a;
              --page: #f4f1ea;
              --muted: #555;
              box-sizing: border-box;

          }


          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box
          }

          body {
              font-family: 'Montserrat', system-ui, sans-serif;
              background: linear-gradient(135deg, #FEF9EC8C 0%, #F8EEDBBF 100%);
              background-image: linear-gradient(135deg, #FEF9ECCC 0%, #F8EEDBC9 100%), url('../images/bgbody.png');
              background-repeat: repeat-y;
              background-size: 100% auto;
              background-attachment: scroll;
              overflow-x: hidden;
              height: 100%;
              width: 100%;

          }

          /* ========================================================
            FORNAVBAR CSS NAMESPACE
            ======================================================== */
          .fornavbar-wrap {
              position: fixed;
              left: 0;
              right: 0;
              top: 30px;
              z-index: 1000;
              display: flex;
              justify-content: center;
              pointer-events: none;
              transition: top .3s
          }

          .fornavbar-wrap.stuck {
              position: fixed;
              top: calc(30px + env(safe-area-inset-top, 0px))
          }

          .fornavbar-main {
              pointer-events: auto;
              position: relative;
              display: grid;
              grid-template-columns: 1fr 180px 1fr;
              align-items: center;
              height: 68px;
              width: 100%;
              max-width: 1150px;
              margin: 0 auto;
              background: linear-gradient(180deg, #c6151b, var(--deep));
              border-radius: 24px;
              box-shadow: 0 14px 32px rgba(45, 0, 5, .4);
              outline: 1px solid rgba(242, 182, 50, .6);
              outline-offset: -5px
          }

          .fornavbar-group {
              display: flex;
              list-style: none !important;
              align-items: center;
              margin: 0 !important;
              padding: 0 !important;
          }

          .fornavbar-group.left {
              justify-content: flex-end;
              padding-right: 18px;
          }

          .fornavbar-group.right {
              justify-content: flex-start;
              padding-left: 18px;
          }

          .fornavbar-item {
              position: relative
          }

          .fornavbar-link {
              position: relative;
              display: flex;
              align-items: center;
              gap: 6px;
              white-space: nowrap;
              padding: 10px 12px;
              color: #fdf3d6;
              text-decoration: none;
              font-size: .80rem;
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: .8px;
              transition: color .25s
          }

          .fornavbar-link::after {
              content: "";
              position: absolute;
              left: 10px;
              right: 10px;
              bottom: 2px;
              height: 2px;
              background: var(--gold);
              transform: scaleX(0);
              transition: transform .3s
          }

          .fornavbar-link:hover,
          .fornavbar-link:focus-visible,
          .fornavbar-item:focus-within>.fornavbar-link {
              color: #ffd45e;
              outline: none
          }

          .fornavbar-link:hover::after,
          .fornavbar-link:focus-visible::after,
          .fornavbar-item:focus-within>.fornavbar-link::after,
          .fornavbar-link.active::after {
              transform: scaleX(1)
          }

          .fornavbar-caret {
              width: 6px;
              height: 6px;
              border-right: 2px solid currentColor;
              border-bottom: 2px solid currentColor;
              transform: rotate(45deg) translateY(-2px);
              transition: .25s
          }

          .fornavbar-item:hover .fornavbar-caret,
          .fornavbar-item:focus-within .fornavbar-caret {
              transform: rotate(225deg)
          }

          .fornavbar-dropdown {
              position: absolute;
              top: calc(100% + 16px);
              left: 50%;
              min-width: 240px;
              background: #fff8e3;
              list-style: none !important;
              padding: 10px;
              border-radius: 16px;
              box-shadow: 0 20px 44px rgba(45, 0, 5, .35);
              opacity: 0;
              visibility: hidden;
              transform: translate(-50%, 8px);
              transition: .25s;
              z-index: 200;
              margin: 0 !important;
          }

          .fornavbar-dropdown::before {
              content: "";
              position: absolute;
              left: 50%;
              top: -7px;
              width: 14px;
              height: 14px;
              background: #fff8e3;
              transform: translateX(-50%) rotate(45deg);
              border-radius: 3px
          }

          .fornavbar-item:hover .fornavbar-dropdown,
          .fornavbar-item:focus-within .fornavbar-dropdown {
              opacity: 1;
              visibility: visible;
              transform: translate(-50%, 0)
          }

          .fornavbar-dropdown a {
              display: block;
              padding: 10px 14px;
              border-radius: 10px;
              color: #4a0a0e;
              text-decoration: none;
              font-size: .88rem;
              font-weight: 600;
              transition: .2s
          }

          .fornavbar-dropdown a:hover,
          .fornavbar-dropdown a:focus-visible {
              background: #f7dfa3;
              color: var(--deep);
              padding-left: 18px;
              outline: none
          }

          .fornavbar-crest {
              position: absolute;
              left: 50%;
              top: 50%;
              width: 100px;
              height: 100px;
              padding: 4px;
              border-radius: 50%;
              background: var(--cream);
              transform: translate(-50%, -50%);
              box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px #a50d13, 0 0 0 9px var(--gold), 0 14px 24px rgba(40, 0, 5, .5);
              transition: transform .4s;
              z-index: 2000;
              display: flex;
              align-items: center;
              justify-content: center
          }

          .fornavbar-crest:hover {
              transform: translate(-50%, -50%) scale(1.05)
          }

          .fornavbar-crest img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              display: block
          }

          .fornavbar-burger {
              display: none
          }

          .fornavbar-mobile-drawer {
              display: none;
          }

          /* ========================================================
            HEROSLD & HERO CSS NAMESPACE
            ======================================================== */
          .hero {
              position: relative;
              height: 100vh;
              min-height: 700px;
              overflow: hidden;
              background: #080203;
              color: #fff;
          }

          .herosld {
              position: absolute;
              inset: 0;
              opacity: 0;
              visibility: hidden;
              transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.5s;
          }

          .herosld.on {
              opacity: 1;
              visibility: visible;
              z-index: 2;
          }

          .herosld-bg {
              position: absolute;
              inset: -4%;
              will-change: transform;
          }

          .herosld.on .herosld-bg {
              animation: zoomEffect 12s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          }

          @keyframes zoomEffect {
              0% {
                  transform: scale(1);
                  filter: brightness(0.9);
              }

              100% {
                  transform: scale(1.08);
                  filter: brightness(1.04);
              }
          }

          .herosld::after {
              content: "";
              position: absolute;
              inset: 0;
              background:
                  linear-gradient(125deg, rgba(8, 2, 3, 0.94) 0%, rgba(8, 2, 3, 0.72) 42%, rgba(8, 2, 3, 0.3) 78%),
                  radial-gradient(circle at 75% 25%, rgba(242, 182, 50, 0.22) 0%, transparent 65%);
          }

          .herosld-layout {
              position: absolute;
              inset: 0;
              z-index: 4;
              display: flex;
              align-items: center;
              padding: 0 max(60px, 8vw);
              gap: 60px;
          }

          .herosld-school-ribbon {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 22px;
              border-right: 1px solid rgba(242, 182, 50, 0.25);
              padding-right: 50px;
              height: 400px;
              justify-content: center;
          }

          .herosld-school-ribbon .vertical-text {
              writing-mode: vertical-rl;
              transform: rotate(180deg);
              font-family: 'Cinzel', serif;
              font-size: 0.82rem;
              letter-spacing: 5px;
              text-transform: uppercase;
              color: var(--gold);
              white-space: nowrap;
              opacity: 0.85;
          }

          .herosld-school-ribbon .crest-badge {
              width: 56px;
              height: 56px;
              border-radius: 50%;
              border: 2px solid var(--gold);
              overflow: hidden;
              background: var(--cream);
              box-shadow: 0 0 20px rgba(242, 182, 50, 0.35);
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .herosld-school-ribbon .crest-badge img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
          }

          .herosld-copy {
              max-width: 780px;
          }

          .herosld-badge-tag {
              display: inline-block;
              font-family: 'Cinzel', serif;
              font-size: 0.85rem;
              font-weight: 700;
              letter-spacing: 4px;
              text-transform: uppercase;
              color: var(--gold);
              margin-bottom: 24px;
              text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
              border-left: 3px solid var(--gold);
              padding-left: 14px;
          }

          .herosld-copy h1 {
              font-family: 'Cinzel', serif;
              font-size: clamp(2.8rem, 5.5vw, 4.8rem);
              font-weight: 700;
              line-height: 1.06;
              margin-bottom: 22px;
              color: #ffffff;
              letter-spacing: -0.5px;
              text-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);
          }

          .herosld-copy p {
              font-size: 1.12rem;
              line-height: 1.75;
              font-weight: 300;
              color: #f6ecdf;
              max-width: 56ch;
              margin-bottom: 40px;
              text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
          }

          .herosld-btns {
              display: flex;
              gap: 18px;
              flex-wrap: wrap;
          }

          .herosld-btn {
              padding: 15px 36px;
              border-radius: 50px;
              font-weight: 700;
              font-size: .78rem;
              letter-spacing: 1.8px;
              text-transform: uppercase;
              text-decoration: none;
              transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
              display: inline-flex;
              align-items: center;
              justify-content: center;
          }

          .herosld-btn.gold {
              background: var(--gold);
              color: #3a0a0f;
              box-shadow: 0 10px 30px rgba(242, 182, 50, 0.35);
          }

          .herosld-btn.gold:hover {
              background: #fff;
              transform: translateY(-3px);
              box-shadow: 0 15px 35px rgba(255, 255, 255, 0.45);
          }

          .herosld-btn.line {
              border: 2px solid rgba(255, 255, 255, 0.45);
              color: #fff;
              background: rgba(255, 255, 255, 0.04);
              backdrop-filter: blur(8px);
          }

          .herosld-btn.line:hover {
              background: rgba(255, 255, 255, 0.15);
              border-color: #fff;
              transform: translateY(-3px);
          }

          .herosld.on .herosld-layout>* {
              animation: slideRise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
          }

          .herosld.on .herosld-school-ribbon {
              animation-delay: 0.1s;
          }

          .herosld.on .herosld-copy {
              animation-delay: 0.25s;
          }

          @keyframes slideRise {
              from {
                  opacity: 0;
                  transform: translateY(40px);
                  filter: blur(5px);
              }

              to {
                  opacity: 1;
                  transform: none;
                  filter: blur(0);
              }
          }

          .herosld-control-dock {
              position: absolute;
              z-index: 5;
              right: max(60px, 8vw);
              bottom: 65px;
              display: flex;
              align-items: center;
              gap: 22px;
              background: rgba(8, 2, 3, 0.55);
              backdrop-filter: blur(16px);
              -webkit-backdrop-filter: blur(16px);
              padding: 10px 24px;
              border-radius: 50px;
              border: 1px solid rgba(242, 182, 50, 0.25);
              box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
          }

          .herosld-count {
              font: 700 0.88rem 'Cinzel', serif;
              color: var(--gold);
              letter-spacing: 2.5px;
              min-width: 68px;
              text-align: center;
          }

          .herosld-arrow-group {
              display: flex;
              gap: 8px;
          }

          .herosld-arrow {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid rgba(255, 255, 255, 0.3);
              background: rgba(255, 255, 255, 0.05);
              color: #fff;
              cursor: pointer;
              font-size: 1.2rem;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.25s ease;
          }

          .herosld-arrow:hover,
          .herosld-arrow:focus-visible {
              background: var(--gold);
              border-color: var(--gold);
              color: #3a0a0f;
              transform: scale(1.1);
              outline: none;
          }

          .herosld-dots {
              position: absolute;
              z-index: 5;
              left: max(60px, 8vw);
              bottom: 78px;
              display: flex;
              gap: 12px;
          }

          .herosld-dot {
              background: none;
              border: 0;
              padding: 10px 0;
              cursor: pointer;
          }

          .herosld-dot i {
              display: block;
              width: 44px;
              height: 3px;
              background: rgba(255, 255, 255, 0.25);
              position: relative;
              overflow: hidden;
              border-radius: 4px;
              transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
          }

          .herosld-dot.on i {
              width: 64px;
          }

          .herosld-dot i::after {
              content: "";
              position: absolute;
              inset: 0;
              background: var(--gold);
              transform: scaleX(0);
              transform-origin: left;
          }

          .herosld-dot.on i::after {
              animation: fillTimer var(--dur, 6s) linear forwards;
          }

          .hero.paused .herosld-dot.on i::after {
              animation-play-state: paused !important;
          }

          @keyframes fillTimer {
              to {
                  transform: scaleX(1);
              }
          }

          /* ========================================================
            NEWSSEC CSS NAMESPACE
            ======================================================== */
          /* ========================================================
   NEWSSEC CSS NAMESPACE
   ======================================================== */
.newssec-sec {
    position: relative;
    padding-top: 50px;
}

.newssec-board {
    height: 850px;
    background: url('../images/newsmatura.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding: 350px 180px 0px 140px;
    width: 100%;
    background-position: center;
}

@media (max-width: 574px) {
    .newssec-board {
        width: 100%;
        height: 700px;
        background-position: center;
        padding: 180px 0px 0px 0px;
        background-size: 290%;
    }
}

@media (min-width: 574px) and (max-width: 1200px) {
    .newssec-board {
        width: 100%;
        height: 700px;
        background-position: center;
        padding: 180px 0 0 0;
        background-size: 190%;
    }
}

.newssec-board .title h4 {
    font-family: 'Cinzel', serif;
    color: var(--deep);
    font-weight: 700;
}

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

.newssec-view-all {
    background: var(--deep);
    border: 1px solid var(--gold);
    transition: 0.3s ease;
}

.newssec-view-all:hover {
    background: var(--gold);
    color: var(--deep) !important;
}

.newssec-card {
    background: #ffffff;
    border-radius: 14px;
    position: relative;
    padding: 22px 20px 18px 24px;
    margin-top: 10px;
    width: 100%;
    border-left: 5px solid var(--red);
    box-shadow: 0 10px 30px rgba(138, 9, 16, 0.08);
    transition: all 0.3s ease-in-out;
}

.newssec-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(138, 9, 16, 0.15);
    border-left-color: var(--gold);
}

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

.newssec-overlap {
    text-align: center;
    font-size: 75px;
    font-weight: bold;
    position: absolute;
    z-index: -1;
    color: var(--deep);
    opacity: 0.15;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.newssec-controls .custom-prev1,
.newssec-controls .custom-next1,
.bulletin-prev,
.bulletin-next {
    background: linear-gradient(135deg, var(--red), var(--deep));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: none;
    margin-left: 10px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.newssec-controls .custom-prev1:hover,
.newssec-controls .custom-next1:hover,
.bulletin-prev:hover,
.bulletin-next:hover {
    background: var(--gold);
    color: var(--ink);
}

/* ========================================================
   NEW EXTRACTED CSS CLASSES (Replacing Inline Styles)
   ======================================================== */
.newssec-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background-color: var(--red);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.newssec-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    color: #b30d12;
    font-size: 0.8rem;
}

.newssec-card-title {
    color: var(--deep);
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.newssec-card-desc {
    color: #6c757d;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

          /* =========================================
            ABOUT US SECTION (RE-MAPPED TO ROOT VARS)
            ========================================= */
          .abcs {

              color: var(--ink);
              position: relative;
              padding: 0 0 60px 0;
              overflow: hidden;
          }

          .abcs .heritage-badge {
              background: linear-gradient(135deg, var(--red), var(--deep));
              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(138, 9, 16, 0.25);
              border: 1px solid rgba(242, 182, 50, 0.4);
          }

          .abcs .editorial-title {
              font-family: 'Cinzel', serif;
              font-size: clamp(2.2rem, 4vw, 3rem);
              font-weight: 700;
              line-height: 1.2;
              letter-spacing: -0.5px;
              color: var(--ink);
          }

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

          .abcs .lead-text {
              font-size: 1.1rem;
              line-height: 1.7;
              color: var(--muted);
              border-left: 3px solid var(--gold);
              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: 0 10px 25px rgba(0, 0, 0, 0.05);
              transition: all 0.3s ease;
          }

          .abcs .value-box:hover {
              transform: translateY(-4px);
              border-color: var(--gold);
              box-shadow: 0 20px 40px rgba(138, 9, 16, 0.08);
          }

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

          .abcs .btn-admission {
              background: linear-gradient(135deg, var(--red) 0%, var(--deep) 100%);
              color: #ffffff;
              font-weight: 600;
              font-size: 0.85rem;
              letter-spacing: 1px;
              padding: 0.8rem 2rem;
              border-radius: 100px;
              border: 1.5px solid rgba(242, 182, 50, 0.4);
              box-shadow: 0 8px 20px rgba(138, 9, 16, 0.25);
              transition: all 0.3s;
              text-decoration: none;
          }

          .abcs .btn-admission:hover {
              background: var(--gold);
              color: var(--deep);
              border-color: var(--gold);
              transform: translateY(-2px);
              box-shadow: 0 12px 25px rgba(242, 182, 50, 0.35);
          }

          .abcs .btn-read-more {
              background-color: transparent;
              color: var(--deep);
              font-weight: 600;
              font-size: 0.85rem;
              letter-spacing: 1px;
              padding: 0.8rem 2rem;
              border-radius: 100px;
              border: 2px solid var(--deep);
              transition: all 0.3s;
              text-decoration: none;
          }

          .abcs .btn-read-more:hover {
              background-color: var(--deep);
              color: #ffffff;
              transform: translateY(-2px);
              box-shadow: 0 8px 20px rgba(138, 9, 16, 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);
          }

          @media (max-width: 1050px) {
              .fornavbar-wrap {
                  top: 22px
              }

              .fornavbar-wrap.stuck {
                  top: calc(22px + env(safe-area-inset-top, 0px))
              }

              .fornavbar-main {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  height: 68px;
                  padding: 0 16px;
                  width: 100%;
                  max-width: none;
                  border-radius: 18px
              }

              .fornavbar-main .mid {
                  display: none
              }

              .fornavbar-crest {
                  width: 92px;
                  height: 92px;
                  padding: 3px;
                  box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px #a50d13, 0 0 0 6px var(--gold), 0 10px 18px rgba(40, 0, 5, .45);
                  z-index: 2000
              }

              .fornavbar-crest:hover {
                  transform: translate(-50%, -50%)
              }

              .fornavbar-burger {
                  display: block;
                  background: none;
                  border: 0;
                  font-size: 1.8rem;
                  color: #fdf3d6;
                  cursor: pointer;
                  z-index: 2001
              }

              .desktop-menu {
                  display: none !important;
              }

              .fornavbar-mobile-drawer {
                  position: fixed;
                  top: 96px;
                  left: 16px;
                  right: 16px;
                  flex-direction: column;
                  align-items: stretch;
                  background: var(--deep);
                  padding: 20px 16px;
                  max-height: calc(100vh - 120px);
                  overflow-y: auto;
                  display: none;
                  border-radius: 20px;
                  box-shadow: 0 20px 40px rgba(45, 0, 5, .4);
                  z-index: 1500;
                  list-style: none !important;
                  margin: 0 !important;
              }

              .fornavbar-mobile-drawer.open {
                  display: flex !important;
              }

              .fornavbar-mobile-drawer .fornavbar-item {
                  width: 100%;
                  margin-bottom: 4px;
              }

              .fornavbar-mobile-drawer .fornavbar-link {
                  width: 100%;
                  justify-content: space-between;
                  font-size: .95rem;
                  padding: 10px 12px;
              }

              .fornavbar-mobile-drawer .fornavbar-link::after {
                  display: none;
              }

              .fornavbar-mobile-drawer .fornavbar-dropdown {
                  position: static !important;
                  opacity: 1 !important;
                  visibility: visible !important;
                  transform: none !important;
                  box-shadow: none !important;
                  background: rgba(0, 0, 0, 0.2) !important;
                  padding: 4px 0 4px 12px !important;
                  margin-top: 4px !important;
                  border-radius: 8px !important;
                  display: none;
              }

              .fornavbar-mobile-drawer .fornavbar-item.active-dropdown .fornavbar-dropdown {
                  display: block !important;
              }

              .fornavbar-mobile-drawer .fornavbar-dropdown::before {
                  display: none;
              }

              .fornavbar-mobile-drawer .fornavbar-dropdown a {
                  color: #f6e3b0;
                  padding: 8px 12px;
                  font-size: .9rem;
              }

              .herosld-layout {
                  padding: 0 20px;
                  flex-direction: column;
                  justify-content: center;
                  align-items: flex-start;
              }

              .herosld-school-ribbon {
                  display: none;
              }

              .herosld-dots {
                  left: 20px;
                  bottom: 84px;
              }

              .herosld-control-dock {
                  right: 20px;
                  bottom: 74px;
                  padding: 8px 16px;
              }
          }

          @media (prefers-reduced-motion:reduce) {

              .herosld.on .herosld-bg,
              .herosld.on .herosld-layout>* {
                  animation: none
              }

              .herosld {
                  transition: none
              }
          }

          /* ========================================================
            MSG CSS NAMESPACE
            ======================================================== */
          .msg-section {
              background: linear-gradient(180deg, #c6151b, var(--deep));
              padding: 60px 0;
              position: relative;
              display: flex;
              align-items: center;
          }

          .msg-canvas-matrix {
              position: relative;
              min-height: 420px;
          }

          .msg-panel-node {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              opacity: 0;
              visibility: hidden;
              transform: translateY(20px);
              transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
          }

          .msg-panel-node.active-node {
              position: relative;
              opacity: 1;
              visibility: visible;
              transform: translateY(0);
          }

          .msg-section-title {
              font-family: 'Clash Display', sans-serif;
              font-size: 2.8rem;
              font-weight: 700;
              text-transform: uppercase;
              letter-spacing: -0.5px;
              color: #ffffff;
              margin-bottom: 25px;
              display: block;
              line-height: 1.1;
          }

          .msg-section-title span {
              color: var(--gold);
              display: block;
          }

          .msg-editorial-content {
              margin-bottom: 35px;
          }

          .msg-para-bold {
              font-size: 1.25rem;
              line-height: 1.6;
              color: var(--cream);
              font-weight: 500;
              margin-bottom: 20px;
              font-style: italic;
          }

          .msg-para-detail {
              font-size: 1.05rem;
              line-height: 1.8;
              color: #fff;
              margin-bottom: 15px;
              font-weight: 400;
          }

          .msg-meta-row h4 {
              font-family: 'Clash Display', sans-serif;
              font-size: 1.5rem;
              font-weight: 700;
              margin: 0 0 4px 0;
              color: #ffffff;
          }

          .msg-meta-row p {
              font-size: 0.9rem;
              text-transform: uppercase;
              letter-spacing: 2px;
              color: var(--gold);
              margin: 0;
              font-weight: 600;
          }

          .msg-portrait-wrapper {
              position: relative;
              width: 100%;
              height: 480px;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .msg-portrait-frame {
              width: 340px;
              height: 430px;
              border-radius: 28px;
              overflow: hidden;
              position: relative;
              z-index: 3;
              border: 4px solid rgba(250, 241, 210, 0.25);
              box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
              transition: all 0.5s ease;
          }

          .msg-portrait-frame img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.6s ease;
          }

          .msg-portrait-frame:hover img {
              transform: scale(1.03);
          }

          .msg-bubble-dock {
              position: absolute;
              right: 15px;
              bottom: 25px;
              display: flex;
              flex-direction: column;
              gap: 12px;
              z-index: 10;
          }

          .msg-interactive-bubble {
              width: 75px;
              height: 75px;
              border-radius: 20px;
              border: 3px solid rgba(250, 241, 210, 0.25);
              background: var(--deep);
              overflow: hidden;
              cursor: pointer;
              box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
              transition: all 0.3s ease;
          }

          .msg-interactive-bubble img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              filter: grayscale(40%);
              transition: all 0.3s ease;
          }

          .msg-interactive-bubble:hover {
              transform: translateY(-3px);
              border-color: var(--gold);
          }

          .msg-interactive-bubble.focused-bubble {
              border-color: var(--gold);
              transform: scale(1.08);
              box-shadow: 0 15px 35px rgba(242, 182, 50, 0.3);
          }

          .msg-interactive-bubble.focused-bubble img {
              filter: grayscale(0%);
          }

          @media (max-width: 991.98px) {
              .msg-section {
                  padding: 40px 0;
              }

              .msg-canvas-matrix {
                  min-height: auto;
              }

              .msg-panel-node {
                  position: absolute;
              }

              .msg-panel-node.active-node {
                  position: relative;
              }

              .msg-portrait-wrapper {
                  margin-bottom: 50px;
                  height: 350px;
              }

              .msg-portrait-frame {
                  width: 260px;
                  height: 330px;
              }

              .msg-section-title {
                  font-size: 2.1rem;
              }

              .msg-bubble-dock {
                  flex-direction: row;
                  right: unset;
                  bottom: -35px;
                  left: 50%;
                  transform: translateX(-50%);
              }
          }

          /* ========================================================
            GALBIR CSS NAMESPACE (Gallery & Birthdays)
            ======================================================== */
          .galbir-section {
              padding: 60px 0;

          }

          .galbir-heading-container {
              text-align: center;
              margin-bottom: 40px;
          }

          .galbir-title-heading {
              font-family: "Times New Roman", serif;
              font-size: 2rem;
              font-weight: 700;
              text-transform: uppercase;
              margin: 0px;
              color: var(--deep);
          }

          .galbir-separator {
              width: 280px;
              height: 3px;
              background-color: var(--gold);
              margin: auto;
              position: relative;
          }

          .galbir-separator::after {
              content: "";
              position: absolute;
              bottom: -8px;
              left: 25%;
              width: 50%;
              height: 3px;
              background-color: var(--gold);
          }

          .galbir-content-card {
              display: flex;
              flex-direction: column;
              height: 100%;
              justify-content: space-between;
          }

          .galbir-swiper {
              width: 90%;
              height: 350px;
              margin-left: 0;
          }

          .galbir-swiper-slide {
              border-radius: 20px;
              border: 6px solid var(--cream);
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
              overflow: hidden;
              background-color: #fff;
          }

          .galbir-swiper-slide img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }

          .galbir-info .album-title {
              color: var(--red);
          }

          .galbir-info .album-desc {
              color: var(--muted);
          }

          .galbir-controls {
              display: flex;
              gap: 12px;
              margin-top: 25px;
              align-items: center;
          }

          .galbir-btn {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1.5px solid rgba(138, 9, 16, 0.2);
              background: var(--cream);
              color: var(--red);
              cursor: pointer;
              font-size: 1rem;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.25s ease;
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          }

          .galbir-btn:hover {
              background: linear-gradient(135deg, var(--red) 0%, var(--deep) 100%);
              color: #ffffff;
              border-color: var(--deep);
              transform: translateY(-2px);
              box-shadow: 0 6px 15px rgba(138, 9, 16, 0.25);
          }

          .galbir-btn-admission {
              background: linear-gradient(135deg, var(--red) 0%, var(--deep) 100%);
              color: #ffffff;
              font-weight: 600;
              font-size: 0.85rem;
              letter-spacing: 1px;
              padding: 0.8rem 2rem;
              border-radius: 100px;
              border: 1.5px solid rgba(242, 182, 50, 0.4);
              box-shadow: 0 8px 20px rgba(138, 9, 16, 0.25);
              transition: all 0.3s;
              text-decoration: none;
              display: inline-block;
          }

          .galbir-btn-admission:hover {
              background: linear-gradient(135deg, var(--deep) 0%, var(--red) 100%);
              color: var(--cream);
              box-shadow: 0 10px 25px rgba(138, 9, 16, 0.4);
              transform: translateY(-2px);
          }

          .galbir-birthday-card {
              position: relative;
              overflow: hidden;
              text-align: center;
              padding: 30px;
              border-radius: 20px;
          }

          .galbir-bday-header-text {
              color: var(--deep);
              font-size: 1.8rem;
              font-weight: 800;
              margin-bottom: 5px;
              letter-spacing: 2px;
          }

          .galbir-pink-divider {
              width: 50px;
              height: 5px;
              background: var(--gold);
              margin: 0 auto 15px;
              border-radius: 10px;
          }

          .galbir-month-label {
              color: var(--red);
              font-size: 0.9rem;
              font-weight: 600;
              margin-bottom: 20px;
          }

          .galbir-bday-photo-frame {
              width: 180px;
              height: 180px;
              border-radius: 50%;
              border: 6px solid #fff;
              margin: 0 auto 20px;
              overflow: hidden;
              box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
              z-index: 2;
              position: relative;
              background-color: #fff;
          }

          .galbir-bday-photo-frame img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
          }

          .galbir-bday-name {
              color: var(--ink);
              font-weight: 800;
              font-size: 1.3rem;
              text-transform: uppercase;
          }

          .galbir-bday-class {
              color: var(--muted);
              font-weight: 600;
          }

          .galbir-date-badge-pink {
              display: inline-block;
              color: var(--red);
              font-size: 1.3rem;
              font-weight: 800;
              margin-top: 5px;
          }

          .galbir-role-tag {
              color: var(--muted);
              text-transform: uppercase;
              font-size: 0.8rem;
              letter-spacing: 2px;
              margin-top: 5px;
          }

          .galbir-balloon {
              position: absolute;
              width: 110px;
              z-index: 1;
              opacity: 0.8;
          }

          .galbir-balloon-left {
              left: 10%;
              top: 25%;
          }

          .galbir-balloon-right {
              right: 7%;
              top: 25%;
          }

          .galbir-bday-nav {
              position: absolute;
              top: 50%;
              width: 100%;
              display: flex;
              justify-content: space-between;
              padding: 0 80px;
              pointer-events: none;
              z-index: 10;
              transform: translateY(-50%);
          }

          .galbir-bday-nav button {
              pointer-events: auto;
              background: var(--red);
              border: none;
              color: #fff;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              transition: 0.3s;
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .galbir-bday-nav button:hover {
              background: var(--deep);
              transform: scale(1.1);
          }

          @media (max-width: 991.98px) {
              .galbir-section {
                  padding: 60px 20px;
              }
          }

          @media (max-width: 768px) {
              .galbir-balloon {
                  display: none;
              }

              .galbir-bday-header-text {
                  font-size: 1.5rem;
              }

              .galbir-bday-nav {
                  padding: 0 20px;
              }
          }

          @media (min-width: 1200px) and (max-width: 1280px) {
              .galbir-balloon-left {
                  left: 0%;
                  top: 25%;
              }

              .galbir-balloon-right {
                  right: 0;
                  top: 25%;
              }

              .galbir-bday-nav {
                  padding: 0 40px;
              }
          }

          /* ========================================================
            FACILITIES SECTION (FAC- NAMESPACE & THEME COLORS)
            ======================================================== */
          .fac-showcase {
              background: linear-gradient(180deg, #c6151b, var(--deep));
              padding: 60px 0 30px 0;
          }

          .fac-card {
              border-radius: 20px;
              overflow: hidden;
              height: 420px;
              transition: transform 0.3s ease;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
              width: 100%;
              max-width: 330px;
          }

          .fac-card img {
              height: 100%;
              width: 100%;
              object-fit: cover;
          }

          .fac-card:hover {
              transform: translateY(-5px);
          }

          .fac-text {
              position: absolute;
              bottom: -15%;
              left: 40px;
              color: #fff;
          }

          .fac-num {
              font-size: 45px;
              font-weight: 700;
              margin-bottom: 0px;
              color: var(--gold);
              font-family: 'Cinzel', serif;
              text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
          }

          .fac-text h6 {
              margin: 0;
              font-size: 18px;
              font-weight: 600;
              color: #fff;
          }

          .fac-text p {
              font-size: 13px;
              color: var(--gold);
              margin: 0;
          }

          .fac-top-row {
              margin-top: 0;
          }

          .fac-bottom-row {
              margin-top: 50px;
          }

          @media (max-width: 991px) {
              .fac-card {
                  height: 320px;
              }

              .fac-bottom-row {
                  margin-top: 0;
              }
          }

          .fac-nav button {
              background: var(--cream);
              color: var(--red);
              border: none;
              border-radius: 50%;
              width: 40px;
              height: 40px;
              margin: 0 8px;
              font-size: 18px;
              cursor: pointer;
              transition: all 0.3s ease;
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          }

          .fac-nav button:hover {
              background: var(--gold);
              color: var(--deep);
          }

          .fac-continue-link {
              color: var(--gold);
              font-weight: 600;
              text-decoration: none;
              background: rgba(255, 255, 255, 0.1);
              border: 1px solid rgba(242, 182, 50, 0.4);
              padding: 10px 20px;
              border-radius: 30px;
              display: inline-block;
              transition: 0.3s ease;
          }

          .fac-continue-link:hover {
              background: var(--gold);
              color: var(--deep);
              text-decoration: none;
          }

          .facilitySwiper {
              overflow: hidden;
              padding-bottom: 100px;
          }

          .facilitySwiper .swiper-slide {
              display: flex;
              justify-content: center;
          }

          /* ========================================================
            TOPPERS & ACHIEVEMENTS SECTION (RE-MAPPED TO THEME COLORS)
            ======================================================== */
          .topper-achievement {
              padding: 60px 0;

          }

          .heading-container2 {
              text-align: center;
              margin-bottom: 20px;
          }

          .title-heading2 {
              font-family: "Times New Roman", serif;
              font-size: 2.5rem;
              font-weight: 700;
              text-transform: uppercase;
              margin: 0px;
              color: var(--deep);
          }

          .heading-separator2 {
              width: 280px;
              height: 3px;
              background-color: var(--gold);
              margin: auto;
              position: relative;
          }

          .heading-separator2::after {
              content: "";
              position: absolute;
              bottom: -8px;
              left: 25%;
              width: 50%;
              height: 3px;
              background-color: var(--gold);
          }

          .achievement-showcase-wrapper {
              padding: 50px 0;
              border-radius: 40px;
          }

          .topper-card {
              text-align: center;
              position: relative;
          }

          .topper-card-category {
              font-weight: 800;
              font-size: 0.9rem;
              text-transform: uppercase;
              letter-spacing: 2px;
              color: var(--deep);
              margin-bottom: 20px;
              display: block;
          }

          .topper-image-container {
              position: relative;
              width: 180px;
              height: 220px;
              margin: 0 auto 25px;
          }

          .topper-image-container::before {
              content: '';
              position: absolute;
              top: 15px;
              left: 15px;
              right: -15px;
              bottom: -15px;
              border: 2px solid var(--gold);
              border-radius: 20px;
              z-index: 0;
              transition: 0.4s ease;
          }

          .topper-img-wrap {
              position: relative;
              width: 100%;
              height: 100%;
              overflow: hidden;
              border-radius: 20px;
              z-index: 1;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
              background-color: #fff;
          }

          .topper-img-wrap img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: 0.5s ease;
          }

          .topper-card:hover .topper-image-container::before {
              transform: translate(-10px, -10px);
          }

          .topper-card:hover .topper-img-wrap img {
              transform: scale(1.1);
          }

          .topper-name {
              font-weight: 800;
              font-size: 1.25rem;
              color: var(--deep);
              margin-top: 10px;
              margin-bottom: 5px;
          }

          .topper-percent {
              font-size: 1.3rem;
              font-weight: 600;
              color: var(--red);
              background: linear-gradient(120deg, transparent 0%, transparent 50%, rgba(242, 182, 50, 0.3) 50%);
              display: inline-block;
              padding: 0 5px;
          }

          .achievement-display {
              position: relative;
              border-radius: 30px;
              overflow: hidden;
              height: 300px;
          }

          .achievement-achieve-img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }

          .achievement-achieve-overlay {
              position: absolute;
              inset: 0;
              background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              padding: 25px;
          }

          .achievement-achieve-overlay h4 {
              color: #fff;
              font-weight: 800;
              font-size: 1.4rem;
              margin-bottom: 5px;
          }

          .achievement-nav-bar {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 15px;
              margin-top: 40px;
          }

          .achievement-display .carousel-inner,
          .achievement-display .carousel-item {
              height: 100%;
          }

          @media (max-width: 991px) {
              .title-heading2 {
                  font-size: 2rem;
              }
          }






          /* Footer */

          .site-footer {
              background: linear-gradient(180deg, #c6151b, var(--deep));
              color: var(--cream);
              position: relative;
              padding-top: 100px;
              overflow: hidden;
          }

          .footer-wave {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              line-height: 0;
          }

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

          .footer-wave .shape-fill {
              fill: #faefdc;
          }

          .logo-box {
              background: #ffffff;
              width: fit-content;
              padding: 15px;
              border-radius: 12px;
              margin-bottom: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 10px 20px rgba(26, 26, 26, 0.15);
          }

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

          .footer-brand h2 {
              font-family: 'Marcellus', serif;
              font-size: 1.6rem;
              color: var(--gold);
              margin-bottom: 15px;
          }

          .footer-brand h2 span {
              color: var(--cream);
              font-size: 1.3rem;
          }

          .footer-brand p {
              font-size: 0.9rem;
              color: var(--cream);
              opacity: 0.85;
              line-height: 1.7;
          }

          .f-heading {
              font-family: 'Marcellus', serif;
              font-size: 1.25rem;
              color: var(--cream);
              margin-bottom: 25px;
              position: relative;
              display: inline-block;
          }

          .f-heading::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: -8px;
              width: 35px;
              height: 3px;
              background: var(--gold);
          }

          .f-links {
              list-style: none;
              padding: 0;
          }

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

          .f-links a {
              color: var(--cream);
              opacity: 0.75;
              text-decoration: none;
              font-size: 0.9rem;
              transition: 0.3s;
              display: flex;
              align-items: center;
          }

          .f-links a i {
              font-size: 0.7rem;
              margin-right: 10px;
              color: var(--gold);
          }

          .f-links a:hover {
              color: var(--gold);
              opacity: 1;
              transform: translateX(8px);
          }

          .c-item {
              display: flex;
              align-items: flex-start;
              margin-bottom: 20px;
          }

          .c-item i {
              background: var(--gold);
              color: var(--ink);
              width: 35px;
              height: 35px;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 15px;
              flex-shrink: 0;
              box-shadow: 0 4px 10px rgba(242, 182, 50, 0.3);
          }

          .c-item p {
              margin: 0;
              font-size: 0.9rem;
              line-height: 1.4;
              color: var(--cream);
          }

          .map-container {
              border-radius: 15px;
              overflow: hidden;
              height: 130px;
              margin-bottom: 20px;
              border: 1px solid rgba(250, 241, 210, 0.15);
          }

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

          .store-btns {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              gap: 10px;
          }

          .store-btn {
              flex: 1;
              min-width: 120px;
              background: rgba(250, 241, 210, 0.08);
              padding: 8px 10px;
              border-radius: 10px;
              display: flex;
              align-items: center;
              text-decoration: none;
              color: var(--cream);
              transition: 0.3s;
              border: 1px solid rgba(250, 241, 210, 0.05);
          }

          .store-btn:hover {
              background: var(--gold);
              color: var(--ink);
              transform: translateY(-3px);
          }

          .store-btn i {
              font-size: 1.2rem;
              margin-right: 8px;
          }

          .store-btn span {
              display: block;
              font-size: 0.6rem;
              opacity: 0.8;
              line-height: 1;
          }

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

          .school-frame {
              position: relative;
              margin-top: 50px;
              border-radius: 20px;
              overflow: hidden;
              line-height: 0;
          }

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

          .bottom-bar {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              background: rgba(26, 26, 26, 0.92);
              padding: 15px 0;
              text-align: center;
              font-size: 0.85rem;
              line-height: 1.5;
              color: var(--cream);
          }

          .social-row a {
              color: var(--cream);
              background: rgba(250, 241, 210, 0.08);
              width: 35px;
              height: 35px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              margin-right: 8px;
              transition: 0.3s;
              text-decoration: none;
              border: 1px solid rgba(250, 241, 210, 0.05);
          }

          .social-row a:hover {
              background: var(--gold);
              color: var(--ink);
              transform: translateY(-3px);
          }

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

          .back-to-top {
              position: fixed;
              bottom: 30px;
              right: 30px;
              width: 45px;
              height: 45px;
              background: var(--deep);
              color: var(--page);
              border: 2px solid var(--gold);
              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 rgba(255, 214, 0, 0.3);
              text-decoration: none;
          }

          .back-to-top:hover {
              transform: translateY(-5px);
              background: var(--red);
              color: #ffffff;
              border-color: var(--deep);
              box-shadow: 0 8px 25px rgba(192, 24, 35, 0.4);
          }









          /* Banners & Overlays */
          .universal-banner,
          .hero-banner {
              background: linear-gradient(to right, rgba(26, 26, 26, 0.9), rgba(138, 9, 16, 0.85), rgba(26, 26, 26, 0.9)), url('../images/Campus.png') center/cover no-repeat;
              height: 430px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
          }

          .hero-overlay {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: var(--ink, #1a1a1a);
              opacity: 0.75;
              z-index: 1;
              /* Sits behind the content */
          }

          /* ============================================================================== */
          /* Enhanced Banner & Title Design */
          /* ============================================================================== */

          .banner-content {
              position: relative;
              z-index: 2;
              text-align: center;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-top: 100px;
          }

          /* Upgraded Page Title */
          .banner-content h1 {
              font-size: 2.5rem;
              /* Larger, more impactful */
              font-weight: 800;
              color: var(--text-white, #ffffff);
              letter-spacing: 3px;
              text-transform: uppercase;
              text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
              /* Text pop */
              margin-bottom: 15px;
          }

          /* Glowing Yellow/Red Gradient Separator */
          .heading-separator {
              width: 100px;
              height: 5px;
              background: linear-gradient(90deg, var(--gold, #f2b632), var(--red, #b30d12));
              border-radius: 5px;
              margin: 0 auto 25px;
              box-shadow: 0 0 12px rgba(179, 13, 18, 0.6);
              /* Adds a vibrant red/yellow glow */
          }

          /* Footer layout for lines and pill */
          .banner-footer {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 15px;
              margin-top: 10px;
          }

          /* Fading Red/Yellow Lines on the sides */
          .decorative-line {
              height: 2px;
              width: 60px;
              background: linear-gradient(90deg, transparent, var(--red, #b30d12), transparent);
          }

          /* Glassmorphism Description/Location Pill */
          .location-tag {
              margin: 0;
              padding: 5px 10px;
              background: rgba(138, 9, 16, 0.6);
              /* Dark red tint matching theme */
              backdrop-filter: blur(8px);
              /* Modern frosted glass effect */
              -webkit-backdrop-filter: blur(8px);
              border: 1px solid rgba(242, 182, 50, 0.5);
              /* Yellow border */
              border-radius: 40px;
              color: var(--text-white, #ffffff);
              font-weight: 500;
              font-size: 0.9rem;
              letter-spacing: 1px;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          }

          /* Responsive adjustments for banner on mobile */
          @media (max-width: 768px) {
              .banner-content h1 {
                  font-size: 2.5rem;
              }

              .decorative-line {
                  display: none;
                  /* Hide side lines on small screens to save space */
              }

              .location-tag {
                  font-size: 0.95rem;
                  padding: 8px 18px;
              }
          }

          /* ============================================================================== */
          /* General Content Styles */
          /* ============================================================================== */

          .about-content {
              padding: 50px 0px;
              background: #fdf3e2;
          }

          .page-heading {
              text-transform: uppercase;
              position: relative;
              color: var(--red, #b30d12);
              font-weight: 700;
          }

          .about-quote {
              text-transform: uppercase;
              position: relative;
              color: var(--red, #b30d12);
              font-weight: 600;
          }

          .yellow-divider {
              width: 200px;
              height: 6px;
              background: linear-gradient(90deg, var(--gold, #f2b632), var(--gold, #f2b632));
              margin: 10px auto;
              border-radius: 1px;
          }

          /* Swiper full size */
          .heroSwiper {
              width: 100%;
              height: 100%;
          }

          .heroSwiper .swiper-slide {
              width: 100%;
              height: 100%;
          }

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

          /* ============================================================================== */
          /* Cards */
          /* ============================================================================== */
          .custom-card {
              transition: transform 0.3s ease, box-shadow 0.3s ease;
              border-radius: var(--card-radius, 8px);
              border: 1px solid rgba(179, 13, 18, 0.2);
          }

          .custom-card:hover {
              transform: translateY(-5px);
              box-shadow: 0 10px 20px rgba(179, 13, 18, 0.15);
          }

          .card-img-top {
              height: 220px;
              object-fit: cover;
              border-top-left-radius: var(--card-radius, 8px);
              border-top-right-radius: var(--card-radius, 8px);
          }

          /* ============================================================================== */
          /* Lists */
          /* ============================================================================== */
          .list-styling-arrow {
              padding: 0% 0% 0% 1%;
              margin: 0;
          }

          .list-styling-arrow li {
              position: relative;
              line-height: 28px;
              padding: 0px 0 0px 32px;
              list-style: none;
              margin: 8px 0;
              color: var(--ink, #1a1a1a);
          }

          .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: 20px;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: var(--gold, #f2b632);
              color: var(--deep, #8a0910);
              font-size: 11px;
              border-radius: 20px;
          }

          ol li {
              line-height: 28px;
              padding: 0px !important;
              list-style-type: disc !important;
              background: none !important;
              list-style: none;
              margin: 8px 0px;
              vertical-align: middle;
              color: var(--ink, #1a1a1a);
          }

          /* ============================================================================== */
          /* Tables */
          /* ============================================================================== */
          thead th {
              background: linear-gradient(135deg, var(--red, #b30d12), var(--deep, #8a0910)) !important;
              color: var(--text-white, #ffffff) !important;
              border-color: var(--deep, #8a0910) !important;
              text-align: center;
              vertical-align: middle;
              font-weight: 700;
          }

          table td {
              font-size: 15px;
              background: #ffffff !important;
              color: var(--ink, #1a1a1a);
              border-color: rgba(179, 13, 18, 0.15);
          }

          /* ============================================================================== */
          /* Accordion */
          /* ============================================================================== */

          .accordion-item {
              border: none;
              background: transparent;
              margin-bottom: 10px;
          }

          /* Default ALL buttons (Red/Yellow Gradient theme) */
          .accordion-button {
              background: linear-gradient(135deg, var(--red, #b30d12), var(--deep, #8a0910));
              color: var(--text-white, #ffffff);
              border-radius: 10px !important;
              padding: 15px 20px;
              border: none;
              box-shadow: none;
              transition: all 0.3s ease;
              font-weight: 700;
          }

          /* Remove Bootstrap arrow */
          .accordion-button::after {
              display: none;
          }

          /* Arrow */
          .arrow-icon {
              transition: transform 0.3s ease;
              font-size: 14px;
              color: var(--text-white, #ffffff);
          }

          /* Rotate when open */
          .accordion-button:not(.collapsed) .arrow-icon {
              transform: rotate(180deg);
          }

          /* OPEN STATE HEADER (Yellow background with dark text) */
          .accordion-button:not(.collapsed) {
              border-radius: 10px 10px 0 0 !important;
              background: var(--gold, #f2b632);
              color: var(--ink, #1a1a1a);
          }

          /* Arrow color updates to dark when open */
          .accordion-button:not(.collapsed) .arrow-icon {
              color: var(--ink, #1a1a1a);
          }

          /* BODY STYLE */
          .accordion-body {
              background: var(--cream, #faf1d2);
              border: 1px solid rgba(179, 13, 18, 0.2);
              border-top: none;
              border-radius: 0 0 10px 10px;
              padding: 20px;
              color: var(--ink, #1a1a1a);
          }

          /* Remove gap between header & body */
          .accordion-collapse {
              border: none;
              margin-top: -5px;
          }

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