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

             :root {
                 --navy: #0a1628;
                 --navy2: #102040;
                 --navy3: #162850;
                 --gold: #b8860b;
                 --gold2: #d4a017;
                 --gold3: #f0c040;
                 --gold4: #fef3c7;
                 --cream: #f8f5ef;
                 --white: #ffffff;
                 --gray1: #f4f1eb;
                 --gray2: #e8e3d8;
                 --gray3: #c8c0b0;
                 --gray4: #9a9080;
                 --text: #1a1208;
                 --text2: #4a4030;
                 --text3: #7a6a50;
                 --red: #c0392b;
                 --green: #1a7a4a;
             }

             html {
                 scroll-behavior: smooth
             }

             body {
                 font-family: 'Open Sans', sans-serif;
                 background: var(--cream);
                 color: var(--text);
                 overflow-x: hidden
             }

             img {
                 max-width: 100%;
                 height: auto;
                 display: block
             }

             a {
                 text-decoration: none;
                 color: inherit
             }

             /* ===== TOPBAR ===== */
             .topbar {
                 background: var(--navy);
                 color: #aab8cc;
                 font-size: 12px;
                 /* padding: 7px 0; */
                 border-bottom: 2px solid var(--gold)
             }

             .topbar-inner {
                 max-width: 1280px;
                 margin: auto;
                 padding: 0 24px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 flex-wrap: wrap;
                 gap: 8px
             }

             .topbar a {
                 color: #aab8cc;
                 transition: color .2s
             }

             .topbar a:hover {
                 color: var(--gold3)
             }

             .topbar-left,
             .topbar-right {
                 display: flex;
                 gap: 16px;
                 align-items: center;
                 flex-wrap: wrap
             }

             .topbar-left span,
             .topbar-right a {
                 display: flex;
                 align-items: center;
                 gap: 5px;
                 font-size: 11.5px;
                 padding: 6px 10px;

             }

             .memberbtn {
                 background: #d9534f;
                 color: white !important;
             }

             .paymentbtn {
                 background: #337ab7;
                 color: white !important;
             }

             .kycbtn {
                 background: #b8860b;
                 color: white !important;
             }

             .t-divider {
                 width: 1px;
                 height: 14px;
                 background: rgba(255, 255, 255, .15)
             }

             /* ===== HEADER ===== */
             header {
                 background: var(--white);
                 box-shadow: 0 2px 20px rgba(10, 22, 40, .10);
                 position: sticky;
                 top: 0;
                 z-index: 200
             }

             .header-inner {
                 max-width: 1280px;
                 margin: auto;
                 padding: 0 24px;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 height: 74px;
                 gap: 20px
             }

             .logo-area {
                 display: flex;
                 align-items: center;
                 gap: 14px;
                 flex-shrink: 0
             }

             .logo-emblem {
                 width: 52px;
                 height: 52px;
                 background: var(--navy);
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 border: 2.5px solid var(--gold);
                 flex-shrink: 0
             }

             .logo-emblem span {
                 color: var(--gold);
                 font-size: 14px;
                 font-weight: 800;
                 letter-spacing: 0px;
                 text-align: center;
                 line-height: 1
             }

             .logo-text h1 {
                 font-size: 16px;
                 font-weight: 700;
                 color: var(--navy);
                 line-height: 1.2
             }

             .logo-text p {
                 font-size: 10.5px;
                 color: var(--gray4);
                 font-weight: 500;
                 letter-spacing: 1.2px;
                 text-transform: uppercase;
                 margin-top: 2px
             }

             nav {
                 display: flex;
                 gap: 2px;
                 align-items: center
             }

             nav a,
             .dropbtn {
                 padding: 8px 13px;
                 font-size: 13px;
                 font-weight: 600;
                 color: var(--navy);
                 border-radius: 6px;
                 transition: all .2s;
                 white-space: nowrap;
                 background: transparent;
                 border: none;
                 cursor: pointer;
             }

             .nav-dropdown {
                 position: relative;
             }

             .nav-dropdown .dropbtn {
                 display: inline-flex;
                 align-items: center;
                 gap: 4px;
             }

             .dropdown-menu {
                 position: absolute;
                 top: 35px;
                 left: 0;
                 min-width: 220px;
                 background: var(--white);
                 border: 1px solid var(--gray2);
                 border-radius: 12px;
                 box-shadow: 0 18px 40px rgba(10, 22, 40, .12);
                 display: none;
                 z-index: 250;
                 padding: 8px 0;
             }

             .nav-dropdown:hover .dropdown-menu {
                 display: block;
             }

             .dropdown-menu a {
                 display: block;
                 padding: 10px 18px;
                 color: var(--navy);
                 font-weight: 600;
             }

             .dropdown-menu a:hover {
                 background: var(--gray1);
             }

             nav a:hover,
             nav a.active {
                 background: var(--navy);
                 color: var(--gold3)
             }

             .hamburger {
                 display: none;
                 background: none;
                 border: none;
                 cursor: pointer;
                 padding: 6px;
                 flex-direction: column;
                 gap: 5px
             }

             .hamburger span {
                 display: block;
                 width: 22px;
                 height: 2px;
                 background: var(--navy);
                 border-radius: 2px;
                 transition: all .3s
             }

             .mobile-nav {
                 display: none;
                 background: var(--white);
                 border-top: 1px solid var(--gray2);
                 padding: 12px 24px 16px
             }

             .mobile-nav a,
             .mobile-nav button {
                 display: block;
                 width: 100%;
                 text-align: left;
                 padding: 10px 0;
                 font-size: 14px;
                 font-weight: 600;
                 color: var(--navy);
                 border-bottom: 1px solid var(--gray1);
                 background: transparent;
                 border: none;
                 cursor: pointer;
             }

             .mobile-nav a:last-child,
             .mobile-nav button:last-child {
                 border-bottom: none
             }

             .mobile-dropdown-menu {
                 display: none;
                 padding-left: 16px;
                 margin-bottom: 10px;
             }

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

             .mobile-nav.open {
                 display: block
             }

             /* ===== HERO ===== */
             .hero {
                 position: relative;
                 overflow: hidden;
                 min-height: 580px;
                 display: flex;
                 align-items: center
             }

             .hero-bg {
                 position: absolute;
                 inset: 0;
                 background: var(--navy)
             }

             .hero-img {
                 position: absolute;
                 inset: 0;
                 object-fit: cover;
                 width: 100%;
                 height: 100%;
                 opacity: .22
             }

             .hero-overlay {
                 position: absolute;
                 inset: 0;
                 background: linear-gradient(105deg, rgba(10, 22, 40, .96) 45%, rgba(10, 22, 40, .6) 100%)
             }

             .hero-inner {
                 max-width: 1280px;
                 margin: auto;
                 padding: 70px 24px 60px;
                 display: grid;
                 grid-template-columns: 1fr 380px;
                 gap: 48px;
                 align-items: center;
                 position: relative;
                 z-index: 2
             }

             .hero-badge {
                 display: inline-flex;
                 align-items: center;
                 gap: 8px;
                 background: rgba(184, 134, 11, .18);
                 border: 1px solid rgba(184, 134, 11, .45);
                 color: var(--gold3);
                 font-size: 11px;
                 font-weight: 700;
                 letter-spacing: 2px;
                 text-transform: uppercase;
                 padding: 6px 16px;
                 border-radius: 20px;
                 margin-bottom: 22px
             }

             .hero h2 {
                 font-size: 52px;
                 font-weight: 800;
                 color: var(--white);
                 line-height: 1.15;
                 margin-bottom: 14px
             }

             .hero h2 em {
                 color: var(--gold3);
                 font-style: normal
             }

             .hero-desc {
                 font-size: 15px;
                 color: #8da0bb;
                 line-height: 1.75;
                 margin-bottom: 30px;
                 max-width: 500px
             }

             .hero-btns {
                 display: flex;
                 gap: 12px;
                 flex-wrap: wrap
             }

             .btn-gold {
                 background: var(--gold);
                 color: var(--white);
                 padding: 12px 26px;
                 border-radius: 8px;
                 font-size: 13px;
                 font-weight: 700;
                 letter-spacing: .4px;
                 transition: all .2s;
                 border: none;
                 cursor: pointer;
                 display: inline-flex;
                 align-items: center;
                 gap: 8px
             }

             .btn-gold:hover {
                 background: var(--gold2);
                 transform: translateY(-1px)
             }

             .btn-outline {
                 background: transparent;
                 color: var(--gold3);
                 padding: 12px 26px;
                 border-radius: 8px;
                 font-size: 13px;
                 font-weight: 700;
                 letter-spacing: .4px;
                 border: 1.5px solid rgba(184, 134, 11, .5);
                 transition: all .2s;
                 cursor: pointer;
                 display: inline-flex;
                 align-items: center;
                 gap: 8px
             }

             .btn-outline:hover {
                 background: rgba(184, 134, 11, .1);
                 border-color: var(--gold3)
             }

             .hero-card {
                 background: rgba(255, 255, 255, .07);
                 border: 1px solid rgba(255, 255, 255, .12);
                 border-radius: 16px;
                 padding: 26px;
                 backdrop-filter: blur(12px)
             }

             .hero-card-title {
                 font-size: 12px;
                 font-weight: 700;
                 color: var(--gold3);
                 letter-spacing: 1.8px;
                 text-transform: uppercase;
                 margin-bottom: 18px;
                 padding-bottom: 12px;
                 border-bottom: 1px solid rgba(184, 134, 11, .25)
             }

             .stat-grid {
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 18px;
                 margin-bottom: 18px
             }

             .stat-box {
                 text-align: center;
                 background: rgba(255, 255, 255, .05);
                 border-radius: 10px;
                 padding: 14px 8px
             }

             .stat-num {
                 font-size: 26px;
                 font-weight: 800;
                 color: var(--white)
             }

             .stat-lbl {
                 font-size: 10.5px;
                 color: #7090aa;
                 margin-top: 3px;
                 font-weight: 600;
                 letter-spacing: .5px;
                 text-transform: uppercase
             }

             .hero-contact {
                 background: rgba(184, 134, 11, .13);
                 border-radius: 10px;
                 padding: 14px 16px
             }

             .hero-contact p {
                 font-size: 12px;
                 color: #aab8cc;
                 margin-bottom: 5px;
                 display: flex;
                 align-items: center;
                 gap: 7px;
                 line-height: 1.4
             }

             .hero-contact p:last-child {
                 margin-bottom: 0
             }

             .hero-contact strong {
                 color: var(--gold3)
             }

             /* ===== TICKER ===== */
             .ticker {
                 background: var(--gold);
                 padding: 10px 0;
                 overflow: hidden;
                 margin-top: -10px;
             }

             .ticker-track {
                 display: flex;
                 animation: ticker 30s linear infinite;
                 white-space: nowrap
             }

             .ticker-track span {
                 padding: 0 36px;
                 font-size: 12px;
                 font-weight: 700;
                 color: var(--navy);
                 letter-spacing: .6px;
                 text-transform: uppercase
             }

             .ticker-track span::before {
                 content: '◆  ';
                 opacity: .4
             }

             @keyframes ticker {
                 from {
                     transform: translateX(0)
                 }

                 to {
                     transform: translateX(-50%)
                 }
             }

             /* ===== SECTIONS ===== */
             .section {
                 max-width: 1280px;
                 margin: 0 auto;
                 padding: 60px 24px
             }

             .section-tag {
                 font-size: 11px;
                 font-weight: 700;
                 color: var(--gold);
                 letter-spacing: 2.5px;
                 text-transform: uppercase;
                 margin-bottom: 6px
             }

             .section-title {
                 font-size: 28px;
                 font-weight: 800;
                 color: var(--navy);
                 line-height: 1.2
             }

             .section-sub {
                 font-size: 14px;
                 color: var(--text3);
                 margin-top: 8px;
                 line-height: 1.6;
                 max-width: 560px
             }

             .section-hd {
                 display: flex;
                 justify-content: space-between;
                 align-items: flex-end;
                 margin-bottom: 36px;
                 flex-wrap: wrap;
                 gap: 16px;
                 margin-bottom: 20px !important;
             }

             .see-all {
                 font-size: 13px;
                 font-weight: 700;
                 color: var(--gold);
                 border-bottom: 1.5px solid var(--gold);
                 padding-bottom: 1px;
                 white-space: nowrap
             }

             .see-all:hover {
                 color: var(--gold2)
             }

             .divider {
                 height: 3px;
                 width: 48px;
                 background: var(--gold);
                 border-radius: 2px;
                 margin: 10px 0 0
             }

             /* ===== STATS BAR ===== */
             .stats-bar {
                 background: var(--navy);
                 padding: 40px 0
             }

             .stats-inner {
                 max-width: 1280px;
                 margin: auto;
                 padding: 0 24px;
                 display: grid;
                 grid-template-columns: repeat(4, 1fr);
                 gap: 1px;
                 background: rgba(255, 255, 255, .08)
             }

             .stat-item {
                 background: var(--navy);
                 padding: 28px 24px;
                 text-align: center
             }

             .stat-item:first-child {
                 border-left: none
             }

             .big-num {
                 font-size: 38px;
                 font-weight: 800;
                 color: var(--gold3);
                 line-height: 1
             }

             .big-lbl {
                 font-size: 12px;
                 color: #7090aa;
                 margin-top: 6px;
                 font-weight: 600;
                 letter-spacing: .8px;
                 text-transform: uppercase
             }

             .big-desc {
                 font-size: 13px;
                 color: #4a6080;
                 margin-top: 4px
             }

             /* ===== GRID CARDS ===== */
             .two-col {
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 24px
             }

             .three-col {
                 display: grid;
                 grid-template-columns: repeat(3, 1fr);
                 gap: 24px
             }

             .four-col {
                 display: grid;
                 grid-template-columns: repeat(4, 1fr);
                 gap: 20px
             }

             .card {
                 background: var(--white);
                 border-radius: 14px;
                 border: 1px solid var(--gray2);
                 overflow: hidden;
                 transition: box-shadow .25s, transform .25s
             }

             .card:hover {
                 /* box-shadow: 0 10px 40px rgba(10, 22, 40, .12); */
                 /* transform: translateY(-3px) */
             }

             .card-hd {
                 background: var(--navy);
                 padding: 16px 20px;
                 display: flex;
                 align-items: center;
                 gap: 10px
             }

             .card-hd h3 {
                 font-size: 13px;
                 font-weight: 700;
                 color: var(--gold3);
                 letter-spacing: .6px;
                 text-transform: uppercase
             }

             .ann-item {
                 display: flex;
                 align-items: flex-start;
                 gap: 12px;
                 padding: 14px 20px;
                 border-bottom: 1px solid var(--gray1);
                 transition: background .15s
             }

             .ann-item:last-child {
                 border-bottom: none
             }

             .ann-item:hover {
                 background: var(--gray1)
             }

             .ann-dot {
                 width: 7px;
                 height: 7px;
                 border-radius: 50%;
                 background: var(--gold);
                 flex-shrink: 0;
                 margin-top: 6px
             }

             .ann-text {
                 font-size: 13px;
                 font-weight: 500;
                 color: var(--text2);
                 line-height: 1.5
             }

             .tag {
                 display: inline-block;
                 font-size: 10px;
                 font-weight: 700;
                 padding: 2px 8px;
                 border-radius: 4px;
                 margin-top: 4px;
                 letter-spacing: .5px;
                 text-transform: uppercase
             }

             .tag-new {
                 background: #fff3e0;
                 color: #b85c00
             }

             .tag-pdf {
                 background: #e8f4ff;
                 color: #1a5fa8
             }

             .tag-letter {
                 background: #e8f4ff;
                 color: #1a5fa8
             }

             .tag-circular {
                 background: #f0f8e8;
                 color: #2a7020
             }

             /* ===== SERVICES SECTION ===== */
             .services-bg {
                 background: var(--white);
                 padding: 60px 0;
                 border-top: 1px solid var(--gray2);
                 border-bottom: 1px solid var(--gray2)
             }

             .service-card {
                 background: var(--cream);
                 border-radius: 14px;
                 padding: 28px 24px;
                 border: 1px solid var(--gray2);
                 transition: all .25s;
                 text-align: center
             }

             .service-card:hover {
                 background: var(--navy);
                 border-color: var(--navy);
                 transform: translateY(-3px)
             }

             .service-icon {
                 width: 56px;
                 height: 56px;
                 background: var(--navy);
                 border-radius: 12px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 margin: 0 auto 16px;
                 transition: background .25s
             }

             .service-card:hover .service-icon {
                 background: var(--gold)
             }

             .service-icon svg {
                 width: 26px;
                 height: 26px;
                 stroke: var(--gold3);
                 transition: stroke .25s
             }

             .service-card:hover .service-icon svg {
                 stroke: var(--navy)
             }

             .service-card h4 {
                 font-size: 15px;
                 font-weight: 700;
                 color: var(--navy);
                 margin-bottom: 8px;
                 transition: color .25s
             }

             .service-card:hover h4 {
                 color: var(--white)
             }

             .service-card p {
                 font-size: 13px;
                 color: var(--text3);
                 line-height: 1.65;
                 transition: color .25s
             }

             .service-card:hover p {
                 color: #8da0bb
             }

             /* ===== PHOTO GALLERY ===== */
             .gallery-grid {
                 display: grid;
                 grid-template-columns: repeat(4, 1fr);
                 gap: 14px;
             }

             .gallery-item {
                 border-radius: 12px;
                 overflow: hidden;
                 position: relative;
                 cursor: pointer;
                 height: 200px;
             }

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

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

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

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

             .gallery-overlay span {
                 font-size: 13px;
                 font-weight: 600;
                 color: var(--white);
             }

             .lightbox {
                 position: fixed;
                 inset: 0;
                 background: rgba(0, 0, 0, .88);
                 display: none;
                 align-items: center;
                 justify-content: center;
                 padding: 20px;
                 z-index: 9999;
             }

             .lightbox.open {
                 display: flex;
             }

             .lightbox-content {
                 position: relative;
                 max-width: 1000px;
                 width: 100%;
                 max-height: 100%;
             }

             .lightbox img {
                 width: 100%;
                 height: auto;
                 max-height: calc(100vh - 120px);
                 border-radius: 14px;
                 object-fit: contain;
             }

             .lightbox-caption {
                 margin-top: 12px;
                 color: var(--white);
                 font-size: 14px;
                 text-align: center;
             }

             .lightbox-close {
                 position: absolute;
                 top: 12px;
                 right: 12px;
                 width: 36px;
                 height: 36px;
                 border: none;
                 background: rgba(255, 255, 255, .12);
                 color: white;
                 border-radius: 50%;
                 font-size: 18px;
                 cursor: pointer;
             }

             .lightbox-close:hover {
                 background: rgba(255, 255, 255, .22);
             }

             /* ===== ABOUT SECTION ===== */
             .about-grid {
                 display: grid;
                 grid-template-columns: 1fr 480px;
                 gap: 52px;
                 align-items: center
             }

             .about-img-wrap {
                 position: relative
             }

             .about-img-main {
                 border-radius: 16px;
                 overflow: hidden;
                 height: 400px
             }

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

             .about-img-badge {
                 position: absolute;
                 bottom: -20px;
                 right: -20px;
                 background: var(--navy);
                 border: 3px solid var(--gold);
                 border-radius: 14px;
                 padding: 20px 24px;
                 text-align: center
             }

             .about-img-badge .yr {
                 font-size: 32px;
                 font-weight: 800;
                 color: var(--gold3)
             }

             .about-img-badge p {
                 font-size: 11px;
                 color: #7090aa;
                 letter-spacing: 1px;
                 text-transform: uppercase;
                 margin-top: 2px
             }

             .about-text p {
                 font-size: 14px;
                 line-height: 1.9;
                 color: var(--text2);
                 margin-bottom: 16px
             }

             .about-features {
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 14px;
                 margin-top: 24px
             }

             .feat-item {
                 display: flex;
                 align-items: flex-start;
                 gap: 10px;
                 padding: 14px;
                 background: var(--gray1);
                 border-radius: 10px;
                 border: 1px solid var(--gray2)
             }

             .feat-dot {
                 width: 8px;
                 height: 8px;
                 border-radius: 50%;
                 background: var(--gold);
                 flex-shrink: 0;
                 margin-top: 5px
             }

             .feat-item span {
                 font-size: 13px;
                 font-weight: 600;
                 color: var(--text2)
             }

             /* ===== EXECUTIVE BODY ===== */
             .exec-bg {
                 background: var(--navy);
                 padding: 60px 0
             }

             .exec-hd {
                 max-width: 1280px;
                 margin: 0 auto;
                 padding: 0 24px 32px
             }

             .exec-inner {
                 max-width: 1280px;
                 margin: 0 auto;
                 padding: 0 24px
             }

             .exec-grid {
                 display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                 gap: 16px
             }

             .exec-card {
                 background: rgba(255, 255, 255, .05);
                 border: 1px solid rgba(255, 255, 255, .1);
                 border-radius: 14px;
                 padding: 22px 16px;
                 text-align: center;
                 transition: all .25s;
                 display: block;
             }

             .exec-card:hover {
                 background: rgba(184, 134, 11, .15);
                 border-color: rgba(184, 134, 11, .4);
                 transform: translateY(-3px)
             }

             .exec-card.pres {
                 border-color: rgba(240, 192, 64, .6);
                 background: rgba(184, 134, 11, .12)
             }

             .exec-avatar {
                 width: 80px;
                 height: 80px;
                 border-radius: 50%;
                 border: 2px solid var(--gold);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 margin: 0 auto 14px;
                 font-size: 16px;
                 font-weight: 800;
                 color: var(--gold3);
                 background: rgba(184, 134, 11, .15);

                 img {
                     width: 80px;
                     height: 80px;
                     border-radius: 100%;
                     object-fit: cover;
                     object-position: top;
                 }
             }

             .exec-name {
                 font-size: 13px;
                 font-weight: 700;
                 color: var(--white);
                 margin-bottom: 4px;
                 line-height: 1.3
             }

             .exec-role {
                 font-size: 10.5px;
                 color: #7090aa;
                 font-weight: 600;
                 text-transform: uppercase;
                 letter-spacing: .8px
             }

             .exec-phone {
                 font-size: 11.5px;
                 color: var(--gold);
                 margin-top: 10px;
                 font-weight: 600
             }

             /* ===== NEWS / EVENTS ===== */
             .news-card {
                 background: var(--white);
                 border-radius: 14px;
                 overflow: hidden;
                 border: 1px solid var(--gray2);
                 transition: all .25s
             }

             .news-card:hover {
                 box-shadow: 0 10px 40px rgba(10, 22, 40, .12);
                 transform: translateY(-3px)
             }

             .news-img {
                 height: 180px;
                 overflow: hidden
             }

             .news-img img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 transition: transform .4s
             }

             .news-card:hover .news-img img {
                 transform: scale(1.05)
             }

             .news-body {
                 padding: 18px 20px
             }

             .news-date {
                 font-size: 11px;
                 font-weight: 700;
                 color: var(--gold);
                 letter-spacing: 1px;
                 text-transform: uppercase;
                 margin-bottom: 8px
             }

             .news-title {
                 font-size: 15px;
                 font-weight: 700;
                 color: var(--navy);
                 line-height: 1.4;
                 margin-bottom: 8px
             }

             .news-excerpt {
                 font-size: 13px;
                 color: var(--text3);
                 line-height: 1.6
             }

             .news-link {
                 display: inline-flex;
                 align-items: center;
                 gap: 5px;
                 font-size: 12px;
                 font-weight: 700;
                 color: var(--gold);
                 margin-top: 12px
             }

             /* ===== QUICK LINKS ===== */
             .links-bg {
                 background: var(--white);
                 border-top: 1px solid var(--gray2);
                 border-bottom: 1px solid var(--gray2);
                 padding: 56px 0
             }

             .links-grid {
                 display: grid;
                 grid-template-columns: repeat(4, 1fr);
                 gap: 16px
             }

             .link-card {
                 background: var(--gray1);
                 border-radius: 12px;
                 padding: 22px 18px;
                 display: flex;
                 align-items: center;
                 gap: 14px;
                 border: 1px solid transparent;
                 transition: all .25s;
                 cursor: pointer
             }

             .link-card:hover {
                 background: var(--navy);
                 border-color: var(--gold);
                 transform: translateY(-2px)
             }

             .link-icon {
                 width: 44px;
                 height: 44px;
                 background: var(--navy);
                 border-radius: 10px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-shrink: 0;
                 transition: background .25s
             }

             .link-card:hover .link-icon {
                 background: var(--gold)
             }

             .link-icon svg {
                 width: 22px;
                 height: 22px;
                 stroke: var(--gold3);
                 transition: stroke .25s
             }

             .link-card:hover .link-icon svg {
                 stroke: var(--navy)
             }

             .link-label {
                 font-size: 13px;
                 font-weight: 700;
                 color: var(--text);
                 transition: color .25s;
                 line-height: 1.4
             }

             .link-card:hover .link-label {
                 color: var(--white)
             }

             /* ===== CONTACT SECTION ===== */
             .contact-bg {
                 background: var(--navy);
                 padding: 60px 0
             }

             .contact-inner {
                 max-width: 1280px;
                 margin: auto;
                 padding: 0 24px;
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 52px;
                 align-items: start
             }

             .contact-info h3 {
                 font-size: 24px;
                 font-weight: 800;
                 color: var(--white);
                 margin-bottom: 8px
             }

             .contact-info p {
                 font-size: 14px;
                 color: #7090aa;
                 line-height: 1.7;
                 margin-bottom: 24px
             }

             .contact-row {
                 display: flex;
                 align-items: flex-start;
                 gap: 14px;
                 margin-bottom: 18px;
                 padding: 16px;
                 background: rgba(255, 255, 255, .05);
                 border-radius: 10px;
                 border: 1px solid rgba(255, 255, 255, .08)
             }

             .contact-icon {
                 width: 40px;
                 height: 40px;
                 background: rgba(184, 134, 11, .2);
                 border-radius: 8px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-shrink: 0
             }

             .contact-icon svg {
                 width: 20px;
                 height: 20px;
                 stroke: var(--gold3)
             }

             .c-lbl {
                 font-size: 11px;
                 font-weight: 700;
                 color: var(--gold);
                 letter-spacing: 1px;
                 text-transform: uppercase;
                 margin-bottom: 3px
             }

             .c-val {
                 font-size: 13px;
                 color: var(--white);
                 font-weight: 500
             }

             .map-wrap {
                 border-radius: 14px;
                 overflow: hidden;
                 border: 2px solid rgba(184, 134, 11, .3);
                 height: 340px;
                 background: #1a2a40;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-direction: column;
                 gap: 12px
             }

             .map-wrap svg {
                 width: 48px;
                 height: 48px;
                 stroke: var(--gold3);
                 opacity: .6
             }

             .map-wrap p {
                 font-size: 13px;
                 color: #7090aa;
                 text-align: center;
                 line-height: 1.6
             }

             .map-wrap a {
                 font-size: 13px;
                 font-weight: 700;
                 color: var(--gold3);
                 border-bottom: 1px solid rgba(240, 192, 64, .4);
                 padding-bottom: 1px
             }

             /* ===== NOTICE BOARD ===== */
             .notice-bg {
                 background: var(--gray1);
                 border-top: 1px solid var(--gray2);
                 border-bottom: 1px solid var(--gray2);
                 padding: 56px 0
             }

             .notice-inner {
                 max-width: 1280px;
                 margin: auto;
                 padding: 0 24px
             }

             .notice-grid {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
                 gap: 20px;
                 margin-top: 36px
             }

             .notice-item {
                 background: var(--white);
                 border-radius: 12px;
                 padding: 20px;
                 border-left: 4px solid var(--gold);
                 border-top: 1px solid var(--gray2);
                 border-right: 1px solid var(--gray2);
                 border-bottom: 1px solid var(--gray2);
                 transition: all .2s
             }

             .notice-item:hover {
                 box-shadow: 0 6px 24px rgba(10, 22, 40, .08);
                 transform: translateX(3px)
             }

             .notice-date {
                 font-size: 11px;
                 font-weight: 700;
                 color: var(--gold);
                 letter-spacing: 1px;
                 text-transform: uppercase;
                 margin-bottom: 8px
             }

             .notice-title {
                 font-size: 14px;
                 font-weight: 700;
                 color: var(--navy);
                 line-height: 1.4;
                 margin-bottom: 6px
             }

             .notice-desc {
                 font-size: 12.5px;
                 color: var(--text3);
                 line-height: 1.6
             }

             .notice-act {
                 display: inline-flex;
                 align-items: center;
                 gap: 4px;
                 font-size: 12px;
                 font-weight: 700;
                 color: var(--gold);
                 margin-top: 10px
             }

             /* ===== FOOTER ===== */
             footer {
                 background: #070e1c;
                 color: #5a6880;
                 padding: 52px 0 0
             }

             .footer-inner {
                 max-width: 1280px;
                 margin: auto;
                 padding: 0 24px;
                 display: grid;
                 grid-template-columns: 2.2fr 1fr 1fr 1.2fr;
                 gap: 36px;
                 margin-bottom: 36px
             }

             .footer-brand h4 {
                 font-size: 17px;
                 font-weight: 700;
                 color: var(--white);
                 margin-bottom: 10px;
                 img{
                    height:100px;
                 }
             }

             .footer-brand p {
                 font-size: 13px;
                 line-height: 1.75;
                 max-width: 290px;
                 color: #5a6880
             }

             .footer-contact {
                 margin-top: 18px
             }

             .footer-contact a {
                 display: flex;
                 align-items: center;
                 gap: 7px;
                 font-size: 12.5px;
                 color: #5a6880;
                 margin-bottom: 8px;
                 transition: color .2s
             }

             .footer-contact a:hover {
                 color: var(--gold3)
             }

             .footer-col h5 {
                 font-size: 11px;
                 font-weight: 700;
                 color: var(--gold3);
                 letter-spacing: 1.8px;
                 text-transform: uppercase;
                 margin-bottom: 16px
             }

             .footer-col a {
                 display: block;
                 font-size: 13px;
                 color: #5a6880;
                 margin-bottom: 10px;
                 transition: color .2s
             }

             .footer-col a:hover {
                 color: var(--gold3)
             }

             .footer-newsletter p {
                 font-size: 13px;
                 color: #5a6880;
                 line-height: 1.65;
                 margin-bottom: 14px
             }

             .newsletter-form {
                 display: flex;
                 gap: 8px
             }

             .newsletter-form input {
                 flex: 1;
                 padding: 10px 14px;
                 border-radius: 8px;
                 border: 1px solid #1a2840;
                 background: #0d1a2e;
                 color: var(--white);
                 font-size: 13px;
                 font-family: 'Open Sans', sans-serif
             }

             .newsletter-form input::placeholder {
                 color: #3a4860
             }

             .newsletter-form button {
                 padding: 10px 16px;
                 background: var(--gold);
                 color: var(--navy);
                 border: none;
                 border-radius: 8px;
                 font-weight: 700;
                 font-size: 13px;
                 cursor: pointer;
                 font-family: 'Open Sans', sans-serif;
                 transition: background .2s
             }

             .newsletter-form button:hover {
                 background: var(--gold2)
             }

             .footer-bottom {
                 border-top: 1px solid #111e30;
                 padding: 18px 24px;
                 max-width: 1280px;
                 margin: 0 auto;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 flex-wrap: wrap;
                 gap: 10px;
                 font-size: 12px
             }

             /* ===== RESPONSIVE ===== */
             @media(max-width:1100px) {
                 .four-col {
                     grid-template-columns: repeat(2, 1fr)
                 }

                 .footer-inner {
                     grid-template-columns: 1fr 1fr;
                     gap: 28px
                 }
             }

             @media(max-width:900px) {
                 .hero-inner {
                     grid-template-columns: 1fr;
                     gap: 32px
                 }

                 .hero-card {
                     max-width: 480px
                 }

                 .hero h2 {
                     font-size: 32px
                 }

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

                 .about-img-badge {
                     bottom: -12px;
                     right: 12px
                 }

                 .contact-inner {
                     grid-template-columns: 1fr;
                     gap: 36px
                 }

                 .notice-grid {
                     grid-template-columns: 1fr 1fr
                 }

                 .gallery-grid {
                     grid-template-columns: repeat(2, 1fr);
                     grid-auto-rows: 180px
                 }

                 .gallery-item.wide {
                     grid-column: span 2
                 }

                 .stats-inner {
                     grid-template-columns: repeat(2, 1fr)
                 }
             }

             @media(max-width:768px) {
                 nav {
                     display: none
                 }

                 .hamburger {
                     display: flex
                 }

                 .two-col,
                 .three-col {
                     grid-template-columns: 1fr
                 }

                 .links-grid {
                     grid-template-columns: repeat(2, 1fr)
                 }

                 .exec-grid {
                     grid-template-columns: repeat(2, 1fr)
                 }

                 .notice-grid {
                     grid-template-columns: 1fr
                 }

                 .topbar-right {
                     display: none
                 }

                 .hero {
                     min-height: auto
                 }

                 .hero-inner {
                     padding: 48px 24px 40px
                 }

                 .hero h2 {
                     font-size: 27px
                 }

                 .section {
                     padding: 44px 24px
                 }

                 .footer-inner {
                     grid-template-columns: 1fr
                 }

                 .gallery-grid {
                     grid-template-columns: 1fr 1fr;
                     grid-auto-rows: 160px
                 }

                 .gallery-item.wide {
                     grid-column: auto
                 }

                 .gallery-item.tall {
                     grid-row: auto
                 }
             }

             .logo-area img {
                 height: 70px;
             }

             @media(max-width:480px) {
                 .header-inner {
                     height: 64px
                 }

                 .logo-emblem {
                     width: 44px;
                     height: 44px
                 }

                 .logo-emblem span {
                     font-size: 12px
                 }

                 .logo-text h1 {
                     font-size: 14px
                 }

                 .links-grid {
                     grid-template-columns: 1fr 1fr
                 }

                 .exec-grid {
                     grid-template-columns: repeat(2, 1fr)
                 }

                 .hero h2 {
                     font-size: 24px
                 }

                 .stats-inner {
                     grid-template-columns: 1fr 1fr
                 }

                 .newsletter-form {
                     flex-direction: column
                 }

                 .four-col {
                     grid-template-columns: 1fr 1fr
                 }
             }

             #slider {
                 .owl-dots {
                     display: none;
                 }

                 .item img {
                     height: 400px;
                     object-fit: cover;
                 }

                 .owl-nav button {
                     position: absolute;
                     top: 50%;
                 }

                 .owl-nav button.owl-prev {
                     left: 10px;
                     width: 40px;
                     height: 40px;
                     background: white;

                 }

                 .owl-nav button.owl-next {
                     right: 10px;
                     width: 40px;
                     height: 40px;
                     background: white;
                 }
             }

             .gallery-item.wide.tall {
                 height: 100%;
             }
             .presidentimg , .Hony-Secretary1{
                margin-top: 30px;
                width: 150px;
             }

           

             /* ===== RESPONSIVE SIDEBAR ===== */
             .sidebar-toggle-btn {
                 display: none;
                 position: fixed;
                 top: 90px;
                 left: 20px;
                 width: 45px;
                 height: 45px;
                 background: var(--navy);
                 color: var(--gold3);
                 border: 2px solid var(--gold);
                 border-radius: 8px;
                 align-items: center;
                 justify-content: center;
                 cursor: pointer;
                 z-index: 300;
                 font-size: 22px;
                 transition: all 0.3s ease;
                 box-shadow: 0 4px 12px rgba(10, 22, 40, 0.15);
             }

             .sidebar-toggle-btn:hover {
                 background: var(--gold);
                 color: var(--navy);
                 transform: scale(1.1);
             }

             .sidebar {
                 position: fixed;
                 left: -320px;
                 top: 0;
                 width: 300px;
                 height: 100vh;
                 background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
                 box-shadow: 2px 0 20px rgba(10, 22, 40, 0.3);
                 overflow-y: auto;
                 z-index: 400;
                 transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             }

             .sidebar.active {
                 left: 0;
             }

             .sidebar-header {
                 display: none;
                 position: sticky;
                 top: 0;
                 background: rgba(10, 22, 40, 0.95);
                 padding: 16px 20px;
                 border-bottom: 2px solid var(--gold);
                 align-items: center;
                 justify-content: space-between;
                 z-index: 10;
             }

             .sidebar-header h4 {
                 color: var(--gold3);
                 font-size: 14px;
                 font-weight: 700;
                 letter-spacing: 1px;
                 text-transform: uppercase;
                 margin: 0;
             }

             .sidebar-close {
                 background: none;
                 border: none;
                 color: var(--gold3);
                 font-size: 20px;
                 cursor: pointer;
                 padding: 0;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 transition: all 0.2s;
             }

             .sidebar-close:hover {
                 color: var(--white);
             }

             .sidebar-menu {
                 padding: 16px 0;
             }

             .sidebar-item {
                 display: flex;
                 align-items: center;
                 gap: 14px;
                 padding: 14px 20px;
                 color: var(--gray3);
                 font-size: 13px;
                 font-weight: 600;
                 transition: all 0.3s ease;
                 border-left: 3px solid transparent;
                 position: relative;
             }

             .sidebar-item:hover {
                 background: rgba(184, 134, 11, 0.12);
                 color: var(--gold3);
                 border-left-color: var(--gold);
                 padding-left: 24px;
             }

             .sidebar-item i {
                 font-size: 16px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-shrink: 0;
             }

             .sidebar-item span {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }

             .sidebar-section {
                 margin-bottom: 8px;
             }

             .sidebar-section-title {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 gap: 8px;
                 padding: 14px 20px;
                 color: var(--gold3);
                 font-size: 13px;
                 font-weight: 700;
                 cursor: pointer;
                 background: rgba(184, 134, 11, 0.08);
                 border-left: 3px solid transparent;
                 transition: all 0.3s ease;
                 user-select: none;
             }

             .sidebar-section-title:hover {
                 background: rgba(184, 134, 11, 0.15);
                 border-left-color: var(--gold);
                 padding-left: 24px;
             }

             .sidebar-section-title.expanded {
                 color: var(--gold);
                 background: rgba(184, 134, 11, 0.12);
             }

             .sidebar-section-title .toggle-arrow {
                 font-size: 12px;
                 transition: transform 0.3s ease;
                 display: inline-flex;
             }

             .sidebar-section-title.expanded .toggle-arrow {
                 transform: rotate(180deg);
             }

             .sidebar-submenu {
                 max-height: 0;
                 overflow: hidden;
                 transition: max-height 0.3s ease;
             }

             .sidebar-submenu.expanded {
                 max-height: 1000px;
             }

             .sidebar-subitem {
                 display: flex;
                 align-items: flex-start;
                 gap: 10px;
                 padding: 10px 20px 10px 40px;
                 color: var(--gray3);
                 font-size: 12px;
                 font-weight: 500;
                 transition: all 0.2s ease;
                 border-left: 2px solid transparent;
                 cursor: pointer;
             }

             .sidebar-subitem:hover {
                 background: rgba(184, 134, 11, 0.08);
                 color: var(--gold3);
                 border-left-color: var(--gold);
                 padding-left: 48px;
             }

             .sidebar-subitem i {
                 font-size: 12px;
                 flex-shrink: 0;
                 margin-top: 2px;
             }

             .sidebar-subtext {
                 font-size: 11px;
                 color: var(--gray4);
                 margin-top: 2px;
                 line-height: 1.3;
             }

             .sidebar-divider {
                 height: 1px;
                 background: rgba(184, 134, 11, 0.2);
                 margin: 12px 0;
             }

             /* Mobile Sidebar Container */
             .sidebar-container {
                 display: flex;
                 gap: 24px;
                 width: 100%;
             }

             .sidebar-container .sidebar {
                 flex-shrink: 0;
                     position: sticky;
    top: 75px;
      overflow: auto;
    height: 87vh;
             }

             .sidebar-container > *:not(.sidebar) {
                 flex: 1;
                 min-width: 0;
             }

             /* Responsive Sidebar - Mobile */
             @media (max-width: 768px) {
                 .sidebar-toggle-btn {
                     display: flex;
                 }

                 .sidebar-header {
                     display: flex;
                 }

                 .container {
                     padding-left: 20px;
                     padding-right: 20px;
                 }

                 .sidebar-container {
                     flex-direction: column;
                     gap: 0;
                 }

                 .sidebar-container .sidebar {
                     margin-right: 0;
                 }
             }

             /* Responsive Sidebar - Tablet & Desktop */
             @media (min-width: 769px) {
                 .sidebar {
                     position: relative;
                     left: auto;
                     width: 280px;
                     height: auto;
                     box-shadow: none;
                     background: linear-gradient(135deg, var(--cream) 0%, var(--gray1) 100%);
                     border-right: 2px solid var(--gray2);
                     border-radius: 0px;
                     overflow: visible;
                     top: 0;
                 }

                 .sidebar.active {
                     left: auto;
                 }

                 .sidebar-toggle-btn {
                     display: none !important;
                 }

                 .sidebar-header {
                     display: none;
                 }

                 .sidebar-menu {
                     padding: 12px 0;
                 }

                 .sidebar-item {
                     padding: 12px 16px;
                     color: var(--navy);
                     font-size: 12px;
                     border-left: none;
                     border-radius: 0;
                 }

                 .sidebar-item:hover {
                     background: rgba(184, 134, 11, 0.08);
                     color: var(--gold);
                     border-left-color: transparent;
                     padding-left: 16px;
                 }

                 .sidebar-item i {
                     color: var(--gold);
                 }

                 .sidebar-divider {
                     background: rgba(10, 22, 40, 0.1);
                     margin: 8px 0;
                 }

                 /* Sidebar Container Layout */
                 .sidebar-container {
                     display: flex;
                     gap: 0px;
                     align-items: flex-start;
                 }

                 .sidebar-container .sidebar {
                     flex-shrink: 0;
                     margin-right: 0;
                 }

                 .sidebar-container > *:not(.sidebar) {
                     flex: 1;
                 }
             }

             @media (min-width: 1024px) {
                 .sidebar {
                     width: 300px;
                 }

                 .sidebar-menu {
                     padding: 16px 0;
                 }

                 .sidebar-item {
                     padding: 14px 18px;
                     font-size: 13px;
                 }
             }

             /* Close sidebar on mobile when clicking outside */
             @media (max-width: 768px) {
                 body.sidebar-open {
                     overflow: hidden;
                 }

                 .sidebar {
                     transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                 }
             }


               @media (max-width: 575px) {
                .sidebar-container .sidebar{
                    position: fixed!important;    
                    left:-300px;
                    top:58px;
                        height: 92vh;
                }
                .sidebar-open .sidebar{
left:0px;
                }
                .sidebar-header{
                    display:none;
                }
               
                .sidebar-toggle-btn{
                        top: 9px!important;
    right: 15px!important;
    left:auto!important;
                }
                    .section {
        padding: 15px;
        MARGIN-TOP: 117PX;
    }
              
                 .logo-area img {
                     height: 23px;
                     transform: scale(1.1);
                 }

                 header {
                     .row.align-items-center {
                         height: 58px !important;
                     }

                     .header-inner {
                         height: 58px;
                     }
                 }

                 .topbar-inner {
                     padding: 0px;
                 }

                 .hero h2 {
                     text-align: center;
                     font-size: 29px;
                     line-height: normal;

                     br {
                         display: none;
                     }
                 }

                 .hero-badge-col {
                     text-align: center;
                 }

                 .hero-btns {
                     justify-content: center;
                 }
                 #slider {
    .item img {
        height: 300px;
        object-fit: cover;
    }
}
    .logo-area img {
        height: 47px;
        transform: scale(1.1);
    }
        .section {
        padding: 15px;
    }
    ol{
        margin:0px!important;
    }
    .topbar{
            height: 60px;
    position: fixed;
    top: 0px;
    background:white;
    width: 100%;
    z-index: 11;
.container{
    display:none;
}
}
    header{
            position: fixed;
    width: 100%;
    top: 59px;
    }
             }