@import "bootstrap/dist/css/bootstrap.min.css";

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #F6F6F8;
    color: #0F1B2E;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

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

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

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

::selection {
    background: #E53232;
    color: #fff;
}

.container {
    max-width: 1512px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

header.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #F0F0F2;
    box-shadow: 0 2px 6px rgba(15, 27, 46, 0.03);
    width: 100%;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 16px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 0;
}

.logo-text-jp {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.logo-text-en {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #E53232;
    text-transform: uppercase;
    white-space: nowrap;
}

nav.desktop-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14.5px;
    font-weight: 500;
    flex-wrap: nowrap;
}

.nav-link {
    position: relative;
    padding: 8px 2px;
    color: #0F1B2E;
    transition: color .2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    font-size: 14.5px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

.nav-link:hover {
    color: #E53232;
}

.nav-link.active {
    color: #E53232;
    font-weight: 600;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: #E53232;
    transition: width .2s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 180px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 27, 46, 0.14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .18s ease;
    z-index: 60;
}

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

.dropdown-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0F1B2E;
    transition: background .15s ease, color .15s ease;
}

.dropdown-menu a:hover {
    background: #FBEAEA;
    color: #E53232;
}

.caret {
    width: 11px;
    height: 11px;
    margin-top: 1px;
}

.login-link {
    font-size: 14.5px;
    font-weight: 600;
    color: #0F1B2E;
    transition: color .2s ease;
    white-space: nowrap;
}

.login-link:hover {
    color: #E53232;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.hamburger-btn {
    display: none;
    padding: 8px;
    color: #0F1B2E;
    flex-shrink: 0;
}

.hamburger-btn svg {
    width: 26px;
    height: 26px;
}

.mobile-menu {
    display: none;
    border-top: 1px solid #F0F0F2;
    background: #fff;
}

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

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 500;
}

.mobile-menu nav a {
    padding: 12px 0;
    border-bottom: 1px solid #F3F3F5;
}

.mobile-menu nav a:last-child {
    border-bottom: none;
    font-weight: 600;
    color: #E53232;
}

.mobile-menu nav a.active {
    color: #E53232;
    font-weight: 600;
}

.admin-body {
    margin: 0;
    background: #f6f7fb;
    color: #101828;
}

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
}

.admin-sidebar {
    background: linear-gradient(180deg, #111824 0%, #0c1420 100%);
    color: #fff;
    padding-top: 78px;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

.admin-sidebar-inner {
    padding: 28px 12px;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    padding: 4px 14px 28px;
}

.admin-sidebar-link span:last-child {
    font-size: 15px;
}

.admin-sidebar-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.admin-sidebar-icon svg {
    width: 20px;
    height: 20px;
}

.admin-nav-group+.admin-nav-group {
    margin-top: 28px;
}

.admin-nav-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 12px 12px;
}

.admin-nav-card {
    border-radius: 10px;
    padding: 0 0 2px;
}

.admin-nav-card.active {
    background: transparent;
}

.admin-nav-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0f1722;
    color: #fff;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
}

.admin-nav-card.active .admin-nav-title {
    background: linear-gradient(90deg, #e41818 0%, #ff3333 100%);
}

.admin-nav-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-nav-post-icon {
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 5px;
    width: 22px;
    height: 22px;
    padding: 3px;
}

.admin-nav-caret {
    font-size: 16px;
    line-height: 1;
    opacity: 0.9;
}

.admin-subnav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0 0 32px;
}

.admin-subnav a {
    position: relative;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 500;
    padding-left: 18px;
}

.admin-subnav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}

.admin-subnav a.active {
    color: #ff3b30;
}

.admin-subnav a.active::before {
    background: #ff3b30;
}

.admin-main {
    min-width: 0;
}

.admin-topbar {
    height: 78px;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px 0 28px;
    border-bottom: 1px solid #e9ecf2;
}

.admin-topbar-left,
.admin-topbar-right,
.admin-profile {
    display: flex;
    align-items: center;
}

.admin-topbar-left {
    gap: 22px;
}

.admin-topbar-left h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #171f2e;
}

.admin-menu-button {
    width: 26px;
    height: 26px;
    color: #171f2e;
}

.admin-menu-button svg {
    width: 24px;
    height: 24px;
}

.admin-topbar-right {
    gap: 24px;
}

.admin-brand {
    padding-right: 24px;
    border-right: 1px solid #e5e7eb;
}

.admin-brand img {
    width: 153px;
}

.admin-profile {
    gap: 12px;
}

.admin-profile strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    color: #111827;
}

.admin-profile span {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.admin-profile img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-profile-caret {
    color: #111827;
    font-size: 16px;
    margin-left: 2px;
}

.admin-logout-form {
    margin: 0;
}

.admin-logout-button {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #344054;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
}

.admin-content {
    padding: 18px 18px 14px;
}

.admin-hero-card,
.admin-table-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}

.admin-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 18px;
    margin-bottom: 16px;
}

.admin-hero-card h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    color: #151d2c;
}

.admin-hero-card p {
    margin: 8px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.admin-add-button {
    background: linear-gradient(90deg, #eb1616 0%, #ff3434 100%);
    color: #fff;
    padding: 13px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.22);
}

.admin-table-card {
    padding: 18px;
}

.admin-filters {
    display: grid;
    grid-template-columns: minmax(220px, 310px) 12px 190px 190px 215px 12px 90px;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.admin-search-box,
.admin-select,
.admin-reset-button {
    height: 44px;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    background: #fff;
}

.admin-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

.admin-search-box svg {
    width: 18px;
    height: 18px;
    color: #6b7280;
    flex-shrink: 0;
}

.admin-search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #374151;
    background: transparent;
}

.admin-select,
.admin-reset-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #4b5563;
    font-size: 14px;
}

.admin-filter-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d5d9e1;
    justify-self: center;
}

.admin-reset-button {
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

.admin-success {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #ecfdf3;
    color: #027a48;
    border: 1px solid #b7ebc6;
    font-size: 14px;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.admin-dashboard-table thead th {
    text-align: left;
    padding: 16px 12px;
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.admin-dashboard-table tbody td {
    padding: 14px 12px;
    border-top: 1px solid #eef1f4;
    vertical-align: middle;
    font-size: 14px;
    color: #1f2937;
}

.admin-post-cell,
.admin-author-cell,
.admin-actions,
.admin-date-cell {
    display: flex;
    align-items: center;
}

.admin-post-cell {
    gap: 16px;
    min-width: 280px;
}

.admin-post-cell img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.admin-post-cell span {
    font-weight: 500;
    color: #172033;
}

.admin-author-cell {
    gap: 12px;
    min-width: 170px;
}

.admin-author-cell img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 500;
}

.admin-badge-events {
    background: #ffe8e8;
    color: #ff4d4f;
}

.admin-badge-news {
    background: #e7f0ff;
    color: #3b82f6;
}

.admin-badge-tournaments {
    background: #fff0dd;
    color: #f59e0b;
}

.admin-badge-announcements {
    background: #e6f8eb;
    color: #22a55b;
}

.admin-badge-meetings {
    background: #efe7ff;
    color: #8b5cf6;
}

.admin-badge-grading {
    background: #dff7fb;
    color: #06b6d4;
}

.admin-badge-articles {
    background: #fff1db;
    color: #f59e0b;
}

.admin-tags {
    color: #4b5563;
    line-height: 1.55;
    max-width: 200px;
}

.admin-date-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 110px;
}

.admin-date-cell small {
    color: #6b7280;
    font-size: 12px;
}

.admin-actions {
    gap: 16px;
    justify-content: flex-start;
}

.admin-actions button {
    color: #111827;
    font-size: 14px;
    line-height: 1;
}

.admin-actions .danger {
    color: #ef4444;
}

.admin-table-footer,
.admin-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-table-footer {
    padding: 16px 12px 2px;
    gap: 16px;
}

.admin-table-footer p {
    color: #374151;
    font-size: 14px;
}

.admin-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-pagination button {
    width: 30px;
    height: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    font-size: 14px;
}

.admin-pagination button.active {
    background: #ef2424;
    border-color: #ef2424;
    color: #fff;
}

.admin-footer {
    padding: 22px 8px 0;
    color: #8a92a6;
    font-size: 13px;
}

/* =========================================================
   IKAK Events Directory Page
   Namespaced under .events-page to avoid conflicts
   ========================================================= */

.events-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  background: #F8F9FA;
  color: #0F172A;
  padding: 40px 24px 64px;
}

.events-page *,
.events-page *::before,
.events-page *::after {
  box-sizing: border-box;
}

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

.events-page a {
  text-decoration: none;
}

/* ===================== Page Header ===================== */
.events-page .events-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}

.events-page .events-heading {
  font-size: 32px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.events-page .events-subheading {
  font-size: 14.5px;
  color: #6B7280;
  margin: 0;
  line-height: 1.6;
}

/* ===================== Section ===================== */
.events-page .events-section {
  max-width: 1400px;
  margin: 0 auto 56px;
}

.events-page .events-section:last-child {
  margin-bottom: 0;
}

.events-page .section-title-wrap {
  border-left: 4px solid #D71920;
  padding-left: 14px;
  margin-bottom: 24px;
}

.events-page .section-title {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

/* ===================== Events Grid ===================== */
.events-page .events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ===================== Event Card ===================== */
.events-page .event-card {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
  min-width: 0;
}

.events-page .event-card:hover {
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  transform: translateY(-4px);
}

.events-page .event-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #E9E9EC;
  overflow: hidden;
  flex-shrink: 0;
}

.events-page .event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================== Date Badge ===================== */
.events-page .event-date-badge {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -32px 0 0 16px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.events-page .badge-day {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.events-page .badge-month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.events-page .badge-year {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 1px;
}

.events-page .badge-pink {
  background: #FCE4E7;
  color: #D71920;
}

.events-page .badge-blue {
  background: #E1EEFC;
  color: #1D4ED8;
}

.events-page .badge-green {
  background: #E3F6EA;
  color: #15803D;
}

/* ===================== Card Body ===================== */
.events-page .event-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.events-page .event-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
}

.events-page .title-red { color: #D71920; }
.events-page .title-blue { color: #1D4ED8; }
.events-page .title-green { color: #15803D; }
.events-page .title-purple { color: #7C3AED; }

.events-page .event-location {
  font-size: 12px;
  color: #6B7280;
  margin: 0 0 8px;
}

.events-page .event-desc {
  font-size: 12.5px;
  color: #4B5563;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

/* ===================== View Details Button ===================== */
.events-page .btn-view-details {
  display: block;
  width: 100%;
  text-align: center;
  background: #D71920;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 0;
  border-radius: 8px;
  margin-top: auto;
  transition: background .2s ease;
}

.events-page .btn-view-details:hover {
  background: #b8151b;
}

/* ===================== Responsive ===================== */
@media (max-width: 1180px) {
  .events-page .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .events-page {
    padding: 28px 16px 48px;
  }

  .events-page .events-heading {
    font-size: 24px;
  }

  .events-page .events-subheading {
    font-size: 13px;
  }

  .events-page .events-grid {
    grid-template-columns: 1fr;
  }

  .events-page .events-section {
    margin-bottom: 40px;
  }
}

@media (max-width: 1200px) {
    .admin-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-filter-dot {
        display: none;
    }
}

@media (max-width: 991px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        display: none;
    }

    .admin-topbar,
    .admin-hero-card,
    .admin-footer {
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-topbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .admin-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-content {
        padding: 12px;
    }

    .admin-table-card,
    .admin-hero-card {
        padding: 14px;
    }

    .admin-brand {
        border-right: none;
        padding-right: 0;
    }

    .admin-topbar-right {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 991px) {
    .events-page-grid {
        grid-template-columns: 1fr;
    }

    .events-scroll-arrow {
        display: none;
    }
}

@media (max-width: 767px) {
    .events-page-hero {
        padding: 24px 20px;
    }

    .events-page-hero h1 {
        font-size: 30px;
    }

    .events-page-card {
        flex-direction: column;
    }

    .events-scroll-card {
        flex-basis: 260px;
        height: 180px;
    }
}

.admin-form-page {
    min-height: 100vh;
    background: #f6f7fb;
    padding: 36px 16px;
}

.admin-inner-page {
    min-height: auto;
}

.admin-form-shell {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e9edf4;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    padding: 30px;
}

.admin-form-header,
.admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-form-header {
    margin-bottom: 24px;
}

.admin-form-header h1 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #172033;
}

.admin-form-header p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

.admin-form-back {
    border: 1px solid #dbe1ea;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 600;
    color: #344054;
    background: #fff;
}

.admin-form-error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.admin-form-error p+p {
    margin-top: 6px;
}

.admin-post-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-form-field.full-width {
    grid-column: span 2;
}

.admin-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-form-field label {
    font-size: 14px;
    font-weight: 600;
    color: #344054;
}

.admin-form-field input,
.admin-form-field textarea,
.admin-form-field select {
    width: 100%;
    border: 1px solid #dbe1ea;
    border-radius: 10px;
    background: #fff;
    padding: 13px 14px;
    font-size: 14px;
    color: #172033;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.admin-form-field textarea {
    resize: vertical;
}

.admin-form-field input:focus,
.admin-form-field textarea:focus,
.admin-form-field select:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}

.admin-user-role-admin {
    background: #ffe8e8;
    color: #ef4444;
}

.admin-user-role-editor {
    background: #e8f0ff;
    color: #2563eb;
}

.admin-user-role-user {
    background: #edf7ee;
    color: #16a34a;
}

.admin-empty-state {
    text-align: center;
    color: #667085;
    padding: 36px 12px !important;
}

.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(17, 24, 39, 0.12), transparent 30%),
        linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}

.admin-login-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    padding: 34px 30px;
}

.admin-login-brand {
    text-align: center;
    margin-bottom: 24px;
}

.admin-login-brand img {
    width: 160px;
    margin: 0 auto 18px;
}

.admin-login-brand h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    color: #172033;
}

.admin-login-brand p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

.admin-login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475467;
    font-size: 14px;
    font-weight: 500;
}

.admin-login-remember input {
    width: auto;
}

.admin-login-button {
    width: 100%;
    justify-content: center;
    text-align: center;
}

@media (max-width: 768px) {
    .admin-form-shell {
        padding: 20px;
    }

    .admin-form-header,
    .admin-form-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }
}

main.main-content {
    width: 100%;
    padding: 24px 0;
}

.main-grid {
    display: grid;
    grid-template-columns: 320px 1fr 340px;
    gap: 24px;
    align-items: start;
    width: 100%;
}

.col-left,
.col-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.col-center {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 27, 46, 0.06);
    padding: 20px;
    transition: box-shadow .2s ease;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(15, 27, 46, 0.12);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}

.card-title {
    font-size: 17px;
    font-weight: 700;
}

.card-link {
    font-size: 13px;
    font-weight: 500;
    color: #E53232;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-link:hover {
    text-decoration: underline;
}

.news-image {
    width: 100%;
    height: 176px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
}

.news-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    cursor: pointer;
    transition: color .2s ease;
}

.news-title:hover {
    color: #E53232;
}

.news-meta {
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 8px;
}

.news-meta .cat {
    color: #E53232;
    font-weight: 500;
    margin-left: 6px;
}

.news-meta .dot {
    margin: 0 6px;
}

.news-desc {
    font-size: 13px;
    color: #9CA3AF;
    line-height: 1.6;
}

.event-list {
    display: flex;
    flex-direction: column;
}

.event-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #F1F1F3;
}

.event-item:first-child {
    padding-top: 0;
}

.event-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.event-date {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-date .day {
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

.event-date .mon {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 2px;
}

.event-date.red {
    background: #FDEBEB;
    color: #E53232;
}

.event-date.blue {
    background: #E9F1FD;
    color: #2563EB;
}

.event-date.purple {
    background: #F3ECFC;
    color: #7C3AED;
}

.event-date.orange {
    background: #FEF1E6;
    color: #EA580C;
}

.event-info {
    min-width: 0;
}

.event-info h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}

.event-loc {
    font-size: 12px;
    color: #9CA3AF;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.5;
}

.event-loc svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.events-page-hero {
    margin: 26px 0 18px;
    padding: 28px 30px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f1b2e 0%, #182b45 55%, #e53232 140%);
    color: #fff;
    box-shadow: 0 20px 40px rgba(15, 27, 46, 0.16);
}

.events-page-eyebrow {
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.events-page-hero h1 {
    margin: 0;
    font-size: 38px;
    line-height: 1.1;
    font-weight: 800;
}

.events-page-copy {
    margin-top: 12px;
    max-width: 700px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.events-scroll-section {
    margin-bottom: 24px;
}

.events-scroll-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.events-scroll-head h2 {
    font-size: 22px;
    margin: 0;
}

.events-scroll-head p {
    color: #6b7280;
    font-size: 14px;
}

.events-scroll-wrap {
    position: relative;
}

.events-scroll-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 6px 8px 16px;
    scrollbar-width: none;
}

.events-scroll-list::-webkit-scrollbar {
    display: none;
}

.events-scroll-card {
    position: relative;
    flex: 0 0 300px;
    height: 200px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
}

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

.events-scroll-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    padding: 16px;
    background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.72) 100%);
}

.events-scroll-overlay-inner {
    width: 100%;
    background: rgba(10, 14, 25, 0.5);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 12px 14px;
}

.events-scroll-overlay-inner h3 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 4px;
}

.events-scroll-overlay-inner p,
.events-scroll-overlay-inner span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1.5;
}

.events-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0f1b2e;
    color: #fff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
}

.events-scroll-arrow.left {
    left: -8px;
}

.events-scroll-arrow.right {
    right: -8px;
}

.events-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}

.events-page-card,
.events-page-empty {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    padding: 20px;
}

.events-page-card {
    display: flex;
    gap: 16px;
}

.events-page-card-body h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.35;
}

.events-page-meta {
    color: #e53232;
    font-weight: 600;
    margin-bottom: 8px;
}

.events-page-location,
.events-page-description,
.events-scroll-empty,
.events-page-empty p {
    color: #6b7280;
    line-height: 1.7;
}

.events-page-description {
    margin-top: 10px;
    font-size: 14px;
}

.events-scroll-empty,
.events-page-empty {
    text-align: center;
}

.hero-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0F1B2E;
    min-height: 340px;
    display: flex;
    align-items: center;
    width: 100%;
}

.hero-banner img.bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 30%;
    opacity: 0.4;
}

.hero-banner .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0F1B2E 20%, rgba(15, 27, 46, 0.85) 55%, transparent 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 32px 40px;
    max-width: 560px;
}

.hero-content h1 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}

.hero-content .highlight {
    color: #E53232;
    font-size: 26px;
    font-weight: 800;
    font-style: italic;
    margin-bottom: 12px;
}

.hero-content p {
    color: #D1D5DB;
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 460px;
}

.btn-primary {
    display: inline-block;
    background: #E53232;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(229, 50, 50, 0.25);
    transition: all .2s ease;
}

.btn-primary:hover {
    background: #cc2424;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(229, 50, 50, 0.3);
}

.widget-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.widget-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 27, 46, 0.06);
    padding: 18px;
    transition: box-shadow .2s ease;
    min-width: 0;
}

.widget-card:hover {
    box-shadow: 0 8px 24px rgba(15, 27, 46, 0.12);
}

.widget-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.widget-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.widget-icon svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

.widget-icon.red {
    background: #EF4444;
}

.widget-icon.green {
    background: #10B981;
}

.widget-icon.blue {
    background: #3B82F6;
}

.widget-icon.purple {
    background: #A855F7;
}

.widget-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
}

.widget-seeall {
    font-size: 11.5px;
    font-weight: 600;
    color: #E53232;
    white-space: nowrap;
}

.widget-seeall:hover {
    text-decoration: underline;
}

.widget-track {
    overflow: hidden;
}

.widget-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.widget-page.hidden {
    display: none;
}

.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.member-photo {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
    background: #E5E7EB;
}

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

.badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3B82F6;
    box-shadow: 0 0 0 2px #fff;
}

.badge-dot svg {
    width: 12px;
    height: 12px;
    color: #fff;
}

.member-name {
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 5px;
}

.member-rank,
.member-tag {
    font-size: 9.5px;
    font-weight: 600;
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-tag {
    font-size: 9px;
    margin-top: 4px;
    padding: 3px 6px;
    background: #2563EB;
}

.rank-navy {
    background: #0F1B2E;
}

.rank-gray {
    background: #9CA3AF;
}

.rank-red {
    background: #E53232;
}

.widget-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #F1F1F3;
}

.nav-btn {
    font-size: 11.5px;
    font-weight: 600;
    color: #6B7280;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all .15s ease;
    font-family: 'Poppins', sans-serif;
}

.nav-btn:hover:not(:disabled) {
    color: #E53232;
    background: #FBEAEA;
}

.nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.stats-section {
    text-align: center;
    padding: 16px 0;
}

.stats-section h2 {
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.stats-section>p {
    color: #9CA3AF;
    font-size: 14px;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 32px;
}

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

.stat-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 27, 46, 0.06);
    padding: 22px 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 27, 46, 0.12);
}

.stat-num {
    font-size: 32px;
    font-weight: 800;
    color: #E53232;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 12.5px;
    font-weight: 500;
    color: #6B7280;
}

.merch-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0F1B2E;
    min-height: 200px;
    display: flex;
    align-items: center;
    width: 100%;
}

.merch-banner img.bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.5;
}

.merch-banner .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 25%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
}

.merch-content {
    position: relative;
    z-index: 2;
    padding: 32px 40px;
    max-width: 440px;
}

.merch-content h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
}

.merch-content p {
    color: #D1D5DB;
    font-size: 13.5px;
    margin-bottom: 20px;
}

.btn-outline-gold {
    display: inline-block;
    border: 2px solid #D4AF37;
    color: #D4AF37;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    transition: all .2s ease;
}

.btn-outline-gold:hover {
    background: #D4AF37;
    color: #0F1B2E;
}

.app-card {
    background: #0F1B2E;
    color: #fff;
}

.app-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.app-card>p.subtitle {
    color: #9CA3AF;
    font-size: 12.5px;
    margin-bottom: 16px;
}

.app-mock {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.app-phone {
    width: 80px;
    height: 128px;
    border-radius: 16px;
    background: #152238;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-phone .bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.app-phone .bar.top {
    width: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 4px;
}

.app-phone .bar.gold {
    width: 66%;
    background: rgba(212, 175, 55, 0.7);
}

.app-phone .bar.spacer {
    margin-top: 6px;
}

.app-phone .cta-block {
    height: 16px;
    border-radius: 6px;
    background: rgba(229, 50, 50, 0.8);
    margin-top: auto;
}

.btn-download {
    width: 100%;
    background: #E53232;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    transition: background .2s ease;
}

.btn-download:hover {
    background: #cc2424;
}

.btn-download svg {
    width: 16px;
    height: 16px;
}

.store-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.store-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #fff;
    transition: background .15s ease;
}

.store-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.store-btn svg {
    width: 15px;
    height: 15px;
}

.side-list {
    display: flex;
    flex-direction: column;
}

.side-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #F1F1F3;
}

.side-item:first-child {
    padding-top: 0;
}

.side-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.side-thumb-square {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.side-thumb-round {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.side-info {
    min-width: 0;
}

.side-info p.title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.side-info p.title.link-red {
    color: #E53232;
}

.side-info p.title.link-green {
    color: #059669;
}

.side-info p.title:hover {
    text-decoration: underline;
    cursor: pointer;
}

.side-info p.date {
    font-size: 11.5px;
    color: #9CA3AF;
    margin-top: 6px;
}

footer.site-footer {
    border-top: 1px solid #E5E7EB;
    background: #fff;
    margin-top: 8px;
    width: 100%;
}

.footer-inner {
    padding: 32px 0;
}

.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo .logo-text-jp {
    font-size: 14px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.footer-slogan {
    font-style: italic;
    font-size: 15px;
    color: #6B7280;
}

.social-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, opacity .15s ease;
}

.social-btn:hover {
    transform: translateY(-2px);
    opacity: 0.88;
}

.social-btn svg {
    width: 16px;
    height: 16px;
    color: #fff;
}

.social-btn.fb {
    background: #2563EB;
}

.social-btn.yt {
    background: #DC2626;
}

.footer-bottom {
    border-top: 1px solid #F3F4F6;
    margin-top: 24px;
    padding-top: 18px;
}

.footer-bottom p {
    font-size: 12.5px;
    color: #9CA3AF;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 1180px) {
    .main-grid {
        grid-template-columns: 260px 1fr 300px;
        gap: 18px;
    }

    nav.desktop-nav {
        gap: 18px;
    }
}

@media (max-width: 1023px) {

    nav.desktop-nav,
    .header-right .login-link {
        display: none;
    }

    .hamburger-btn {
        display: block;
    }

    .main-grid {
        grid-template-columns: 1fr;
    }

    .col-left {
        order: 2;
    }

    .col-center {
        order: 1;
    }

    .col-right {
        order: 3;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .hero-content .highlight {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 0 16px;
    }

    .header-inner {
        height: 64px;
    }

    .logo-text-jp {
        font-size: 13px;
    }

    .main-grid {
        gap: 18px;
    }

    .col-left,
    .col-center,
    .col-right {
        gap: 18px;
    }

    .hero-banner {
        min-height: 300px;
    }

    .hero-content {
        padding: 24px 22px;
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 22px;
    }

    .hero-content .highlight {
        font-size: 20px;
    }

    .hero-content p {
        font-size: 13px;
    }

    .widget-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .widget-card {
        padding: 14px;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-num {
        font-size: 26px;
    }

    .stats-section h2 {
        font-size: 24px;
    }

    .merch-content {
        padding: 24px 22px;
    }

    .merch-content h2 {
        font-size: 21px;
    }

    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-right {
        align-items: center;
    }

    .footer-bottom {
        text-align: center;
    }
}

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

    .member-name,
    .member-rank,
    .member-tag {
        font-size: 10px;
    }
}

/* ----------------------------------------------------New Styles added @14.07.26-------------------------------------- */

/* Home page Kyokushinryu Presence */
section.stats-section h2 {
    font-family: 'Singapore Sling', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* header */
.logo-img {
    max-height: 50px;
    width: auto;
    display: block;
}

/* Achievements page style */

/* ===================== Achievements Page (namespaced under .achievements-page) ===================== */
.achievements-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.achievements-page *,
.achievements-page *::before,
.achievements-page *::after {
    box-sizing: border-box;
}

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

.achievements-page a {
    text-decoration: none;
}

.achievements-page button,
.achievements-page select,
.achievements-page input {
    font-family: inherit;
}

.achievements-page button {
    cursor: pointer;
}

.achievements-page .ach-container {
    max-width: 1512px;
    margin: 0 auto;
    padding: 32px 24px 60px;
    width: 100%;
    box-sizing: border-box;
}

/* ===================== Page Header ===================== */
.achievements-page .ach-header {
    margin-bottom: 24px;
}

.achievements-page .ach-header h1 {
    font-size: 30px;
    font-weight: 800;
    color: #0F1B2E;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.achievements-page .ach-header p {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

/* ===================== Filter Bar ===================== */
.achievements-page .ach-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: nowrap;
}

.achievements-page .ach-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.achievements-page .ach-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #9CA3AF;
    pointer-events: none;
}

.achievements-page .ach-search {
    width: 100%;
    height: 48px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 0 16px 0 40px;
    font-size: 14px;
    color: #0F1B2E;
    background: #fff;
    transition: border-color .2s ease;
}

.achievements-page .ach-search:focus {
    outline: none;
    border-color: #E60023;
}

.achievements-page .ach-search::placeholder {
    color: #9CA3AF;
}

.achievements-page .ach-select {
    height: 48px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #0F1B2E;
    background: #fff;
    flex-shrink: 0;
    min-width: 150px;
    transition: border-color .2s ease;
}

.achievements-page .ach-select:focus {
    outline: none;
    border-color: #E60023;
}

.achievements-page .ach-view-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.achievements-page .ach-view-btn {
    width: 48px;
    height: 48px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    transition: all .15s ease;
}

.achievements-page .ach-view-btn svg {
    width: 18px;
    height: 18px;
}

.achievements-page .ach-view-btn:hover {
    border-color: #0F1B2E;
    color: #0F1B2E;
}

.achievements-page .ach-view-btn.active {
    background: #0F1B2E;
    border-color: #0F1B2E;
    color: #fff;
}

.achievements-page .ach-btn-clear {
    height: 48px;
    padding: 0 24px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background .2s ease;
}

.achievements-page .ach-btn-clear:hover {
    background: #E5E7EB;
}

/* ===================== Achievement Cards Grid ===================== */
.achievements-page .ach-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.achievements-page .ach-grid .achievement-card {
    flex: 0 0 calc(20% - 17.6px);
    max-width: calc(20% - 17.6px);
    background: #fff;
    border: 1px solid #ECECEE;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(15, 27, 46, 0.04);
    transition: box-shadow .2s ease, transform .2s ease;
    min-width: 0;
}

.achievements-page .achievement-card:hover {
    box-shadow: 0 10px 24px rgba(15, 27, 46, 0.1);
    transform: translateY(-2px);
}

.achievements-page .ach-photo {
    width: 100%;
    aspect-ratio: 7 / 6;
    background: #E9E9EC;
    overflow: hidden;
    flex-shrink: 0;
}

.achievements-page .ach-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.achievements-page .ach-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
}

.achievements-page .ach-name {
    font-size: 17px;
    font-weight: 700;
    color: #0F1B2E;
    margin: 0 0 4px;
}

.achievements-page .ach-country {
    font-size: 13.5px;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 12px;
}

.achievements-page .ach-country .flag {
    font-size: 15px;
    line-height: 1;
}

/* ===================== Belt Badge Colors ===================== */
.achievements-page .belt-badge {
    position: relative;
    width: 100%;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    overflow: hidden;
}

.achievements-page .belt-blue {
    background: #2563EB;
}

.achievements-page .belt-green {
    background: #16A34A;
}

.achievements-page .belt-black {
    background: #14161A;
}

.achievements-page .belt-black::after {
    content: "";
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    width: 14px;
    background: repeating-linear-gradient(90deg,
            #D4AF37 0px, #D4AF37 2px,
            transparent 2px, transparent 5px);
}

.achievements-page .ach-latest-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9CA3AF;
    border-top: 1px solid #F1F1F3;
    padding-top: 12px;
    margin: 0 0 8px;
}

.achievements-page .ach-latest {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
    flex: 1;
}

.achievements-page .ach-date {
    font-size: 11.5px;
    color: #9CA3AF;
    font-weight: 500;
}

.achievements-page .ach-desc {
    font-size: 12.5px;
    color: #4B5563;
    line-height: 1.5;
}

.achievements-page .ach-btn-view {
    display: block;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 1.5px solid #D4AF37;
    color: #B8860B;
    font-size: 12.5px;
    font-weight: 700;
    padding: 10px 0;
    border-radius: 8px;
    margin-top: auto;
    transition: background .2s ease, color .2s ease;
}

.achievements-page .ach-btn-view:hover {
    background: #D4AF37;
    color: #fff;
}

/* ===================== List View ===================== */
.achievements-page .ach-grid[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.achievements-page .ach-grid[data-view="list"] .achievement-card {
    flex-direction: row;
    align-items: stretch;
}

.achievements-page .ach-grid[data-view="list"] .ach-photo {
    width: 160px;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.achievements-page .ach-grid[data-view="list"] .ach-body {
    text-align: left;
    align-items: flex-start;
    padding: 16px 20px;
    flex: 1;
}

.achievements-page .ach-grid[data-view="list"] .ach-country {
    justify-content: flex-start;
}

.achievements-page .ach-grid[data-view="list"] .belt-badge {
    max-width: 260px;
}

.achievements-page .ach-grid[data-view="list"] .ach-latest-label {
    border-top: none;
    padding-top: 0;
}

.achievements-page .ach-grid[data-view="list"] .ach-btn-view {
    max-width: 220px;
    margin-top: 12px;
}

.achievements-page .ach-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #9CA3AF;
    font-size: 14px;
}

/* ===================== Pagination ===================== */
.achievements-page .ach-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.achievements-page .ach-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.achievements-page .ach-page-btn:hover:not(.ach-disabled):not(.ach-active) {
    border-color: #E60023;
    color: #E60023;
}

.achievements-page .ach-page-btn.ach-active {
    background: #E60023;
    border-color: #E60023;
    color: #fff;
}

.achievements-page .ach-page-btn.ach-disabled {
    color: #C7CBD1;
    cursor: not-allowed;
}

.achievements-page .ach-page-ellipsis {
    padding: 0 4px;
    color: #9CA3AF;
    font-size: 13.5px;
}

/* ===================== Responsive ===================== */
@media (max-width: 1400px) {
    .achievements-page .ach-grid .achievement-card {
        flex: 0 0 calc(25% - 16.5px);
        max-width: calc(25% - 16.5px);
    }
}

@media (max-width: 1100px) {
    .achievements-page .ach-grid .achievement-card {
        flex: 0 0 calc(33.333% - 14.7px);
        max-width: calc(33.333% - 14.7px);
    }
}

@media (max-width: 767px) {
    .achievements-page .ach-container {
        padding: 24px 16px 48px;
    }

    .achievements-page .ach-header h1 {
        font-size: 24px;
    }

    .achievements-page .ach-filter-bar {
        flex-wrap: wrap;
    }

    .achievements-page .ach-search-wrap {
        flex: 1 1 100%;
    }

    .achievements-page .ach-select {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    .achievements-page .ach-view-toggle {
        order: 3;
    }

    .achievements-page .ach-btn-clear {
        flex: 1 1 100%;
        order: 4;
    }

    .achievements-page .ach-grid .achievement-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .achievements-page .ach-grid[data-view="list"] .achievement-card {
        flex-direction: column;
    }

    .achievements-page .ach-grid[data-view="list"] .ach-photo {
        width: 100%;
        aspect-ratio: 7/6;
    }
}

        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------New Styles added @15.07.26-------------------------------------- */

/* ------------------------------------Achievement single page style----------------------------------------------------------------- */

/* ===================== Achievement Show Page (namespaced under .achievement-show-page) ===================== */
.achievement-show-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    background: #F6F6F7;
}

.achievement-show-page *,
.achievement-show-page *::before,
.achievement-show-page *::after {
    box-sizing: border-box;
}

.achievement-show-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

.achievement-show-page a {
    text-decoration: none;
}

.achievement-show-page button {
    font-family: inherit;
    cursor: pointer;
}

/* ===================== Wrapper ===================== */
.achievement-show-page .ash-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1512px;
    margin: 0 auto;
}

/* ===================== Left Profile Sidebar ===================== */
.achievement-show-page .ash-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #F6F6F7;
    border-right: 1px solid #E5E7EB;
    padding: 40px 32px;
}

.achievement-show-page .ash-profile-photo {
    width: 128px;
    height: 160px;
    border-radius: 8px;
    background: #E5E7EB;
    overflow: hidden;
    margin-bottom: 20px;
}

.achievement-show-page .ash-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.achievement-show-page .ash-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #0F1B2E;
    text-transform: uppercase;
    margin: 0 0 4px;
    line-height: 1.15;
}

.achievement-show-page .ash-rank-highlight {
    font-size: 13px;
    font-weight: 600;
    color: #E60023;
    margin: 0;
}

.achievement-show-page .ash-divider {
    border: none;
    border-top: 1px solid #E5E7EB;
    margin: 22px 0;
}

.achievement-show-page .ash-info-block {
    margin-bottom: 0;
}

.achievement-show-page .ash-info-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 8px;
}

.achievement-show-page .ash-info-value {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F1B2E;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.achievement-show-page .ash-info-value .flag {
    font-size: 16px;
    line-height: 1;
}

/* ===================== Right Content Area ===================== */
.achievement-show-page .ash-content {
    flex: 1;
    min-width: 0;
    background: #F6F6F7;
    padding: 40px 48px;
}

.achievement-show-page .ash-content-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.achievement-show-page .ash-content-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0F1B2E;
    margin: 0;
}

.achievement-show-page .ash-record-count {
    font-size: 12px;
    color: #9CA3AF;
    margin: 0;
    white-space: nowrap;
}

.achievement-show-page .ash-title-rule {
    height: 2px;
    background: #0F1B2E;
    margin-bottom: 8px;
}

/* ===================== Timeline ===================== */
.achievement-show-page .ash-timeline {
    display: flex;
    flex-direction: column;
}

.achievement-show-page .ash-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 24px 0;
    border-bottom: 1px solid #E5E7EB;
}

.achievement-show-page .ash-timeline-item:last-child {
    border-bottom: none;
}

.achievement-show-page .ash-timeline-date {
    width: 72px;
    flex-shrink: 0;
    text-align: left;
}

.achievement-show-page .ash-timeline-year {
    font-size: 26px;
    font-weight: 800;
    color: #0F1B2E;
    line-height: 1;
    margin: 0 0 4px;
}

.achievement-show-page .ash-timeline-month {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0;
}

.achievement-show-page .ash-timeline-body {
    min-width: 0;
    padding-top: 4px;
}

.achievement-show-page .ash-timeline-title {
    font-size: 14.5px;
    color: #1F2937;
    line-height: 1.6;
    margin: 0;
}

.achievement-show-page .ash-timeline-sub {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin: 2px 0 0;
}

/* ===================== Timeline Pagination ===================== */
.achievement-show-page .ash-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.achievement-show-page .ash-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.achievement-show-page .ash-page-btn:hover:not(.ash-active) {
    border-color: #E60023;
    color: #E60023;
}

.achievement-show-page .ash-page-btn.ash-active {
    background: #E60023;
    border-color: #E60023;
    color: #fff;
}

/* ===================== Bottom Member Nav ===================== */
.achievement-show-page .ash-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1512px;
    margin: 0 auto;
    padding: 20px 32px 20px 32px;
}

.achievement-show-page .ash-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: #0F1B2E;
    transition: all .15s ease;
}

.achievement-show-page .ash-nav-btn:hover {
    border-color: #0F1B2E;
    background: #F3F4F6;
}

.achievement-show-page .ash-bottom-bar {
    height: 3px;
    background: #0F1B2E;
    width: 100%;
}

/* ===================== Responsive ===================== */
@media (max-width: 900px) {
    .achievement-show-page .ash-wrap {
        flex-direction: column;
    }

    .achievement-show-page .ash-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 28px 24px;
    }

    .achievement-show-page .ash-profile-photo {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .achievement-show-page .ash-sidebar-info {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        flex: 1;
    }

    .achievement-show-page .ash-divider {
        display: none;
    }

    .achievement-show-page .ash-content {
        padding: 28px 24px;
    }
}

@media (max-width: 600px) {
    .achievement-show-page .ash-sidebar {
        flex-direction: column;
        align-items: flex-start;
    }

    .achievement-show-page .ash-sidebar-info {
        flex-direction: column;
        gap: 16px;
    }

    .achievement-show-page .ash-content {
        padding: 24px 16px;
    }

    .achievement-show-page .ash-content-head {
        flex-wrap: wrap;
        gap: 6px;
    }

    .achievement-show-page .ash-timeline-item {
        gap: 16px;
    }

    .achievement-show-page .ash-timeline-date {
        width: 56px;
    }

    .achievement-show-page .ash-timeline-year {
        font-size: 21px;
    }

    .achievement-show-page .ash-bottom-nav {
        padding: 16px;
    }

    .achievement-show-page .ash-nav-btn {
        padding: 0 14px;
        font-size: 12.5px;
    }
}


/* ----------------------------------------Event page style-------------------- */
/* =====================================================================
   IKAK EVENTS DIRECTORY PAGE STYLES
   Namespaced under .events-page to avoid conflicts with other pages.
   Add this block to: resources/css/app.css
===================================================================== */

.events-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background: #F8F9FA;
}

.events-page *,
.events-page *::before,
.events-page *::after {
    box-sizing: border-box;
}

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

.events-page a {
    text-decoration: none;
}

.events-page .events-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    width: 100%;
}

/* ===================== Page Heading ===================== */
.events-page .events-header {
    text-align: center;
    margin-bottom: 40px;
}

.events-page .events-heading {
    font-size: 32px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.events-page .events-subheading {
    font-size: 14.5px;
    color: #6B7280;
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ===================== Section Titles ===================== */
.events-page .events-section {
    margin-bottom: 48px;
}

.events-page .events-section:last-child {
    margin-bottom: 0;
}

.events-page .events-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    border-left: 4px solid #D71920;
    padding-left: 12px;
    margin: 0 0 22px;
    line-height: 1.3;
}

/* ===================== Event Grid ===================== */
.events-page .events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* ===================== Event Card ===================== */
.events-page .event-card {
    background: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
}

.events-page .event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.events-page .event-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #E5E7EB;
    overflow: hidden;
    flex-shrink: 0;
}

.events-page .event-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================== Date Badge ===================== */
.events-page .event-date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 54px;
    border-radius: 8px;
    padding: 8px 6px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.events-page .event-day {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
}

.events-page .event-month {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #D71920;
    margin-top: 2px;
}

.events-page .event-year {
    font-size: 8.5px;
    font-weight: 600;
    color: #6B7280;
    margin-top: 1px;
}

.events-page .badge-pink {
    background: #FCE8E8;
}

.events-page .badge-blue {
    background: #E4EDFB;
}

.events-page .badge-green {
    background: #E4F5E9;
}

/* ===================== Card Body ===================== */
.events-page .event-body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.events-page .event-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.4;
    margin: 0 0 6px;
}

.events-page .event-location {
    font-size: 12px;
    color: #9CA3AF;
    margin: 0 0 10px;
    line-height: 1.5;
}

.events-page .event-desc {
    font-size: 12.5px;
    color: #6B7280;
    line-height: 1.55;
    margin: 0 0 16px;
    flex: 1;
}

.events-page .event-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #D71920;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 8px;
    margin-top: auto;
    transition: background 0.2s ease;
}

.events-page .event-btn:hover {
    background: #b31419;
}

/* ===================== Responsive ===================== */
@media (max-width: 1180px) {
    .events-page .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .events-page .events-container {
        padding: 32px 16px 48px;
    }

    .events-page .events-heading {
        font-size: 24px;
    }

    .events-page .events-subheading {
        font-size: 13px;
    }

    .events-page .events-grid {
        grid-template-columns: 1fr;
    }

    .events-page .event-image-wrap {
        aspect-ratio: 16 / 10;
    }
}

/* -------------------------------------------------------------Events Single page ------------------- */
/* ==========================================================================
       Event Single Details Page — scoped styles
       ========================================================================== */
.event-page {
    font-family: 'Poppins', sans-serif;
    background-color: #F9FAFB;
    color: #111827;
    padding: 32px 0 64px;
}

.event-page * {
    box-sizing: border-box;
}

.event-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Top grid: main content + sidebar ---------- */
.event-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 28px;
    align-items: start;
}

/* ---------- Main content (left) ---------- */
.event-main {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
}

.event-category {
    display: inline-block;
    color: #E11D48;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.event-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
    margin: 0 0 12px;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.event-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D1D5DB;
    display: inline-block;
}

.event-featured-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #111827;
}

.event-featured-image img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.event-location {
    font-size: 14px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.event-location svg {
    flex-shrink: 0;
    color: #E11D48;
}

.event-description {
    font-size: 14.5px;
    line-height: 1.8;
    color: #374151;
    border-top: 1px solid #E5E7EB;
    padding-top: 20px;
}

/* ---------- Sidebar (right) ---------- */
.event-sidebar-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
    position: sticky;
    top: 20px;
}

.event-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #111827;
    margin-bottom: 16px;
}

.event-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 13px;
    color: #6B7280;
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F6;
    gap: 16px;
}

.event-detail-row span {
    flex-shrink: 0;
}

.event-detail-row strong {
    color: #111827;
    font-weight: 600;
    text-align: right;
}

.event-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.event-btn-outline {
    background: #ffffff;
    color: #111827;
    border-color: #E5E7EB;
}

.event-btn-outline:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.event-btn-primary {
    background: #E11D48;
    color: #ffffff;
}

.event-btn-primary:hover {
    background: #BE123C;
}

.event-share {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #E5E7EB;
}

.event-share-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.event-share-icons {
    display: flex;
    gap: 10px;
}

.event-share-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
}

.event-share-icons a:hover {
    background: #E11D48;
    border-color: #E11D48;
    color: #ffffff;
}

/* ---------- Related Events ---------- */
.related-events-section {
    margin-top: 40px;
}

.related-events-heading {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
}

.related-events-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.related-event-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.related-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.08);
    border-color: #E5E7EB;
}

.related-event-thumb {
    width: 100%;
    height: 100px;
    background: #F3F4F6;
    overflow: hidden;
}

.related-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.related-event-card:hover .related-event-thumb img {
    transform: scale(1.06);
}

.related-event-body {
    padding: 12px 14px 16px;
}

.related-event-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #E11D48;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-event-date {
    font-size: 12px;
    color: #9CA3AF;
}

/* ---------- Pagination ---------- */
.event-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.event-pagination a,
.event-pagination span.dots {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    border: 1px solid #E5E7EB;
    background: #ffffff;
    transition: all 0.2s ease;
}

.event-pagination a:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.event-pagination a.active {
    background: #E11D48;
    border-color: #E11D48;
    color: #ffffff;
}

.event-pagination span.dots {
    border: none;
    background: transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .event-grid {
        grid-template-columns: 1fr;
    }

    .event-sidebar-card {
        position: static;
    }

    .related-events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {

    .event-main,
    .event-sidebar-card {
        padding: 18px;
    }

    .event-title {
        font-size: 22px;
    }

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

@media (max-width: 400px) {
    .related-events-grid {
        grid-template-columns: 1fr;
    }
}


/* -----------------------------Birthday see all----------------- */
/* ===================== Members / Birthdays Page (namespaced under .members-page) ===================== */
.members-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background: #FFFFFF;
}

.members-page *,
.members-page *::before,
.members-page *::after {
    box-sizing: border-box;
}

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

.members-page button {
    font-family: inherit;
    cursor: pointer;
}

.members-page .mp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    width: 100%;
}

/* ===================== Page Header ===================== */
.members-page .mp-header {
    text-align: center;
    margin-bottom: 32px;
}

.members-page .mp-heading {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    letter-spacing: -0.01em;
}

.members-page .mp-heading .mp-highlight {
    color: #E31B23;
}

/* ===================== Birthday Grid ===================== */
.members-page .mp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 40px;
}

/* ===================== Birthday Card ===================== */
.members-page .birthday-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 0;
}

.members-page .birthday-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(17, 24, 39, 0.14);
}

.members-page .bc-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #E5E7EB;
    border-radius: 16px 16px 0 0;
}

.members-page .bc-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.members-page .birthday-card:hover .bc-photo-wrap img {
    transform: scale(1.08);
}

.members-page .bc-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%);
}

.members-page .bc-name-on-image {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.members-page .bc-body {
    padding: 12px 14px 16px;
}

.members-page .bc-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #4B5563;
    margin: 0 0 10px;
}

.members-page .bc-country .flag {
    font-size: 14px;
    line-height: 1;
}

.members-page .belt-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}

.members-page .belt-orange {
    background: #F97316;
}

.members-page .belt-blue {
    background: #2563EB;
}

.members-page .belt-yellow {
    background: #CA8A04;
}

.members-page .belt-black {
    background: #111827;
}

.members-page .belt-green {
    background: #16A34A;
}

.members-page .bc-dojo {
    font-size: 12px;
    color: #6B7280;
    margin: 0 0 6px;
}

.members-page .bc-countdown {
    font-size: 12.5px;
    font-weight: 600;
    color: #E31B23;
    margin: 0;
}

/* ===================== Pagination ===================== */
.members-page .mp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.members-page .mp-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.members-page .mp-page-btn:hover:not(.mp-active):not(.mp-disabled) {
    border-color: #E31B23;
    color: #E31B23;
}

.members-page .mp-page-btn.mp-active {
    background: #E31B23;
    border-color: #E31B23;
    color: #FFFFFF;
}

.members-page .mp-page-btn.mp-disabled {
    color: #D1D5DB;
    cursor: not-allowed;
}

.members-page .mp-page-ellipsis {
    padding: 0 4px;
    color: #9CA3AF;
    font-size: 13px;
}

/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
    .members-page .mp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .members-page .mp-container {
        padding: 28px 16px 48px;
    }

    .members-page .mp-heading {
        font-size: 17px;
    }

    .members-page .mp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .members-page .bc-name-on-image {
        font-size: 12.5px;
    }

    .members-page .bc-body {
        padding: 10px 10px 12px;
    }

    .members-page .bc-country,
    .members-page .bc-dojo,
    .members-page .bc-countdown { font-size: 11px; }
    .members-page .belt-badge { font-size: 9.5px; padding: 3px 8px; }
  }


 /* ------------------------------New Style Add @16.07.26---------------------------------- */
 /* ----------------------------------Birthday single page style-------------------------------------------------------------------- */
  /* ===================== Birthday Celebration Page (namespaced under .birthday-show-page) ===================== */
  .birthday-show-page { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; font-family: 'Poppins', sans-serif; background: #FFFFFF; position: relative; }
  .birthday-show-page *, .birthday-show-page *::before, .birthday-show-page *::after { box-sizing: border-box; }
  .birthday-show-page img { max-width: 100%; height: auto; display: block; }

  .birthday-show-page .bday-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 72px;
    width: 100%;
    position: relative;
  }

  /* ===================== Confetti Layer ===================== */
  .birthday-show-page .confetti-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 480px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
  }
  .birthday-show-page .confetti-piece {
    position: absolute;
    top: -30px;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: bdayConfettiFall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
  }
  .birthday-show-page .confetti-piece.shape-rect {
    width: 8px;
    height: 14px;
    border-radius: 2px;
  }
  .birthday-show-page .confetti-piece.shape-circle {
    width: 9px;
    height: 9px;
    border-radius: 50%;
  }
  .birthday-show-page .confetti-piece.shape-emoji {
    font-size: 18px;
    line-height: 1;
  }

  @keyframes bdayConfettiFall {
    0%   { opacity: 0; transform: translate(0, -30px) rotate(0deg); }
    8%   { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--drift, 40px), 460px) rotate(540deg); }
  }

  /* ===================== Top Heading Section ===================== */
  .birthday-show-page .bday-hero {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 36px;
    opacity: 0;
    animation: bdayFadeInUp 0.7s ease forwards;
    animation-delay: 0.1s;
  }
  .birthday-show-page .bday-heading {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .birthday-show-page .bday-subheading {
    font-size: 14px;
    color: #9CA3AF;
    margin: 0;
  }

  /* ===================== Fade In ===================== */
  @keyframes bdayFadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .birthday-show-page .bday-fade {
    opacity: 0;
    animation: bdayFadeInUp 0.7s ease forwards;
  }
  .birthday-show-page .bday-fade-delay-1 { animation-delay: 0.2s; }
  .birthday-show-page .bday-fade-delay-2 { animation-delay: 0.35s; }

  /* ===================== Main Two Column Layout ===================== */
  .birthday-show-page .bday-main-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
  }

  /* ===================== Left: Profile Image Card ===================== */
  .birthday-show-page .bday-photo-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    background: #E5E7EB;
    box-shadow: 0 4px 16px rgba(17,24,39,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .birthday-show-page .bday-photo-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 16px 32px rgba(17,24,39,0.14);
  }
  .birthday-show-page .bday-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .birthday-show-page .bday-photo-card:hover img {
    transform: scale(1.05);
  }
  .birthday-show-page .bday-photo-initials {
    font-size: 72px;
    font-weight: 800;
    color: #111827;
    letter-spacing: 0.02em;
  }

  /* ===================== Right: Info Panel ===================== */
  .birthday-show-page .bday-info-panel {
    background: #F9FAFB;
    border-radius: 20px;
    padding: 32px 36px 36px;
    min-width: 0;
  }

  .birthday-show-page .bday-member-name {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .birthday-show-page .belt-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.01em;
  }
  .birthday-show-page .belt-orange { background: #F97316; }
  .birthday-show-page .belt-blue   { background: #2563EB; }
  .birthday-show-page .belt-yellow { background: #CA8A04; }
  .birthday-show-page .belt-black  { background: #111827; }
  .birthday-show-page .belt-green  { background: #16A34A; }

  .birthday-show-page .bday-meta-row {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 36px;
    margin-bottom: 24px;
  }
  .birthday-show-page .bday-meta-item { min-width: 0; }
  .birthday-show-page .bday-meta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 8px;
  }
  .birthday-show-page .bday-meta-value {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }
  .birthday-show-page .bday-meta-value .flag { font-size: 16px; line-height: 1; }

  /* ===================== Greeting Card ===================== */
  .birthday-show-page .bday-greeting-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 2px 10px rgba(17,24,39,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .birthday-show-page .bday-greeting-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(17,24,39,0.1);
  }
  .birthday-show-page .bday-greeting-text {
    font-size: 16.5px;
    color: #374151;
    line-height: 1.7;
    margin: 0 0 18px;
  }
  .birthday-show-page .bday-gold {
    color: #B8860B;
    font-weight: 700;
  }
  .birthday-show-page .bday-signature {
    font-size: 20px;
    font-weight: 700;
    color: #B8860B;
    margin: 0;
    letter-spacing: 0.02em;
  }

  /* ===================== Responsive ===================== */
  @media (max-width: 900px) {
    .birthday-show-page .bday-main-grid { grid-template-columns: 1fr; }
    .birthday-show-page .bday-photo-card { max-width: 320px; margin: 0 auto; }
    .birthday-show-page .bday-meta-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  }

  @media (max-width: 600px) {
    .birthday-show-page .bday-container { padding: 32px 16px 48px; }
    .birthday-show-page .bday-heading { font-size: 24px; }
    .birthday-show-page .bday-info-panel { padding: 24px 20px 28px; }
    .birthday-show-page .bday-member-name { font-size: 21px; }
    .birthday-show-page .bday-meta-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .birthday-show-page .bday-greeting-card { padding: 20px 18px; }
    .birthday-show-page .bday-greeting-text { font-size: 14.5px; }
    .birthday-show-page .bday-signature { font-size: 17px; }
  }

  /* ---------------------------------------------------------New Graduates see all button style------------------------ */
  /* ===================== New Graduates Directory Page (namespaced under .graduates-page) ===================== */

  .graduates-page { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; font-family: 'Poppins', sans-serif; background: #FFFFFF; }
  .graduates-page *, .graduates-page *::before, .graduates-page *::after { box-sizing: border-box; }
  .graduates-page img { max-width: 100%; height: auto; display: block; }
  .graduates-page button { font-family: inherit; cursor: pointer; }

  .graduates-page .gp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 24px 60px;
    width: 100%;
  }

  /* ===================== Hero Banner ===================== */
  .graduates-page .gp-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #111827;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 32px;
  }
  .graduates-page .gp-hero img.gp-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
  }
  .graduates-page .gp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.8) 100%);
  }
  .graduates-page .gp-hero-content {
    position: relative;
    z-index: 2;
    padding: 32px 24px;
  }
  .graduates-page .gp-hero-title {
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0 0 8px;
  }
  .graduates-page .gp-hero-subtitle {
    color: #D1D5DB;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    margin: 0;
  }

  /* ===================== Member Grid ===================== */
  .graduates-page .gp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 36px;
  }

  /* ===================== Graduate Card ===================== */
  .graduates-page .graduate-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17,24,39,0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 0;
  }
  .graduates-page .graduate-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(17,24,39,0.14);
  }

  .graduates-page .gc-photo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #E9E9EC;
  }
  .graduates-page .gc-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .graduates-page .graduate-card:hover .gc-photo-wrap img {
    transform: scale(1.08);
  }

  .graduates-page .gc-body {
    padding: 14px 16px 18px;
  }
  .graduates-page .gc-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
  }
  .graduates-page .gc-name-underline {
    width: 22px;
    height: 2px;
    background: #E31B23;
    margin: 0 0 10px;
  }

  .graduates-page .rank-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .graduates-page .rank-dan {
    background: #14161A;
  }
  .graduates-page .rank-dan::after {
    content: "";
    position: absolute;
    top: 0; right: 6px; bottom: 0;
    width: 16px;
    background: repeating-linear-gradient(
      90deg,
      #D4AF37 0px, #D4AF37 2px,
      transparent 2px, transparent 5px
    );
  }
  .graduates-page .rank-dan.rank-dan-high::after { width: 24px; }

  .graduates-page .gc-info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
  }
  .graduates-page .gc-info-label {
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 600;
  }
  .graduates-page .gc-info-value {
    font-size: 12px;
    color: #374151;
    font-weight: 600;
  }
  .graduates-page .gc-location {
    font-size: 11.5px;
    color: #6B7280;
    margin: 0 0 10px;
  }
  .graduates-page .gc-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #E31B23;
    font-weight: 600;
    margin: 0;
  }
  .graduates-page .gc-date svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  /* ===================== Pagination ===================== */
  .graduates-page .gp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .graduates-page .gp-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }
  .graduates-page .gp-page-btn:hover:not(.gp-active):not(.gp-disabled) {
    border-color: #E31B23;
    color: #E31B23;
  }
  .graduates-page .gp-page-btn.gp-active {
    background: #E31B23;
    border-color: #E31B23;
    color: #FFFFFF;
  }
  .graduates-page .gp-page-btn.gp-disabled {
    color: #D1D5DB;
    cursor: not-allowed;
  }

  /* ===================== Responsive ===================== */
  @media (max-width: 1180px) {
    .graduates-page .gp-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 640px) {
    .graduates-page .gp-container { padding: 16px 16px 48px; }
    .graduates-page .gp-hero { min-height: 160px; margin-bottom: 24px; }
    .graduates-page .gp-hero-title { font-size: 22px; }
    .graduates-page .gp-hero-subtitle { font-size: 12px; }
    .graduates-page .gp-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .graduates-page .gc-body { padding: 10px 10px 14px; }
    .graduates-page .gc-name { font-size: 13px; }
    .graduates-page .rank-badge { font-size: 9px; height: 20px; }
    .graduates-page .gc-info-label,
    .graduates-page .gc-info-value,
    .graduates-page .gc-location,
    .graduates-page .gc-date { font-size: 10px; }
  }

  /* ------------------------------New graduate Single Page------------------------------------- */


  /* ===================== Graduate Show Page (namespaced under .graduate-show-page) ===================== */
  .graduate-show-page { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; font-family: 'Poppins', sans-serif; background: #FFFFFF; }
  .graduate-show-page *, .graduate-show-page *::before, .graduate-show-page *::after { box-sizing: border-box; }
  .graduate-show-page img { max-width: 100%; height: auto; display: block; }
  .graduate-show-page button { font-family: inherit; cursor: pointer; }

  .graduate-show-page .gsp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    width: 100%;
  }

  /* ===================== Top Header ===================== */
  .graduate-show-page .gsp-header {
    text-align: center;
    margin-bottom: 32px;
  }
  .graduate-show-page .gsp-heading {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .graduate-show-page .gsp-subheading {
    font-size: 13.5px;
    color: #9CA3AF;
    margin: 0;
  }

  /* ===================== Main Profile Card ===================== */
  .graduate-show-page .gsp-profile-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(17,24,39,0.06);
    padding: 28px;
    display: flex;
    gap: 32px;
    margin-bottom: 44px;
  }

  .graduate-show-page .gsp-photo-wrap {
    width: 200px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #111827;
    border: 3px solid #D4AF37;
  }
  .graduate-show-page .gsp-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .graduate-show-page .gsp-profile-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .graduate-show-page .gsp-name {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px;
  }

  .graduate-show-page .rank-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 14px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    background: #14161A;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
    overflow: hidden;
    align-self: flex-start;
  }
  .graduate-show-page .rank-badge::after {
    content: "";
    position: absolute;
    top: 0; right: 8px; bottom: 0;
    width: 16px;
    background: repeating-linear-gradient(
      90deg,
      #D4AF37 0px, #D4AF37 2px,
      transparent 2px, transparent 5px
    );
  }

  .graduate-show-page .gsp-info-row {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 36px;
    margin-bottom: 22px;
  }
  .graduate-show-page .gsp-info-item { min-width: 0; }
  .graduate-show-page .gsp-info-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 6px;
  }
  .graduate-show-page .gsp-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }
  .graduate-show-page .gsp-info-value .flag { font-size: 15px; line-height: 1; }

  /* ===================== Congratulation Message Box ===================== */
  .graduate-show-page .gsp-congrats-box {
    background: #FEFBEA;
    border: 1px solid #D4AF37;
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: auto;
  }
  .graduate-show-page .gsp-congrats-text {
    font-size: 13.5px;
    color: #4B5563;
    line-height: 1.7;
    margin: 0;
  }
  .graduate-show-page .gsp-gold {
    color: #B8860B;
    font-weight: 700;
  }

  /* ===================== All Graduates Section ===================== */
  .graduate-show-page .gsp-all-heading {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 24px;
  }

  .graduate-show-page .gsp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }

  .graduate-show-page .graduate-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17,24,39,0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 0;
  }
  .graduate-show-page .graduate-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(17,24,39,0.14);
  }

  .graduate-show-page .gc-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #E9E9EC;
  }
  .graduate-show-page .gc-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .graduate-show-page .graduate-card:hover .gc-photo-wrap img {
    transform: scale(1.08);
  }
  .graduate-show-page .gc-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  }
  .graduate-show-page .gc-name-on-image {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    color: #FFFFFF;
    margin: 0;
  }
  .graduate-show-page .gc-name-on-image .gc-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
  }
  .graduate-show-page .gc-name-on-image .gc-country {
    font-size: 11px;
    color: #E5E7EB;
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .graduate-show-page .gc-name-on-image .gc-country .flag { font-size: 12px; line-height: 1; }

  .graduate-show-page .gc-body {
    padding: 12px 14px 16px;
  }
  .graduate-show-page .gc-rank-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
    background: #14161A;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .graduate-show-page .gc-rank-badge::after {
    content: "";
    position: absolute;
    top: 0; right: 6px; bottom: 0;
    width: 14px;
    background: repeating-linear-gradient(
      90deg,
      #D4AF37 0px, #D4AF37 2px,
      transparent 2px, transparent 5px
    );
  }
  .graduate-show-page .gc-graded-label {
    font-size: 9.5px;
    color: #9CA3AF;
    font-weight: 600;
    margin: 0 0 3px;
  }
  .graduate-show-page .gc-graded-value {
    font-size: 11.5px;
    color: #374151;
    font-weight: 600;
    margin: 0;
  }

  /* ===================== Pagination ===================== */
  .graduate-show-page .gsp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .graduate-show-page .gsp-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }
  .graduate-show-page .gsp-page-btn:hover:not(.gsp-active):not(.gsp-disabled) {
    border-color: #E31B23;
    color: #E31B23;
  }
  .graduate-show-page .gsp-page-btn.gsp-active {
    background: #E31B23;
    border-color: #E31B23;
    color: #FFFFFF;
  }
  .graduate-show-page .gsp-page-btn.gsp-disabled {
    color: #D1D5DB;
    cursor: not-allowed;
  }

  /* ===================== Responsive ===================== */
  @media (max-width: 1180px) {
    .graduate-show-page .gsp-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 768px) {
    .graduate-show-page .gsp-profile-card { flex-direction: column; align-items: center; text-align: center; }
    .graduate-show-page .gsp-photo-wrap { width: 160px; }
    .graduate-show-page .gsp-info-row { grid-template-columns: repeat(2, 1fr); gap: 20px; justify-items: center; }
    .graduate-show-page .rank-badge { align-self: center; }
    .graduate-show-page .gsp-congrats-box { text-align: left; }
  }

  @media (max-width: 640px) {
    .graduate-show-page .gsp-container { padding: 28px 16px 48px; }
    .graduate-show-page .gsp-heading { font-size: 22px; }
    .graduate-show-page .gsp-profile-card { padding: 20px; gap: 20px; }
    .graduate-show-page .gsp-name { font-size: 21px; }
    .graduate-show-page .gsp-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .graduate-show-page .gsp-all-heading { font-size: 19px; }
    .graduate-show-page .gc-body { padding: 10px 10px 12px; }
  }

  /* -----------------------------------------New members see all pages style---------------------------------------------- */
  
  /* ===================== New Members Page (namespaced under .new-members-page) ===================== */
  .new-members-page { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; font-family: 'Poppins', sans-serif; background: #F8F9FA; }
  .new-members-page *, .new-members-page *::before, .new-members-page *::after { box-sizing: border-box; }
  .new-members-page img { max-width: 100%; height: auto; display: block; }
  .new-members-page a { text-decoration: none; }
  .new-members-page button { font-family: inherit; cursor: pointer; }

  .new-members-page .nm-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 24px 60px;
    width: 100%;
  }

  /* ===================== Hero Banner ===================== */
  .new-members-page .nm-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0B1E3A;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .new-members-page .nm-banner img.nm-banner-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%; opacity: 0.45;
  }
  .new-members-page .nm-banner .nm-banner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11,30,58,0.92) 30%, rgba(11,30,58,0.55) 100%);
  }
  .new-members-page .nm-banner-content { position: relative; z-index: 2; padding: 30px 24px; }
  .new-members-page .nm-banner-content h1 {
    color: #fff; font-size: 26px; font-weight: 800; letter-spacing: 0.01em;
    margin: 0 0 6px;
  }
  .new-members-page .nm-banner-content p {
    color: #D1D5DB; font-size: 13px; margin: 0;
  }

  /* ===================== Members Grid ===================== */
  .new-members-page .nm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 28px;
  }

  .new-members-page .member-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(11,30,58,0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
    min-width: 0;
  }
  .new-members-page .member-card:hover {
    box-shadow: 0 14px 28px rgba(11,30,58,0.14);
    transform: translateY(-4px);
  }

  .new-members-page .member-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #E9E9EC;
    overflow: hidden;
    flex-shrink: 0;
  }
  .new-members-page .member-photo img { width: 100%; height: 100%; object-fit: cover; }

  .new-members-page .member-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .new-members-page .member-name {
    font-size: 15px;
    font-weight: 700;
    color: #0B1E3A;
    margin: 0 0 4px;
  }
  .new-members-page .member-country {
    font-size: 12px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
  }
  .new-members-page .member-country .flag { font-size: 14px; line-height: 1; }

  /* ===================== Belt Badge ===================== */
  .new-members-page .belt-badge {
    width: 100%;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
  }
  .new-members-page .belt-orange { background: #F97316; color: #fff; }
  .new-members-page .belt-blue { background: #2563EB; color: #fff; }
  .new-members-page .belt-yellow { background: #FACC15; color: #4B3600; }
  .new-members-page .belt-green { background: #16A34A; color: #fff; }
  .new-members-page .belt-brown { background: #7C4A25; color: #fff; }
  .new-members-page .belt-black { background: #14161A; color: #fff; }
  .new-members-page .belt-white {
    background: #fff;
    color: #6B7280;
    border: 1px solid #E5E7EB;
  }

  .new-members-page .member-joined {
    font-size: 11.5px;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
  }
  .new-members-page .member-joined svg { width: 13px; height: 13px; flex-shrink: 0; color: #9CA3AF; }
  .new-members-page .member-joined .joined-label { color: #E30613; font-weight: 600; }

  .new-members-page .btn-view-profile {
    display: block;
    width: 100%;
    text-align: center;
    background: #E30613;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 999px;
    margin-top: auto;
    transition: background .2s ease, transform .15s ease;
  }
  .new-members-page .btn-view-profile:hover {
    background: #b8050f;
    transform: translateY(-1px);
  }

  /* ===================== Pagination ===================== */
  .new-members-page .nm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .new-members-page .nm-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
  }
  .new-members-page .nm-page-btn:hover:not(.nm-disabled):not(.nm-active) {
    border-color: #E30613;
    color: #E30613;
  }
  .new-members-page .nm-page-btn.nm-active {
    background: #E30613;
    border-color: #E30613;
    color: #fff;
  }
  .new-members-page .nm-page-btn.nm-disabled { color: #C7CBD1; cursor: not-allowed; }
  .new-members-page .nm-page-ellipsis { padding: 0 4px; color: #9CA3AF; font-size: 13px; }

  /* ===================== Responsive ===================== */
  @media (max-width: 1180px) {
    .new-members-page .nm-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 767px) {
    .new-members-page .nm-container { padding: 16px 16px 48px; }
    .new-members-page .nm-banner-content h1 { font-size: 21px; }
    .new-members-page .nm-banner-content p { font-size: 12px; }
    .new-members-page .nm-grid { grid-template-columns: 1fr; }
  }

  /* ------------------------Newly Promoted Style --------------------------------------------------- */
    /* ==========================================================================
       Newly Promoted Member Profile — scoped styles
       ========================================================================== */
    .promo-page {
        font-family: 'Poppins', sans-serif;
        background-color: #F3F4F6;
        padding: 40px 20px 64px;
    }

    .promo-page * {
        box-sizing: border-box;
    }

    .promo-container {
        max-width: 1100px;
        margin: 0 auto;
    }

    /* ---------- Main profile card ---------- */
    .promo-card {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(11, 30, 58, 0.08);
        padding: 40px;
    }

    .promo-main-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 48px;
        align-items: start;
    }

    /* ---------- Left: photo ---------- */
    .promo-photo-col {
        display: flex;
        flex-direction: column;
    }

    .promo-accent-line {
        width: 90%;
        height: 4px;
        background: #E30613;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .promo-photo-wrap {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        background: #F3F4F6;
        box-shadow: 0 6px 18px rgba(11, 30, 58, 0.10);
    }

    .promo-photo-wrap img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

    /* ---------- Right: name + rank bar ---------- */
    .promo-info-col {
        display: flex;
        flex-direction: column;
    }

    .promo-name {
        font-size: 42px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 18px;
        line-height: 1.15;
    }

    .promo-rank-bar {
        width: 100%;
        height: 34px;
        border-radius: 8px;
        background: #E5E7EB;
        position: relative;
        overflow: hidden;
        margin-bottom: 28px;
    }

    .promo-rank-fill {
        height: 100%;
        border-radius: 8px 0 0 8px;
        display: flex;
        align-items: center;
        padding-left: 14px;
        font-size: 13px;
        font-weight: 600;
        color: #ffffff;
        white-space: nowrap;
        position: relative;
    }

    .promo-rank-fill::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: rgba(0, 0, 0, 0.55);
    }

    /* Belt rank colour variants */
    .rank-white  .promo-rank-fill { background: #D1D5DB; color: #111827; }
    .rank-orange .promo-rank-fill { background: #F97316; }
    .rank-blue   .promo-rank-fill { background: #3B82F6; }
    .rank-yellow .promo-rank-fill { background: #EAB308; color: #111827; }
    .rank-green  .promo-rank-fill { background: #22C55E; }
    .rank-brown  .promo-rank-fill { background: #7C4A2D; }
    .rank-black  .promo-rank-fill { background: #111827; }

    /* ---------- Member information panel ---------- */
    .promo-info-panel {
        background: #F9FAFB;
        border-radius: 14px;
        padding: 8px 24px;
        margin-bottom: 24px;
    }

    .promo-info-row {
        display: grid;
        grid-template-columns: 160px 1fr;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid #E5E7EB;
    }

    .promo-info-row:last-child {
        border-bottom: none;
    }

    .promo-info-label {
        font-size: 14px;
        font-weight: 600;
        color: #6B7280;
    }

    .promo-info-value {
        font-size: 15px;
        font-weight: 600;
        color: #0B1E3A;
    }

    /* ---------- Congratulations card ---------- */
    .promo-congrats-card {
        background: #FEFCE8;
        border: 1px solid #FDE68A;
        border-radius: 14px;
        padding: 24px 32px;
        text-align: center;
    }

    .promo-congrats-line {
        font-size: 15px;
        color: #374151;
        line-height: 1.8;
        margin: 0;
    }

    .promo-highlight {
        color: #D4A017;
        font-weight: 700;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 900px) {
        .promo-main-grid {
            grid-template-columns: 1fr;
            gap: 28px;
        }

        .promo-photo-wrap {
            max-width: 320px;
            margin: 0 auto;
        }

        .promo-accent-line {
            max-width: 320px;
            margin-left: auto;
            margin-right: auto;
        }

        .promo-name {
            text-align: center;
            font-size: 34px;
        }
    }

    @media (max-width: 640px) {
        .promo-card {
            padding: 24px;
        }

        .promo-name {
            font-size: 28px;
        }

        .promo-info-row {
            grid-template-columns: 1fr;
            gap: 4px;
        }

        .promo-congrats-card {
            padding: 20px;
        }

        .promo-congrats-line {
            font-size: 14px;
        }
    }

 /* -------------------------------------------Style Added @17.07.26----------------------------- */
   
  /* ===================== Branch Chiefs Directory Page (namespaced under .branch-chiefs-page) ===================== */
  
  .branch-chiefs-page { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; font-family: 'Poppins', sans-serif; background: #F5F5F5; }
  .branch-chiefs-page *, .branch-chiefs-page *::before, .branch-chiefs-page *::after { box-sizing: border-box; }
  .branch-chiefs-page img { max-width: 100%; height: auto; display: block; }
  .branch-chiefs-page a { text-decoration: none; }
  .branch-chiefs-page button, .branch-chiefs-page select, .branch-chiefs-page input { font-family: inherit; }
  .branch-chiefs-page button { cursor: pointer; }

  .branch-chiefs-page .bc-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px 60px;
    width: 100%;
  }

  /* ===================== Page Header ===================== */
  .branch-chiefs-page .bc-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 24px;
  }
  .branch-chiefs-page .bc-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #0B1E3A;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .branch-chiefs-page .bc-header p {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
  }

  /* ===================== Filter Bar ===================== */
  .branch-chiefs-page .bc-filter-bar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(11,30,58,0.06);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: nowrap;
  }
  .branch-chiefs-page .bc-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }
  .branch-chiefs-page .bc-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #9CA3AF;
    pointer-events: none;
  }
  .branch-chiefs-page .bc-search {
    width: 100%;
    height: 44px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 0 16px 0 38px;
    font-size: 13.5px;
    color: #0B1E3A;
    background: #fff;
    transition: border-color .2s ease;
  }
  .branch-chiefs-page .bc-search:focus { outline: none; border-color: #E30613; }
  .branch-chiefs-page .bc-search::placeholder { color: #9CA3AF; }

  .branch-chiefs-page .bc-select {
    height: 44px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13.5px;
    color: #0B1E3A;
    background: #fff;
    flex-shrink: 0;
    min-width: 150px;
  }
  .branch-chiefs-page .bc-select:focus { outline: none; border-color: #E30613; }

  .branch-chiefs-page .bc-btn-clear {
    height: 44px;
    padding: 0 20px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #374151;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background .2s ease;
  }
  .branch-chiefs-page .bc-btn-clear:hover { background: #E5E7EB; }

  .branch-chiefs-page .bc-view-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .branch-chiefs-page .bc-view-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    transition: all .15s ease;
  }
  .branch-chiefs-page .bc-view-btn svg { width: 16px; height: 16px; }
  .branch-chiefs-page .bc-view-btn:hover { border-color: #0B1E3A; color: #0B1E3A; }
  .branch-chiefs-page .bc-view-btn.active {
    background: #E30613;
    border-color: #E30613;
    color: #fff;
  }

  /* ===================== Chiefs Grid ===================== */
  .branch-chiefs-page .bc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .branch-chiefs-page .chief-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(11,30,58,0.06);
    padding: 24px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow .25s ease, transform .25s ease;
    min-width: 0;
  }
  .branch-chiefs-page .chief-card:hover {
    box-shadow: 0 14px 28px rgba(11,30,58,0.14);
    transform: translateY(-4px);
  }

  .branch-chiefs-page .chief-avatar {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #F3D375, #D4A017 70%);
    overflow: hidden;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .branch-chiefs-page .chief-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .branch-chiefs-page .chief-name {
    font-size: 15px;
    font-weight: 700;
    color: #0B1E3A;
    margin: 0 0 8px;
  }

  .branch-chiefs-page .chief-rank {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #14161A;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
  }
  .branch-chiefs-page .chief-rank .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #D4A017;
    flex-shrink: 0;
  }

  .branch-chiefs-page .chief-country {
    font-size: 12px;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 16px;
  }
  .branch-chiefs-page .chief-country .flag { font-size: 14px; line-height: 1; }

  .branch-chiefs-page .btn-view-profile {
    display: block;
    width: 100%;
    text-align: center;
    background: #E30613;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 999px;
    margin-top: auto;
    transition: background .2s ease, transform .15s ease;
  }
  .branch-chiefs-page .btn-view-profile:hover {
    background: #b8050f;
    transform: translateY(-1px);
  }

  /* ===================== List View ===================== */
  .branch-chiefs-page .bc-grid[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .branch-chiefs-page .bc-grid[data-view="list"] .chief-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 20px;
    padding: 16px 20px;
  }
  .branch-chiefs-page .bc-grid[data-view="list"] .chief-avatar { margin-bottom: 0; flex-shrink: 0; }
  .branch-chiefs-page .bc-grid[data-view="list"] .chief-info { flex: 1; min-width: 0; }
  .branch-chiefs-page .bc-grid[data-view="list"] .chief-country { justify-content: flex-start; }
  .branch-chiefs-page .bc-grid[data-view="list"] .btn-view-profile {
    width: auto;
    padding: 10px 24px;
    margin-top: 0;
    flex-shrink: 0;
  }

  /* ===================== Pagination ===================== */
  .branch-chiefs-page .bc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    flex-wrap: wrap;
  }
  .branch-chiefs-page .bc-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
  }
  .branch-chiefs-page .bc-page-btn:hover:not(.bc-disabled):not(.bc-active) {
    border-color: #E30613;
    color: #E30613;
  }
  .branch-chiefs-page .bc-page-btn.bc-active {
    background: #E30613;
    border-color: #E30613;
    color: #fff;
  }
  .branch-chiefs-page .bc-page-btn.bc-disabled { color: #C7CBD1; cursor: not-allowed; }
  .branch-chiefs-page .bc-page-ellipsis { padding: 0 4px; color: #9CA3AF; font-size: 13px; }

  /* ===================== Responsive ===================== */
  @media (max-width: 1180px) {
    .branch-chiefs-page .bc-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 767px) {
    .branch-chiefs-page .bc-container { padding: 24px 16px 48px; }
    .branch-chiefs-page .bc-header h1 { font-size: 22px; }
    .branch-chiefs-page .bc-filter-bar { flex-wrap: wrap; }
    .branch-chiefs-page .bc-search-wrap { flex: 1 1 100%; }
    .branch-chiefs-page .bc-select { flex: 1 1 calc(60% - 6px); min-width: 0; }
    .branch-chiefs-page .bc-btn-clear { flex: 1 1 calc(40% - 6px); }
    .branch-chiefs-page .bc-view-toggle { order: 4; margin-left: auto; }
    .branch-chiefs-page .bc-grid { grid-template-columns: 1fr; }
    .branch-chiefs-page .bc-grid[data-view="list"] .chief-card { flex-direction: column; text-align: center; }
    .branch-chiefs-page .bc-grid[data-view="list"] .chief-country { justify-content: center; }
    .branch-chiefs-page .bc-grid[data-view="list"] .btn-view-profile { width: 100%; margin-top: 8px; }
  }

  /* ----------------------------------------------Branch chief single page style --------------------------------- */
 
  /* ===================== Branch Chief Profile Page (namespaced under .chief-show-page) ===================== */
  .chief-show-page { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; font-family: 'Poppins', sans-serif; background: #F5F5F5; }
  .chief-show-page *, .chief-show-page *::before, .chief-show-page *::after { box-sizing: border-box; }
  .chief-show-page a { text-decoration: none; }

  .chief-show-page .cs-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 24px 60px;
    width: 100%;
  }

  /* ===================== Breadcrumb ===================== */
  .chief-show-page .cs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }
  .chief-show-page .cs-breadcrumb-text {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9CA3AF;
    white-space: nowrap;
  }
  .chief-show-page .cs-breadcrumb-text a { color: #9CA3AF; transition: color .15s ease; }
  .chief-show-page .cs-breadcrumb-text a:hover { color: #E30613; }
  .chief-show-page .cs-breadcrumb-rule {
    height: 1px;
    background: #E5E7EB;
    flex: 1;
  }

  /* ===================== Section Title ===================== */
  .chief-show-page .cs-section-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0B1E3A;
    margin: 32px 0 14px;
  }
  .chief-show-page .cs-section-title:first-of-type { margin-top: 0; }

  /* ===================== Table Card ===================== */
  .chief-show-page .cs-table-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(11,30,58,0.05);
    overflow: hidden;
  }

  .chief-show-page .cs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #E5E7EB;
  }
  .chief-show-page .cs-row:last-child { border-bottom: none; }

  .chief-show-page .cs-cell {
    padding: 16px 24px;
    border-right: 1px solid #E5E7EB;
    min-width: 0;
  }
  .chief-show-page .cs-cell:last-child { border-right: none; }
  .chief-show-page .cs-cell.cs-empty { background: #FAFAFA; }

  .chief-show-page .cs-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 6px;
  }
  .chief-show-page .cs-value {
    font-size: 14px;
    font-weight: 600;
    color: #0B1E3A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .chief-show-page .cs-value.cs-rank { font-size: 15px; font-weight: 700; }
  .chief-show-page .cs-value .flag { font-size: 15px; line-height: 1; }

  /* ===================== View Button ===================== */
  .chief-show-page .btn-view-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E30613;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 6px;
    transition: background .2s ease;
  }
  .chief-show-page .btn-view-small:hover { background: #b8050f; }

  /* ===================== Badges ===================== */
  .chief-show-page .badge-certified {
    display: inline-block;
    background: #DCFCE7;
    color: #16A34A;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    margin-top: 8px;
  }
  .chief-show-page .badge-premium {
    display: inline-block;
    background: #8B5CF6;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
  }

  .chief-show-page .cs-value-wrap { display: flex; flex-direction: column; align-items: flex-start; }

  /* ===================== Responsive ===================== */
  @media (max-width: 767px) {
    .chief-show-page .cs-container { padding: 16px 16px 48px; }
    .chief-show-page .cs-row { grid-template-columns: 1fr; }
    .chief-show-page .cs-cell { border-right: none; border-bottom: 1px solid #F0F0F2; }
    .chief-show-page .cs-row .cs-cell:last-child { border-bottom: none; }
    .chief-show-page .cs-section-title { margin-top: 24px; font-size: 12px; }
  }


  /* -----------------Members page style ------------------------------ */

  /* ===================== New Members Directory Page (namespaced under .members-directory-page) ===================== */
  .members-directory-page { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; font-family: 'Poppins', sans-serif; background: #F5F5F5; }
  .members-directory-page *, .members-directory-page *::before, .members-directory-page *::after { box-sizing: border-box; }
  .members-directory-page img { max-width: 100%; height: auto; display: block; }
  .members-directory-page a { text-decoration: none; }
  .members-directory-page button { font-family: inherit; cursor: pointer; }

  .members-directory-page .md-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 24px 60px;
    width: 100%;
  }

  /* ===================== Hero Banner ===================== */
  .members-directory-page .md-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0B1E3A;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .members-directory-page .md-banner img.md-banner-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%; opacity: 0.45;
  }
  .members-directory-page .md-banner .md-banner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11,30,58,0.92) 30%, rgba(11,30,58,0.55) 100%);
  }
  .members-directory-page .md-banner-content { position: relative; z-index: 2; padding: 30px 24px; }
  .members-directory-page .md-banner-content h1 {
    color: #fff; font-size: 26px; font-weight: 800; letter-spacing: 0.01em;
    margin: 0 0 6px;
  }
  .members-directory-page .md-banner-content p {
    color: #D1D5DB; font-size: 13px; margin: 0;
  }

  /* ===================== Members Grid ===================== */
  .members-directory-page .md-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 28px;
  }

  .members-directory-page .member-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(11,30,58,0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
    min-width: 0;
  }
  .members-directory-page .member-card:hover {
    box-shadow: 0 14px 28px rgba(11,30,58,0.14);
    transform: translateY(-4px);
  }

  .members-directory-page .member-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #E9E9EC;
    overflow: hidden;
    flex-shrink: 0;
  }
  .members-directory-page .member-photo img { width: 100%; height: 100%; object-fit: cover; }

  .members-directory-page .member-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .members-directory-page .member-name {
    font-size: 15px;
    font-weight: 700;
    color: #0B1E3A;
    margin: 0 0 4px;
  }
  .members-directory-page .member-country {
    font-size: 12px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
  }
  .members-directory-page .member-country .flag { font-size: 14px; line-height: 1; }

  /* ===================== Belt Badge ===================== */
  .members-directory-page .belt-badge {
    width: 100%;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
  }
  .members-directory-page .belt-orange { background: #F97316; color: #fff; }
  .members-directory-page .belt-blue { background: #2563EB; color: #fff; }
  .members-directory-page .belt-yellow { background: #FACC15; color: #4B3600; }
  .members-directory-page .belt-green { background: #16A34A; color: #fff; }
  .members-directory-page .belt-brown { background: #7C4A25; color: #fff; }
  .members-directory-page .belt-black { background: #14161A; color: #fff; }
  .members-directory-page .belt-white {
    background: #fff;
    color: #6B7280;
    border: 1px solid #E5E7EB;
  }

  .members-directory-page .member-joined {
    font-size: 11.5px;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
  }
  .members-directory-page .member-joined svg { width: 13px; height: 13px; flex-shrink: 0; color: #9CA3AF; }
  .members-directory-page .member-joined .joined-label { color: #E30613; font-weight: 600; }

  .members-directory-page .btn-view-profile {
    display: block;
    width: 100%;
    text-align: center;
    background: #E30613;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 999px;
    margin-top: auto;
    transition: background .2s ease, transform .15s ease;
  }
  .members-directory-page .btn-view-profile:hover {
    background: #b8050f;
    transform: translateY(-1px);
  }

  /* ===================== Pagination ===================== */
  .members-directory-page .md-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .members-directory-page .md-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
  }
  .members-directory-page .md-page-btn:hover:not(.md-disabled):not(.md-active) {
    border-color: #E30613;
    color: #E30613;
  }
  .members-directory-page .md-page-btn.md-active {
    background: #E30613;
    border-color: #E30613;
    color: #fff;
  }
  .members-directory-page .md-page-btn.md-disabled { color: #C7CBD1; cursor: not-allowed; }
  .members-directory-page .md-page-ellipsis { padding: 0 4px; color: #9CA3AF; font-size: 13px; }

  /* ===================== Responsive ===================== */
  @media (max-width: 1180px) {
    .members-directory-page .md-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 767px) {
    .members-directory-page .md-container { padding: 16px 16px 48px; }
    .members-directory-page .md-banner-content h1 { font-size: 21px; }
    .members-directory-page .md-banner-content p { font-size: 12px; }
    .members-directory-page .md-grid { grid-template-columns: 1fr; }
  }

  /* ----------------------------------------------- Black Belt Style---------------------------------- */
/*----------------------------Style added @18.07.26---------------------------------------- */
  /* =========================================================
     Black Belts Directory Page 
     ========================================================= */
  .black-belts-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    padding: 32px 0 60px;
  }
  .black-belts-page *, .black-belts-page *::before, .black-belts-page *::after { box-sizing: border-box; }
  .black-belts-page img { max-width: 100%; height: auto; display: block; }
  .black-belts-page a { text-decoration: none; }
  .black-belts-page button, .black-belts-page select, .black-belts-page input { font-family: inherit; }

  .black-belts-page .bb-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
  }
  @media (min-width: 768px) {
    .black-belts-page .bb-container { padding: 0 24px; }
  }

  /* ===================== Page Header ===================== */
  .black-belts-page .bb-header { margin-bottom: 20px; }
  .black-belts-page .bb-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #0B1736;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .black-belts-page .bb-header p {
    font-size: 13.5px;
    color: #6B7280;
    margin: 0;
  }

  /* ===================== Filter Bar (CSS Grid, not Bootstrap) ===================== */
  .black-belts-page .bb-filter-bar {
    border-top: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
    padding: 16px 0;
    margin-bottom: 28px;
  }

  .black-belts-page .bb-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  @media (min-width: 576px) {
    .black-belts-page .bb-filter-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 992px) {
    .black-belts-page .bb-filter-grid {
      grid-template-columns: 2fr 1.2fr 1.4fr auto auto;
      align-items: center;
    }
  }

  .black-belts-page .bb-search-wrap { position: relative; width: 100%; }
  .black-belts-page .bb-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #9CA3AF;
    pointer-events: none;
  }
  .black-belts-page .bb-search-wrap .bb-input {
    padding-left: 34px;
  }

  .black-belts-page .bb-input,
  .black-belts-page .bb-select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font-size: 13.5px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #0B1736;
    appearance: auto;
  }
  .black-belts-page .bb-input:focus,
  .black-belts-page .bb-select:focus {
    outline: none;
    border-color: #E31E24;
    box-shadow: 0 0 0 3px rgba(227,30,36,0.12);
  }

  .black-belts-page .btn-bb-clear {
    height: 42px;
    padding: 0 18px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #374151;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    width: 100%;
  }
  @media (min-width: 992px) {
    .black-belts-page .btn-bb-clear { width: auto; }
  }
  .black-belts-page .btn-bb-clear:hover { background: #E5E7EB; }

  .black-belts-page .bb-view-toggle {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
  }
  @media (min-width: 992px) {
    .black-belts-page .bb-view-toggle { justify-content: flex-end; }
  }
  .black-belts-page .bb-view-btn {
    width: 42px;
    height: 42px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    transition: all .15s ease;
    flex-shrink: 0;
  }
  .black-belts-page .bb-view-btn svg { width: 16px; height: 16px; }
  .black-belts-page .bb-view-btn:hover { border-color: #0B1736; color: #0B1736; }
  .black-belts-page .bb-view-btn.active {
    background: #E31E24;
    border-color: #E31E24;
    color: #fff;
  }

  /* ===================== Members Grid (CSS Grid, not Bootstrap) ===================== */
  .black-belts-page .bb-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  @media (min-width: 576px) {
    .black-belts-page .bb-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 992px) {
    .black-belts-page .bb-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .black-belts-page .bb-col {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* ===================== Member Card ===================== */
  .black-belts-page .bb-card {
    background: #fff;
    border: 1px solid #F0E4B8;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(11,23,54,0.06);
    padding: 24px 18px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow .25s ease, transform .25s ease;
  }
  .black-belts-page .bb-card:hover {
    box-shadow: 0 14px 30px rgba(11,23,54,0.16);
    transform: translateY(-4px);
  }

  .black-belts-page .bb-avatar-ring {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    border: 3px solid #D4AF37;
    padding: 3px;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .black-belts-page .bb-avatar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #F3F4F6;
    overflow: hidden;
  }
  .black-belts-page .bb-avatar img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .black-belts-page .bb-initials-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    font-weight: 700;
    font-size: 18px;
  }

  .black-belts-page .bb-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
  }

  .black-belts-page .bb-name {
    font-size: 15px;
    font-weight: 700;
    color: #0B1736;
    margin: 0 0 8px;
  }

  .black-belts-page .bb-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #14161A;
    color: #D4AF37;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .black-belts-page .bb-rank-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

  .black-belts-page .bb-country {
    font-size: 12px;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px;
  }
  .black-belts-page .bb-country .flag { font-size: 14px; line-height: 1; }

  .black-belts-page .bb-joined {
    font-size: 11px;
    color: #E31E24;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 0 14px;
  }
  .black-belts-page .bb-joined svg { width: 12px; height: 12px; flex-shrink: 0; }

  .black-belts-page .btn-view-profile {
    display: block;
    width: 100%;
    text-align: center;
    background: #E31E24;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 999px;
    margin-top: auto;
    transition: background .2s ease, transform .15s ease;
  }
  .black-belts-page .btn-view-profile:hover {
    background: #c11319;
    color: #fff;
    transform: translateY(-1px);
  }

  /* ===================== List View ===================== */
  .black-belts-page .bb-grid[data-view="list"] {
    grid-template-columns: 1fr;
  }
  .black-belts-page .bb-grid[data-view="list"] .bb-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 20px;
    padding: 14px 20px;
  }
  .black-belts-page .bb-grid[data-view="list"] .bb-avatar-ring { margin-bottom: 0; }
  .black-belts-page .bb-grid[data-view="list"] .bb-card-info { align-items: flex-start; }
  .black-belts-page .bb-grid[data-view="list"] .bb-rank-badge { width: auto; justify-content: flex-start; }
  .black-belts-page .bb-grid[data-view="list"] .bb-country,
  .black-belts-page .bb-grid[data-view="list"] .bb-joined { justify-content: flex-start; }
  .black-belts-page .bb-grid[data-view="list"] .btn-view-profile {
    width: auto;
    padding: 10px 24px;
    margin-top: 0;
    flex-shrink: 0;
    margin-left: auto;
  }

  @media (max-width: 767px) {
    .black-belts-page .bb-grid[data-view="list"] .bb-card { flex-direction: column; text-align: center; }
    .black-belts-page .bb-grid[data-view="list"] .bb-card-info { align-items: center; }
    .black-belts-page .bb-grid[data-view="list"] .bb-rank-badge,
    .black-belts-page .bb-grid[data-view="list"] .bb-country,
    .black-belts-page .bb-grid[data-view="list"] .bb-joined { justify-content: center; }
    .black-belts-page .bb-grid[data-view="list"] .btn-view-profile { width: 100%; margin: 8px 0 0; }
  }

  /* ===================== Pagination ===================== */
  .black-belts-page .bb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    flex-wrap: wrap;
  }
  .black-belts-page .bb-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
  }
  .black-belts-page .bb-page-btn:hover:not(.bb-disabled):not(.bb-active) {
    border-color: #E31E24;
    color: #E31E24;
  }
  .black-belts-page .bb-page-btn.bb-active {
    background: #E31E24;
    border-color: #E31E24;
    color: #fff;
  }
  .black-belts-page .bb-page-btn.bb-disabled { color: #C7CBD1; cursor: not-allowed; }
  .black-belts-page .bb-page-ellipsis { padding: 0 4px; color: #9CA3AF; font-size: 13px; }

  /* ===================== Responsive tweaks ===================== */
  @media (max-width: 767px) {
    .black-belts-page .bb-header h1 { font-size: 22px; }
  }

  /* ----------------------------------------------------------Black belt Single page style --------------------------------------- */
    
  .blackbelt-single-page .bbs-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 24px 60px;
  }

  .blackbelt-single-page .bbs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }
  .blackbelt-single-page .bbs-breadcrumb-text {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9CA3AF;
    white-space: nowrap;
  }
  .blackbelt-single-page .bbs-breadcrumb-text a {
    color: #9CA3AF;
    text-decoration: none;
    transition: color .15s ease;
  }
  .blackbelt-single-page .bbs-breadcrumb-text a:hover {
    color: #E31E24;
  }
  .blackbelt-single-page .bbs-breadcrumb-rule {
    height: 1px;
    background: #E5E7EB;
    flex: 1;
    max-width: 220px;
  }

.blackbelt-single-page .bbs-photo{
    width:100%;
    max-width:260px;
    margin:0 auto;
    background:#F5F5F5;
    border-radius:10px;
    overflow:hidden;
}

.blackbelt-single-page .bbs-photo img{
    width:100%;
    height:auto;
    display:block;
}

  .blackbelt-single-page .bbs-section-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0B1E3A;
    margin: 32px 0 14px;
  }

  .blackbelt-single-page .bbs-table-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
  }

  .blackbelt-single-page .bbs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #E5E7EB;
  }
  .blackbelt-single-page .bbs-row:last-child {
    border-bottom: none;
  }

  .blackbelt-single-page .bbs-cell {
    padding: 16px 24px;
    border-right: 1px solid #E5E7EB;
    min-width: 0;
  }
  .blackbelt-single-page .bbs-cell:last-child {
    border-right: none;
  }
  .blackbelt-single-page .bbs-cell.bbs-empty {
    background: #FAFAFA;
  }

  .blackbelt-single-page .bbs-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin: 0 0 6px;
  }

  .blackbelt-single-page .bbs-value {
    font-size: 14px;
    font-weight: 600;
    color: #0B1E3A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .blackbelt-single-page .bbs-value.bbs-rank {
    font-size: 15px;
    font-weight: 700;
  }
  .blackbelt-single-page .bbs-value .bbs-flag {
    font-size: 15px;
    line-height: 1;
  }

  .blackbelt-single-page .bbs-value-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .blackbelt-single-page .bbs-badge-certified {
    display: inline-block;
    background: #DCFCE7;
    color: #16A34A;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
  }

  .blackbelt-single-page .bbs-badge-active {
    display: inline-block;
    background: #8B5CF6;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
  }

  @media (max-width: 991.98px) {
    .blackbelt-single-page .bbs-photo {
      max-width: 320px;
      margin: 0 auto 24px;
    }
  }

  @media (max-width: 575.98px) {
    .blackbelt-single-page .bbs-container {
      padding: 16px 16px 48px;
    }
    .blackbelt-single-page .bbs-row {
      grid-template-columns: 1fr;
    }
    .blackbelt-single-page .bbs-cell {
      border-right: none;
      border-bottom: 1px solid #F0F0F2;
    }
    .blackbelt-single-page .bbs-row .bbs-cell:last-child {
      border-bottom: none;
    }
    .blackbelt-single-page .bbs-section-title {
      margin-top: 24px;
      font-size: 12px;
    }
  }

/* -------------------------------New Page Style----------------------------------- */
  .news-page .np-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 16px 50px;
  }

  .news-page .np-badge {
    display: inline-block;
    background: #FDECEC;
    color: #E31E24;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
  }

  .news-page .np-heading {
    font-size: 32px;
    font-weight: 800;
    color: #0B1E3A;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
  }

  .news-page .np-subtitle {
    color: #6B7280;
    font-size: 14px;
    margin-bottom: 20px;
  }

  /* ===== 70/30 Two-Column Layout ===== */
  .news-page .np-two-col {
    display: flex;
    gap: 24px;
    align-items: stretch;
  }
  .news-page .np-col-left {
    flex: 0 0 70%;
    max-width: 70%;
  }
  .news-page .np-col-right {
    flex: 0 0 30%;
    max-width: 30%;
  }

  /* ===== Featured News Card ===== */
  .news-page .np-featured-card {
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
  }
  .news-page .np-featured-image {
    width: 100%;
    height: 280px;
    background: #E9E9EC;
    overflow: hidden;
  }
  .news-page .np-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .news-page .np-featured-body {
    padding: 18px 20px 20px;
  }
  .news-page .np-featured-title {
    font-size: 20px;
    font-weight: 700;
    color: #0B1E3A;
    line-height: 1.35;
    margin: 0 0 8px;
  }
  .news-page .np-featured-desc {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.7;
    margin: 0 0 14px;
  }
  .news-page .np-featured-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #9CA3AF;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .news-page .np-featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .news-page .np-btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E31E24;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s ease;
  }
  .news-page .np-btn-read-more:hover {
    background: #c11319;
    color: #fff;
  }

  .news-page .np-link-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #E31E24;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .news-page .np-link-read-more:hover {
    color: #c11319;
    text-decoration: underline;
  }

  /* ===== Articles Sidebar (30%) ===== */
  .news-page .np-articles-card {
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    padding: 18px 16px;
    height: 100%;
  }
  .news-page .np-articles-title {
    font-size: 16px;
    font-weight: 700;
    color: #0B1E3A;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #F0F0F2;
  }
  .news-page .np-article-list {
    display: flex;
    flex-direction: column;
  }
  .news-page .np-article-row {
    display: flex;
    gap: 12px;
    padding: 10px 6px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease;
    border-bottom: 1px solid #F5F5F5;
  }
  .news-page .np-article-row:last-child {
    border-bottom: none;
  }
  .news-page .np-article-row:hover {
    background: #F8F9FA;
  }
  .news-page .np-article-thumb {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: #E9E9EC;
    overflow: hidden;
    flex-shrink: 0;
  }
  .news-page .np-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .news-page .np-article-info {
    min-width: 0;
    flex: 1;
  }
  .news-page .np-article-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #0B1E3A;
    line-height: 1.4;
    margin: 0 0 3px;
  }
  .news-page .np-article-link {
    font-size: 11.5px;
    color: #E31E24;
    font-weight: 600;
    text-decoration: none;
  }
  .news-page .np-article-link:hover {
    text-decoration: underline;
  }

  /* ===== Featured Fighters ===== */
  .news-page .np-champions-section {
    margin-top: 48px;
  }
  .news-page .np-section-heading {
    font-size: 28px;
    font-weight: 700;
    color: #0B1E3A;
    margin: 0 0 6px;
  }
  .news-page .np-section-subtitle {
    font-size: 14px;
    color: #6B7280;
    margin: 0 0 28px;
    
  }

  .news-page .np-fighter-card {
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease;
  }
  .news-page .np-fighter-card:hover {
    box-shadow: 0 8px 20px rgba(11,30,58,0.08);
  }
  .news-page .np-fighter-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #E9E9EC;
    overflow: hidden;
  }
  .news-page .np-fighter-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .news-page .np-fighter-body {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .news-page .np-fighter-name {
    font-size: 16px;
    font-weight: 700;
    color: #E31E24;
    margin: 0 0 6px;
    line-height: 1.3;
  }
  .news-page .np-fighter-desc {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0 0 12px;
    flex: 1;
  }

  .news-page .np-view-all {
    text-align: center;
    margin-top: 24px;
  }
  .news-page .np-view-all a {
    color: #E31E24;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }
  .news-page .np-view-all a:hover {
    text-decoration: underline;
  }

  /* ===== Responsive ===== */
  @media (max-width: 991.98px) {
    .news-page .np-two-col {
      flex-direction: column;
    }
    .news-page .np-col-left,
    .news-page .np-col-right {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .news-page .np-heading { font-size: 28px; }
    .news-page .np-section-heading { font-size: 24px; }
  }

  @media (max-width: 575.98px) {
    .news-page .np-container { padding: 16px 12px 40px; }
    .news-page .np-heading { font-size: 24px; }
    .news-page .np-featured-image { height: 200px; }
    .news-page .np-featured-title { font-size: 17px; }
    .news-page .np-section-heading { font-size: 20px; }
    .news-page .np-champions-section { margin-top: 32px; }
    .news-page .np-articles-card { padding: 14px 12px; }
  }
  .news-page .np-fighter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 991.98px) {
    .news-page .np-fighter-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------About kyokushin styles----------------------------------- */
    /* =========================================================
       History of Kyokushin Karate — scoped under .hk-history-page
       Pure CSS Grid (NOT dependent on Bootstrap's .row/.col-* classes)
       so the layout renders correctly whether or not Bootstrap CSS
       is loaded on this page. All classes are hk- prefixed.
       ========================================================= */
    .hk-history-page {
        font-family: 'Poppins', sans-serif;
        background: #FFFFFF;
        color: #0B1E3A;
        padding: 48px 0 64px;
    }
    .hk-history-page *,
    .hk-history-page *::before,
    .hk-history-page *::after {
        box-sizing: border-box;
    }
    .hk-history-page img {
        max-width: 100%;
        display: block;
    }

    .hk-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .hk-header {
        text-align: center;
        margin: 0 auto;
        padding-bottom: 32px;
    }

    .hk-subtitle {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: #E31E24;
        margin-bottom: 8px;
    }

    .hk-title {
        font-size: 34px;
        font-weight: 800;
        color: #0B1E3A;
        margin: 0 0 10px;
        line-height: 1.25;
    }

    .hk-intro {
        font-size: 13px;
        color: #6B7280;
        margin: 0;
    }

    .hk-divider {
        width: 100%;
        height: 1px;
        background: #E5E7EB;
        border: none;
        margin: 32px 0;
    }

    /* ---------- Grid (pure CSS, no Bootstrap needed) ---------- */
    .hk-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 24px;
    }

    .hk-grid-large {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    @media (max-width: 991px) {
        .hk-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .hk-grid-large {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 575px) {
        .hk-grid,
        .hk-grid-large {
            grid-template-columns: 1fr;
        }
    }

    /* ---------- Card ---------- */
    .hk-card {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(11, 30, 58, 0.04);
        padding: 16px;
        height: 100%;
        transition: transform .25s;
    }

    .hk-card:hover {
        transform: translateY(-3px);
    }

    .hk-card-label {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        color: #E31E24;
        margin-bottom: 12px;
    }

    .hk-card-accent {
        width: 3px;
        height: 14px;
        background: #E31E24;
        border-radius: 2px;
        display: inline-block;
        margin-right: 7px;
    }

    .hk-card-image {
        width: 100%;
        height: 110px;
        border-radius: 8px;
        overflow: hidden;
        background: #F3F4F6;
        margin-bottom: 14px;
    }

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

    .hk-card-title {
        font-size: 15px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 8px;
    }

    .hk-card-desc {
        font-size: 12px;
        line-height: 1.6;
        color: #6B7280;
        margin: 0;
    }

    .hk-card-large .hk-card-image {
        height: 290px;
        margin-bottom: 16px;
    }

    .hk-card-large .hk-card-title {
        font-size: 16px;
    }

    .hk-card-large .hk-card-desc {
        font-size: 12.5px;
    }

    @media (max-width: 767px) {
        .hk-title {
            font-size: 24px;
        }
        .hk-card-large .hk-card-image {
            height: 200px;
        }
    }

    /* --------------------------------- About Kyokushin Style--------------------- */

    .about-kyokushin-page {
        font-family: 'Poppins', sans-serif;
        color: #0B1E3A;
        background: #FFFFFF;
    }
    .about-kyokushin-page *,
    .about-kyokushin-page *::before,
    .about-kyokushin-page *::after {
        box-sizing: border-box;
    }
    .about-kyokushin-page img {
        max-width: 100%;
        display: block;
    }

    .ak-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===================== SECTION 1: Hero Banner ===================== */
    .ak-banner {
        position: relative;
        width: 100%;
        height: 300px;
        background: #E31E24;
        overflow: hidden;
    }

    .ak-banner-image {
        position: absolute;
        top: 0;
        right: 0;
        width: 65%;
        height: 100%;
        clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    }

    .ak-banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ak-banner-text {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 190px;
    }

    .ak-banner-text h1 {
        color: #FFFFFF;
        font-size: 32px;
        font-weight: 800;
        line-height: 1.25;
        margin: 0;
        text-transform: uppercase;
    }

    /* ===================== Shared Section Spacing ===================== */
    .ak-section {
        padding: 70px 0;
    }

    .ak-title {
        font-size: 30px;
        font-weight: 800;
        color: #0B1E3A;
        margin: 0 0 18px;
    }

    .ak-body-text {
        font-size: 14px;
        line-height: 1.8;
        color: #6B7280;
        margin: 0 0 16px;
    }
    .ak-body-text:last-child { margin-bottom: 0; }

    /* ===================== SECTION 2: What Is Kyokushin ===================== */
    .ak-two-col {
        display: flex;
        align-items: center;
        gap: 50px;
    }

    .ak-two-col > div { flex: 1 1 50%; min-width: 0; }

    .ak-portrait-img img {
        width: 100%;
        border-radius: 0;
    }

    /* ===================== SECTION 3: Philosophy ===================== */
    .ak-philosophy-intro {
        font-size: 14px;
        line-height: 1.8;
        color: #6B7280;
        margin: 0 0 24px;
    }

    .ak-philosophy-item {
        border-left: 3px solid #E31E24;
        padding-left: 18px;
        margin-bottom: 22px;
    }

    .ak-philosophy-item h4 {
        font-size: 16px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 6px;
    }

    .ak-philosophy-item p {
        font-size: 13px;
        color: #6B7280;
        line-height: 1.7;
        margin: 0;
    }

    .ak-philosophy-note {
        font-size: 13px;
        font-style: italic;
        color: #6B7280;
        margin-top: 6px;
        line-height: 1.7;
    }

    /* ===================== SECTION 4: Training (black) ===================== */
    .ak-section-black {
        background: #111111;
        padding: 70px 0;
    }

    .ak-title-white {
        color: #FFFFFF;
        font-size: 28px;
        font-weight: 800;
        text-align: center;
        margin: 0 0 10px;
    }

    .ak-subtitle-white {
        color: #C7C9CC;
        font-size: 14px;
        text-align: center;
        margin: 0 0 40px;
    }

    .ak-training-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 40px;
    }

    .ak-training-item { text-align: center; }

    .ak-training-item img {
        width: 100%;
        height: 190px;
        object-fit: cover;
        margin-bottom: 14px;
    }

    .ak-training-item h5 {
        color: #E31E24;
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 8px;
    }

    .ak-training-item p {
        color: #C7C9CC;
        font-size: 12.5px;
        line-height: 1.7;
        margin: 0;
        padding: 0 6px;
    }

    .ak-training-footer {
        color: #C7C9CC;
        font-size: 14px;
        text-align: center;
        line-height: 1.8;
        max-width: 780px;
        margin: 0 auto;
    }

    /* ===================== SECTION 6: Core Values (red) ===================== */
    .ak-section-red {
        background: #E31E24;
        padding: 70px 0;
    }

    .ak-title-red-section {
        color: #FFFFFF;
        font-size: 30px;
        font-weight: 800;
        text-align: center;
        margin: 0 0 10px;
    }

    .ak-subtitle-red-section {
        color: #FCE0E1;
        font-size: 13.5px;
        text-align: center;
        max-width: 640px;
        margin: 0 auto 40px;
        line-height: 1.7;
    }

    .ak-values-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 40px;
    }

    .ak-value-card {
        background: #FFFFFF;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        padding: 24px;
    }

    .ak-value-card h5 {
        color: #E31E24;
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 10px;
    }

    .ak-value-card p {
        color: #6B7280;
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
    }

    .ak-values-footer {
        color: #FFFFFF;
        font-size: 13.5px;
        text-align: center;
        line-height: 1.8;
        max-width: 700px;
        margin: 0 auto;
    }

    /* ===================== SECTION 7: Why Choose (black footer) ===================== */
    .ak-section-footer {
        background: #111111;
        padding: 70px 0;
    }

    .ak-footer-title {
        color: #FFFFFF;
        font-size: 30px;
        font-weight: 800;
        text-align: center;
        margin: 0 0 22px;
    }

    .ak-footer-text {
        color: #C7C9CC;
        font-size: 14px;
        text-align: center;
        line-height: 1.8;
        max-width: 700px;
        margin: 0 auto 20px;
    }

    .ak-footer-italic {
        color: #FFFFFF;
        font-size: 14px;
        font-style: italic;
        text-align: center;
        margin: 30px 0 0;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 991px) {
        .ak-training-grid,
        .ak-values-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 767px) {
        .ak-banner {
            height: auto;
            min-height: 260px;
        }
        .ak-banner-image {
            width: 100%;
            clip-path: none;
            opacity: 0.25;
        }
        .ak-banner-text {
            padding: 40px 24px;
        }
        .ak-banner-text h1 {
            font-size: 24px;
        }

        .ak-two-col {
            flex-direction: column;
        }
        .ak-two-col.ak-reverse-mobile {
            flex-direction: column-reverse;
        }

        .ak-title { font-size: 24px; }
        .ak-title-white,
        .ak-title-red-section,
        .ak-footer-title { font-size: 22px; }

        .ak-training-grid,
        .ak-values-grid {
            grid-template-columns: 1fr;
        }
    }

    /* -------------------------------------------------100 man kumite style---------------------- */
    .hundred-kumite-page {
        font-family: 'Poppins', sans-serif;
        background: #FFFFFF;
        color: #555555;
        padding: 56px 0 64px;
    }
    .hundred-kumite-page *,
    .hundred-kumite-page *::before,
    .hundred-kumite-page *::after {
        box-sizing: border-box;
    }
    .hundred-kumite-page img {
        max-width: 100%;
        display: block;
    }

    .hk100-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* ===================== SECTION 1: Header ===================== */
    .hk100-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .hk100-header .hk100-title {
        font-size: 48px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 10px;
    }

    .hk100-subtitle {
        font-size: 15px;
        color: #6B7280;
        margin: 0;
    }

    /* ===================== Two-column rows ===================== */
    .hk100-row {
        display: flex;
        align-items: flex-start;
        gap: 48px;
        margin-bottom: 56px;
    }

    .hk100-row:last-child {
        margin-bottom: 0;
    }

    .hk100-col {
        flex: 1 1 50%;
        min-width: 0;
    }

    .hk100-image img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        border-radius: 8px;
    }

    .hk100-content .hk100-section-title {
        font-size: 36px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 18px;
    }

    .hk100-text {
        font-size: 16px;
        line-height: 1.8;
        color: #555555;
        margin: 0 0 18px;
    }
    .hk100-text:last-child {
        margin-bottom: 0;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 767px) {
        .hk100-header .hk100-title {
            font-size: 30px;
        }
        .hk100-content .hk100-section-title {
            font-size: 26px;
        }
        .hk100-row {
            flex-direction: column;
            gap: 20px;
            margin-bottom: 40px;
        }
        .hk100-image img {
            height: 220px;
        }
        .hk100-text {
            font-size: 14.5px;
        }
    }

    /* ----------------------------------------------------Ryuso, Kancho, Daihyo & Council Members------------------------------------- */
    .council-page {
        font-family: 'Poppins', sans-serif;
        background: #FFFFFF;
        color: #555555;
        padding: 48px 0 64px;
    }
    .council-page *,
    .council-page *::before,
    .council-page *::after {
        box-sizing: border-box;
    }
    .council-page img {
        max-width: 100%;
        display: block;
    }

    .cp-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* ===================== SECTION 1: Header ===================== */
    .cp-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .cp-title {
        font-size: 48px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 10px;
    }

    .cp-subtitle {
        font-size: 15px;
        color: #6B7280;
        margin: 0;
    }

    /* ===================== Member Row ===================== */
    .cp-member {
        display: flex;
        gap: 40px;
        padding: 40px 0;
    }

    .cp-member-left {
        flex: 0 0 300px;
        max-width: 300px;
    }

    .cp-role {
        font-size: 18px;
        font-weight: 700;
        color: #111111;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin: 0 0 16px;
    }

    .cp-image img {
        width: 100%;
        height: 360px;
        object-fit: cover;
    }

    .cp-member-right {
        flex: 1 1 0%;
        min-width: 0;
    }

    .cp-name {
        font-size: 34px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 10px;
    }

    .cp-member-subtitle {
        font-size: 15px;
        color: #6B7280;
        margin: 0 0 24px;
    }

    .cp-section-title {
        font-size: 18px;
        font-weight: 700;
        color: #111111;
        margin: 24px 0 12px;
    }
    .cp-section-title:first-of-type {
        margin-top: 0;
    }

    .cp-text {
        font-size: 15px;
        line-height: 1.8;
        color: #555555;
        margin: 0 0 14px;
    }
    .cp-text:last-child {
        margin-bottom: 0;
    }

    .cp-list {
        margin: 0 0 14px;
        padding-left: 20px;
        list-style: disc;
    }
    .cp-list:last-child {
        margin-bottom: 0;
    }

    .cp-list li {
        font-size: 15px;
        line-height: 1.8;
        color: #555555;
        margin-bottom: 8px;
    }
    .cp-list li:last-child {
        margin-bottom: 0;
    }

    /* ===================== Divider ===================== */
    .cp-divider {
        width: 100%;
        height: 1px;
        background: #E5E7EB;
        border: none;
        margin: 0;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 767px) {
        .cp-title {
            font-size: 30px;
        }
        .cp-member {
            flex-direction: column;
            gap: 20px;
        }
        .cp-member-left {
            flex: 1 1 auto;
            max-width: 100%;
        }
        .cp-name {
            font-size: 24px;
        }
        .cp-image img {
            height: 280px;
        }
    }

    /* =========================== New style added @20.07.26================ */
    /* ----------------------what is kyokushinryu page style--------------------------------- */
  .kyokushinryu-page * ,
  .kyokushinryu-page *::before,
  .kyokushinryu-page *::after {
    box-sizing: border-box;
  }
  .kyokushinryu-page img {
    max-width: 100%;
    display: block;
  }

  .kr-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

 /* ===================== Banner ===================== */
.kr-banner {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    /* background: #1a1a1a; */
}
.kr-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kr-banner-overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(0, 0, 0, 0.55);  */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    /* text-align: left; */
    padding: 20px;
    color: #ffffff;
}
.kr-banner-title {
    font-family: 'Poppins', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px;
            padding-left: 190px;

}
.kr-banner-text {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    max-width: 600px;
    /* margin: 0 auto; */
            padding-left: 190px;

}

  /* ===================== Content Area ===================== */
  .kr-content {
    background: #ffffff;
    padding: 40px 0 60px;
  }

  .kr-section {
    border: 1px solid #e6e6e6;
    background: #ffffff;
    padding: 30px;
    margin-bottom: 22px;
  }

  .kr-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #C21807;
    margin: 0 0 18px;
  }

  .kr-body-text {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 16px;
  }
  .kr-body-text:last-child {
    margin-bottom: 0;
  }

  .kr-body-bold {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #333333;
    font-weight: 600;
    line-height: 1.8;
    margin: 0 0 16px;
  }

  /* ===================== Flex layout helpers (replaces Bootstrap grid) ===================== */
  .kr-flex-row {
    display: flex;
    gap: 30px;
  }
  .kr-flex-row.kr-align-center {
    align-items: center;
  }
  .kr-flex-row.kr-mb {
    margin-bottom: 24px;
  }

  .kr-col-2-3 {
    flex: 0 0 calc(66.666% - 15px);
    max-width: calc(66.666% - 15px);
  }
  .kr-col-1-3 {
    flex: 0 0 calc(33.333% - 15px);
    max-width: calc(33.333% - 15px);
  }
  .kr-col-half {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
  .kr-col-third {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }

  /* ===================== Section 1: Way of Ultimate Truth ===================== */
  .kr-portrait-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
  }

  /* ===================== Meaning blocks (Karate / Budo) ===================== */
  .kr-kanji-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
  }

  .kr-definition-box {
    background: #f5f5f5;
    border-left: 4px solid #C21807;
    padding: 16px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .kr-definition-box p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 8px;
  }
  .kr-definition-box p:last-child {
    margin-bottom: 0;
  }
  .kr-definition-box strong {
    color: #333333;
  }

  .kr-quote-box {
    background: #f5f5f5;
    border-left: 4px solid #C21807;
    padding: 20px 24px;
    margin-top: 4px;
  }
  .kr-quote-box p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 12px;
    font-style: italic;
  }
  .kr-quote-box p:last-child {
    margin-bottom: 0;
  }

  /* ===================== Dogi Section ===================== */
  .kr-dogi-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
  }

  /* ===================== Philosophy Quote Panel ===================== */
  .kr-quote-panel {
    background: #f5f5f5;
    border-left: 4px solid #C21807;
    padding: 20px 24px;
    margin-bottom: 20px;
  }
  .kr-quote-panel p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 0;
    font-style: italic;
  }

  /* ===================== Society Section ===================== */
  .kr-society-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    margin-bottom: 20px;
  }

  .kr-info-box {
    background: #f5f5f5;
    border: 1px solid #e6e6e6;
    padding: 20px 24px;
    margin-top: 20px;
  }
  .kr-info-box-title {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 12px;
  }
  .kr-info-box p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 12px;
  }
  .kr-info-box p:last-child {
    margin-bottom: 0;
  }

  /* ===================== Responsive ===================== */
  @media (max-width: 991.98px) {
    .kr-banner { height: auto; min-height: 260px; }
    .kr-banner-shape { width: 100%; clip-path: none; padding: 32px 24px; }
    .kr-banner-image { position: static; width: 100%; height: 220px; }
    .kr-banner { display: flex; flex-direction: column; height: auto; }

    .kr-flex-row {
      flex-direction: column;
      gap: 20px;
    }
    .kr-col-2-3,
    .kr-col-1-3,
    .kr-col-half,
    .kr-col-third {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }

  @media (max-width: 767.98px) {
    .kr-section { padding: 22px 18px; }
    .kr-banner-title { font-size: 28px; }
  }

  /* -------------------The meaning of  Osu page style--------------------- */
    .osu-page {
        font-family: 'Poppins', sans-serif;
        background: #FFFFFF;
        color: #555555;
        padding: 40px 0 60px;
    }
    .osu-page *,
    .osu-page *::before,
    .osu-page *::after {
        box-sizing: border-box;
    }
    .osu-page img {
        max-width: 100%;
        display: block;
    }

    .osu-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===================== Page Title ===================== */
    .osu-page-title {
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 30px;
    }

    /* ===================== Card ===================== */
    .osu-card {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 4px;
        padding: 28px 30px;
        margin-bottom: 24px;
    }

    .osu-section-title {
        font-size: 18px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 16px;
    }

    .osu-text {
        font-size: 13.5px;
        line-height: 1.9;
        color: #6B7280;
        margin: 0 0 14px;
    }
    .osu-text:last-child {
        margin-bottom: 0;
    }

    /* ===================== Intro row: text + image ===================== */
    .osu-flex-row {
        display: flex;
        gap: 26px;
    }

    .osu-flex-text {
        flex: 1 1 62%;
        min-width: 0;
    }

    .osu-flex-image {
        flex: 0 0 32%;
    }

    .osu-flex-image img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 4px;
    }

    /* ===================== Kanji block ===================== */
    .osu-kanji-row {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .osu-kanji-char {
        flex: 0 0 auto;
        font-size: 64px;
        font-weight: 700;
        color: #111111;
        line-height: 1;
        font-family: 'Poppins', sans-serif;
    }

    .osu-kanji-desc {
        flex: 1 1 auto;
        font-size: 13.5px;
        line-height: 1.9;
        color: #6B7280;
        margin: 0;
    }

    /* ===================== Quote block ===================== */
    .osu-quote {
        font-size: 13.5px;
        line-height: 1.9;
        color: #6B7280;
        font-style: italic;
        margin: 0 0 14px;
    }

    .osu-quote-citation {
        font-size: 13px;
        font-weight: 700;
        color: #0B1E3A;
        font-style: italic;
        margin: 0;
    }

    /* ===================== Daily Life row: image + text ===================== */
    .osu-daily-row {
        display: flex;
        gap: 26px;
    }

    .osu-daily-image {
        flex: 0 0 34%;
    }

    .osu-daily-image img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        border-radius: 4px;
    }

    .osu-daily-content {
        flex: 1 1 66%;
        min-width: 0;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 700px) {
        .osu-flex-row,
        .osu-daily-row {
            flex-direction: column;
        }
        .osu-flex-image,
        .osu-daily-image {
            flex: 1 1 auto;
        }
        .osu-flex-image img,
        .osu-daily-image img {
            height: 200px;
        }
        .osu-kanji-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }
        .osu-page-title {
            font-size: 22px;
        }
    }

/* --------------------------------alliance page style ------------------- */
    .alliance-page {
        font-family: 'Poppins', sans-serif;
        background: #ffffff;
        color: #0B1E3A;
        padding: 60px 0 80px;
    }
    .alliance-page *,
    .alliance-page *::before,
    .alliance-page *::after {
        box-sizing: border-box;
    }
    .alliance-page img {
        max-width: 100%;
        display: block;
    }

    .alliance-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===== Header ===== */
    .alliance-header {
        text-align: center;
        margin-bottom: 48px;
    }
    .alliance-title {
        font-size: 48px;
        font-weight: 800;
        color: #0B1E3A;
        margin: 0 0 10px;
        letter-spacing: 0.02em;
    }
    .alliance-subtitle {
        font-size: 18px;
        color: #555555;
        font-weight: 400;
        margin: 0;
        letter-spacing: 0.01em;
    }

    /* ===== Partners Section ===== */
    .alliance-partners-heading {
        text-align: center;
        margin-bottom: 32px;
    }
    .alliance-partners-heading h2 {
        font-size: 28px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 6px;
    }
    .alliance-partners-heading p {
        font-size: 14px;
        color: #777777;
        margin: 0;
    }

    /* ===== Partner Grid ===== */
    .alliance-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .alliance-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 24px 16px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        transition: box-shadow 0.2s ease;
    }
    .alliance-card:hover {
        box-shadow: 0 8px 20px rgba(11, 30, 58, 0.06);
    }
    .alliance-card img {
        max-height: 200px;
        width: auto;
        object-fit: contain;
    }

    /* ===== Responsive ===== */
    @media (max-width: 991.98px) {
        .alliance-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .alliance-title {
            font-size: 36px;
        }
    }

    @media (max-width: 575.98px) {
        .alliance-grid {
            grid-template-columns: 1fr;
        }
        .alliance-title {
            font-size: 28px;
        }
        .alliance-subtitle {
            font-size: 15px;
        }
        .alliance-partners-heading h2 {
            font-size: 22px;
        }
        .alliance-page {
            padding: 40px 0 60px;
        }
        .alliance-card {
            min-height: 100px;
        }
        .alliance-card img {
            max-height: 60px;
        }
    }

    /* -------------------------Symbolism of the belts style -------------------- */
    .symbolism-belts-page {
        font-family: 'Poppins', sans-serif;
        background: #FFFFFF;
        color: #555555;
    }
    .symbolism-belts-page *,
    .symbolism-belts-page *::before,
    .symbolism-belts-page *::after {
        box-sizing: border-box;
    }
    .symbolism-belts-page img {
        max-width: 100%;
        display: block;
    }

    .sob-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* ===================== Hero Banner ===================== */
    .sob-banner {
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background: #1a1a1a;
    }
    .sob-banner-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sob-banner-shape {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 55%;
        background: #C21807;
        clip-path: polygon(0 0, 100% 0, 68% 100%, 0% 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 40px;
        color: #ffffff;
    }
    .sob-banner-title {
        font-size: 50px;
        font-weight: 800;
        line-height: 1.2;
        /* margin: 0 0 12px; */
        text-transform: uppercase;
        padding-left: 190px;
    }
    .sob-banner-text {
        font-size: 12.5px;
        line-height: 1.7;
        /* max-width: 300px; */
        margin: 0;
        padding-left: 190px;
    }

    /* ===================== Belt Row ===================== */
    .sob-belt-row {
        padding: 50px 0;
    }
    .sob-belt-row.sob-bg-light {
        background: #F7F7F7;
    }
    .sob-belt-row.sob-bg-white {
        background: #FFFFFF;
    }

    .sob-belt-inner {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .sob-belt-image {
        flex: 0 0 220px;
    }
    .sob-belt-image img {
        width: 100%;
        height: 130px;
        object-fit: contain;
    }

    .sob-belt-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sob-belt-title {
        font-size: 20px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 12px;
    }

    .sob-belt-quote {
        font-size: 13px;
        font-style: italic;
        color: #6B7280;
        line-height: 1.8;
        margin: 0 0 14px;
    }

    .sob-belt-text {
        font-size: 13.5px;
        line-height: 1.85;
        color: #555555;
        margin: 0 0 14px;
    }
    .sob-belt-text:last-child {
        margin-bottom: 0;
    }

    .sob-belt-box {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        padding: 18px 22px;
        margin-top: 16px;
    }
    .sob-belt-box-title {
        font-size: 13.5px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 10px;
    }
    .sob-belt-box ul {
        margin: 0;
        padding-left: 18px;
    }
    .sob-belt-box ul li {
        font-size: 13px;
        color: #555555;
        line-height: 1.8;
    }

    .sob-two-col-box {
        display: flex;
        gap: 30px;
    }
    .sob-two-col-box > div {
        flex: 1 1 50%;
        min-width: 0;
    }

    /* ===================== What is Grading ===================== */
    .sob-grading-row {
        padding: 50px 0;
        background: #FFFFFF;
    }
    .sob-grading-title {
        font-size: 20px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 16px;
    }
    .sob-grading-inner {
        display: flex;
        gap: 40px;
    }
    .sob-grading-text {
        flex: 1 1 55%;
        min-width: 0;
    }
    .sob-grading-text p {
        font-size: 13.5px;
        line-height: 1.85;
        color: #555555;
        margin: 0 0 14px;
    }
    .sob-grading-text p:last-child {
        margin-bottom: 0;
    }
    .sob-grading-text strong {
        color: #111111;
    }

    .sob-grading-images {
        flex: 1 1 40%;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .sob-grading-image-block {
        position: relative;
    }
    .sob-grading-image-block img {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }
    .sob-grading-image-caption {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: rgba(0,0,0,0.65);
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 10px;
    }

    /* ===================== CTA Footer ===================== */
    .sob-cta {
        background: #111111;
        padding: 40px 0;
    }
    .sob-cta-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
    }
    .sob-cta-title {
        color: #FFFFFF;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.4;
        margin: 0;
        max-width: 600px;
    }
    .sob-cta-btn {
        display: inline-block;
        background: #E85D25;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        padding: 12px 28px;
        border-radius: 4px;
        text-decoration: none;
        white-space: nowrap;
    }
    .sob-cta-btn:hover {
        background: #D14E1A;
        color: #FFFFFF;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 767px) {
        .sob-banner {
            height: auto;
            min-height: 220px;
        }
        .sob-banner-shape {
            width: 100%;
            clip-path: none;
            padding: 30px 24px;
        }
        .sob-banner-image {
            position: static;
            width: 100%;
            height: 180px;
        }
        .sob-banner {
            display: flex;
            flex-direction: column;
            height: auto;
        }

        .sob-belt-inner,
        .sob-two-col-box,
        .sob-grading-inner {
            flex-direction: column;
        }
        .sob-belt-image {
            flex: 1 1 auto;
            max-width: 220px;
        }
        .sob-cta-inner {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    /* =========================================Sponsors page style=========================== */
    .sponsors-page {
        font-family: 'Poppins', sans-serif;
        background: #ffffff;
        color: #0B1E3A;
        padding: 60px 0 80px;
    }
    .sponsors-page *,
    .sponsors-page *::before,
    .sponsors-page *::after {
        box-sizing: border-box;
    }
    .sponsors-page img {
        max-width: 100%;
        display: block;
    }

    .sponsors-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===== Header ===== */
    .sponsors-header {
        text-align: center;
        margin-bottom: 48px;
    }
    .sponsors-title {
        font-size: 42px;
        font-weight: 800;
        color: #0B1E3A;
        margin: 0;
        letter-spacing: 0.02em;
    }

    /* ===== Sponsor Grid ===== */
    .sponsors-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .sponsors-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 140px;
        transition: box-shadow 0.2s ease;
    }
    .sponsors-card:hover {
        box-shadow: 0 8px 20px rgba(11, 30, 58, 0.06);
    }
    .sponsors-card img {
        max-height: 80px;
        width: auto;
        object-fit: contain;
    }
    .sponsors-card .sponsor-text {
        font-size: 18px;
        font-weight: 700;
        color: #0B1E3A;
        letter-spacing: 0.02em;
        line-height: 1.3;
    }
    .sponsors-card .sponsor-text.small {
        font-size: 14px;
        font-weight: 600;
        color: #555555;
    }

    /* ===== Full-width card ===== */
    .sponsors-card-full {
        grid-column: 1 / -1;
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100px;
        transition: box-shadow 0.2s ease;
    }
    .sponsors-card-full:hover {
        box-shadow: 0 8px 20px rgba(11, 30, 58, 0.06);
    }
    .sponsors-card-full .sponsor-text {
        font-size: 22px;
        font-weight: 700;
        color: #0B1E3A;
        letter-spacing: 0.02em;
        line-height: 1.3;
    }
    .sponsors-card-full .sponsor-text .highlight {
        color: #C21807;
    }

    /* ===== Responsive ===== */
    @media (max-width: 991.98px) {
        .sponsors-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .sponsors-title {
            font-size: 34px;
        }
    }

    @media (max-width: 575.98px) {
        .sponsors-grid {
            grid-template-columns: 1fr;
        }
        .sponsors-title {
            font-size: 28px;
        }
        .sponsors-page {
            padding: 40px 0 60px;
        }
        .sponsors-card {
            min-height: 100px;
        }
        .sponsors-card img {
            max-height: 60px;
        }
        .sponsors-card-full .sponsor-text {
            font-size: 18px;
        }
    }

    /* ----------------------------------e-book library page style ------------------------------- */
    .ebook-page {
        font-family: 'Poppins', sans-serif;
        background: #ffffff;
        color: #0B1E3A;
        padding: 60px 0 80px;
    }
    .ebook-page *,
    .ebook-page *::before,
    .ebook-page *::after {
        box-sizing: border-box;
    }
    .ebook-page img {
        max-width: 100%;
        display: block;
    }

    .ebook-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===== Header ===== */
    .ebook-header {
        text-align: center;
        margin-bottom: 48px;
    }
    .ebook-title {
        font-size: 38px;
        font-weight: 800;
        color: #0B1E3A;
        margin: 0;
        letter-spacing: 0.02em;
    }

    /* ===== Section ===== */
    .ebook-section {
        margin-bottom: 40px;
    }
    .ebook-section:last-child {
        margin-bottom: 0;
    }

    .ebook-section-heading {
        font-size: 22px;
        font-weight: 700;
        color: #ed0707;
        margin: 0 0 16px;
        letter-spacing: 0.01em;
        padding-bottom: 6px;
        border-bottom: 2px solid #E5E7EB;
    }

    /* ===== 2 Column Grid ===== */
    .ebook-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ===== Book Card - Horizontal Layout ===== */
    .ebook-card {
        display: flex;
        flex-direction: row;
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        overflow: hidden;
        transition: box-shadow 0.2s ease;
    }
    .ebook-card:hover {
        box-shadow: 0 6px 16px rgba(11, 30, 58, 0.08);
    }

    .ebook-card-image {
        flex: 0 0 35%;
        max-width: 35%;
        aspect-ratio: 1 / 1;
        background: #f0f0f0;
        overflow: hidden;
    }
    .ebook-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ebook-card-body {
        flex: 1;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .ebook-card-title {
        font-size: 15px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 4px;
        line-height: 1.3;
    }
    .ebook-card-date {
        font-size: 13px;
        color: #888888;
        font-weight: 500;
        margin: 0 0 4px;
    }
    .ebook-card-category {
        font-size: 13px;
        color: #555555;
        font-weight: 500;
        margin: 0 0 2px;
    }
    .ebook-card-meta {
        font-size: 13px;
        color: #888888;
        font-weight: 400;
        margin: 0;
    }

    /* ===== Responsive ===== */
    @media (max-width: 575.98px) {
        .ebook-page {
            padding: 40px 0 60px;
        }
        .ebook-title {
            font-size: 28px;
        }
        .ebook-section-heading {
            font-size: 19px;
        }
        .ebook-row {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        .ebook-card {
            flex-direction: column;
        }
        .ebook-card-image {
            flex: 0 0 auto;
            max-width: 100%;
            aspect-ratio: 16 / 9;
        }
        .ebook-card-title {
            font-size: 14px;
        }
    }

    /* ==========================tutorial video page style -------------------------------------- */
    .tutorial-page {
        font-family: 'Poppins', sans-serif;
        background: #ffffff;
        color: #0B1E3A;
        padding: 60px 0 80px;
    }
    .tutorial-page *,
    .tutorial-page *::before,
    .tutorial-page *::after {
        box-sizing: border-box;
    }
    .tutorial-page img {
        max-width: 100%;
        display: block;
    }

    .tutorial-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===== Header ===== */
    .tutorial-header {
        text-align: center;
        margin-bottom: 40px;
    }
    .tutorial-title {
        font-size: 38px;
        font-weight: 800;
        color: #0B1E3A;
        margin: 0;
        letter-spacing: 0.02em;
    }

    /* ===== Video Grid (2 Columns) ===== */
    .tutorial-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .tutorial-item {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        overflow: hidden;
        transition: box-shadow 0.2s ease;
        cursor: pointer;
    }
    .tutorial-item:hover {
        box-shadow: 0 6px 16px rgba(11, 30, 58, 0.10);
    }

    .tutorial-thumbnail {
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #1a1a1a;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tutorial-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .tutorial-thumbnail .play-icon {
        position: absolute;
        color: #ffffff;
        font-size: 48px;
        opacity: 0.85;
        pointer-events: none;
        text-shadow: 0 2px 12px rgba(0,0,0,0.6);
        transition: opacity 0.2s ease;
    }
    .tutorial-thumbnail:hover .play-icon {
        opacity: 1;
        transform: scale(1.05);
    }

    .tutorial-info {
        padding: 16px 18px 18px;
    }
    .tutorial-info .title {
        font-size: 14px;
        font-weight: 700;
        color: #0B1E3A;
        margin: 0 0 6px;
        line-height: 1.4;
    }
    .tutorial-info .duration {
        font-size: 13px;
        color: #888888;
        font-weight: 500;
        margin: 0;
    }

    /* ===== Video Modal ===== */
    .tutorial-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .tutorial-modal.open {
        display: flex;
    }
    .tutorial-modal .modal-content {
        position: relative;
        max-width: 800px;
        width: 100%;
        background: #000;
        border-radius: 12px;
        overflow: hidden;
    }
    .tutorial-modal .modal-content video {
        width: 100%;
        display: block;
    }
    .tutorial-modal .close-btn {
        position: absolute;
        top: 12px;
        right: 16px;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        z-index: 10;
        background: none;
        border: none;
        font-family: 'Poppins', sans-serif;
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }
    .tutorial-modal .close-btn:hover {
        opacity: 1;
    }
    .tutorial-modal .modal-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px 20px 16px;
        background: linear-gradient(transparent, rgba(0,0,0,0.8));
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        pointer-events: none;
    }

    /* ===== Responsive ===== */
    @media (max-width: 991.98px) {
        .tutorial-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
    }

    @media (max-width: 575.98px) {
        .tutorial-page {
            padding: 40px 0 60px;
        }
        .tutorial-title {
            font-size: 28px;
        }
        .tutorial-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }
        .tutorial-info .title {
            font-size: 15px;
        }
        .tutorial-modal .modal-title {
            font-size: 14px;
            padding: 20px 16px 12px;
        }
    }

/* --------------------------------Stationery Page Style---------------------------- */
    .stationery-page {
        font-family: 'Poppins', sans-serif;
        background: #ffffff;
        color: #0B1E3A;
        padding: 60px 0 80px;
    }
    .stationery-page *,
    .stationery-page *::before,
    .stationery-page *::after {
        box-sizing: border-box;
    }
    .stationery-page img {
        max-width: 100%;
        display: block;
    }

    .stationery-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===== Header ===== */
    .stationery-header {
        text-align: center;
        margin-bottom: 40px;
    }
    .stationery-title {
        font-size: 42px;
        font-weight: 800;
        color: #0B1E3A;
        margin: 0;
        letter-spacing: 0.02em;
    }
    .stationery-subtitle {
        font-size: 20px;
        font-weight: 400;
        color: #555555;
        margin: 4px 0 0;
        letter-spacing: 0.01em;
    }

    /* ===== Grid ===== */
    .stationery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    /* ===== Item Card ===== */
    .stationery-item {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        overflow: hidden;
        transition: box-shadow 0.2s ease;
    }
    .stationery-item:hover {
        box-shadow: 0 6px 16px rgba(11, 30, 58, 0.08);
    }

    .stationery-item-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #f5f5f5;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stationery-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .stationery-item-image .placeholder-text {
        font-size: 12px;
        color: #aaaaaa;
        font-weight: 600;
        text-align: center;
        padding: 10px;
    }

    /* ===== Body: Name Left, Download Button Right ===== */
    .stationery-item-body {
        padding: 12px 14px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .stationery-item-name {
        font-size: 13px;
        font-weight: 600;
        color: #0B1E3A;
        margin: 0;
        line-height: 1.3;
        text-align: left;
        cursor: pointer;
        transition: color 0.2s ease;
        flex: 1;
        min-width: 0;
    }
    .stationery-item-name:hover {
        color: #C21807;
    }

    .stationery-btn-download {
        display: inline-block;
        background: #0B1E3A;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 16px;
        border-radius: 6px;
        text-decoration: none;
        transition: background 0.2s ease;
        border: none;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .stationery-btn-download:hover {
        background: #C21807;
    }

    /* ===== Item with text only (no image) ===== */
    .stationery-item.text-item .stationery-item-image {
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stationery-item.text-item .stationery-item-image .brand-text {
        font-size: 28px;
        font-weight: 800;
        color: #0B1E3A;
        letter-spacing: 0.04em;
    }
    .stationery-item.text-item .stationery-item-image .brand-text.small {
        font-size: 18px;
    }
    .stationery-item.text-item .stationery-item-image .brand-text.chinese {
        font-family: 'Times New Roman', serif;
        font-size: 32px;
    }

    /* ===== Modal / Lightbox ===== */
    .stationery-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }
    .stationery-modal.open {
        display: flex;
    }
    .stationery-modal .modal-content {
        position: relative;
        max-width: 600px;
        width: 100%;
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
    }
    .stationery-modal .modal-content img {
        width: 100%;
        height: auto;
        display: block;
    }
    .stationery-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 14px;
        color: #ffffff;
        font-size: 30px;
        cursor: pointer;
        z-index: 10;
        background: rgba(0,0,0,0.5);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Poppins', sans-serif;
        transition: background 0.2s ease;
    }
    .stationery-modal .close-btn:hover {
        background: rgba(0,0,0,0.8);
    }
    .stationery-modal .modal-download-btn {
        display: inline-block;
        background: #0B1E3A;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 30px;
        border-radius: 6px;
        text-decoration: none;
        transition: background 0.2s ease;
        border: none;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
        margin: 16px 0 20px;
    }
    .stationery-modal .modal-download-btn:hover {
        background: #C21807;
    }
    .stationery-modal .modal-footer {
        text-align: center;
        padding: 0 20px 10px;
    }
    .stationery-modal .modal-title-text {
        font-size: 16px;
        font-weight: 600;
        color: #0B1E3A;
        margin: 16px 0 0;
        text-align: center;
    }

    /* ===== Responsive ===== */
    @media (max-width: 991.98px) {
        .stationery-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
        .stationery-title {
            font-size: 34px;
        }
    }

    @media (max-width: 767.98px) {
        .stationery-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .stationery-title {
            font-size: 28px;
        }
        .stationery-subtitle {
            font-size: 17px;
        }
    }

    @media (max-width: 575.98px) {
        .stationery-page {
            padding: 40px 0 60px;
        }
        .stationery-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
        .stationery-title {
            font-size: 24px;
        }
        .stationery-subtitle {
            font-size: 15px;
        }
        .stationery-item-body {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }
        .stationery-item-name {
            font-size: 11px;
            text-align: center;
        }
        .stationery-btn-download {
            font-size: 11px;
            padding: 4px 14px;
            text-align: center;
        }
        .stationery-item.text-item .stationery-item-image .brand-text {
            font-size: 20px;
        }
        .stationery-item.text-item .stationery-item-image .brand-text.chinese {
            font-size: 24px;
        }
        .stationery-modal {
            padding: 20px;
        }
    }

    /* --------------------- Terminology kata khihon waza header style ----------------------------- */
    /* ===== Nested Dropdown inside Learn ===== */
.nav-dropdown-sub {
    position: relative;
}
.nav-dropdown-sub .nav-link-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0F1B2E;
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    font-family: 'Poppins', sans-serif;
}
.nav-dropdown-sub .nav-link-sub:hover {
    background: #FBEAEA;
    color: #E53232;
}
.nav-dropdown-sub .caret-sub {
    width: 11px;
    height: 11px;
    margin-left: 8px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform .2s ease;
}
.nav-dropdown-sub:hover .caret-sub {
    transform: rotate(0deg);
}

.dropdown-menu-sub {
    position: absolute;
    top: -8px;
    left: calc(100% + 6px);
    min-width: 160px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15,27,46,0.14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: all .18s ease;
    z-index: 70;
}
.nav-dropdown-sub:hover .dropdown-menu-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.dropdown-menu-sub a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0F1B2E;
    transition: background .15s ease, color .15s ease;
}
.dropdown-menu-sub a:hover {
    background: #FBEAEA;
    color: #E53232;
}

/* ===== Mobile responsive fix ===== */
@media (max-width: 1023px) {
    .nav-dropdown-sub .dropdown-menu-sub {
        position: static;
        box-shadow: none;
        padding-left: 16px;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    .nav-dropdown-sub.open .dropdown-menu-sub {
        display: block;
    }
    .nav-dropdown-sub .caret-sub {
        transform: rotate(0deg);
    }
    .nav-dropdown-sub.open .caret-sub {
        transform: rotate(180deg);
    }
}

/* ================================== New style added @ 21.07.26====================================== */
/* -------------------------------- Kata Khihon Waza Page Style ---------------------------- */
  .kt-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* ===================== Banner ===================== */
  .kt-banner {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #1a1a1a;
  }
  .kt-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .kt-banner-shape {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 42%;
    background: #C21807;
    clip-path: polygon(0 0, 100% 0, 68% 100%, 0% 100%);
    display: flex;
    align-items: center;
    padding: 0 40px;
    color: #ffffff;
  }
  .kt-banner-title {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
  }

  /* ===================== Content Area ===================== */
  .kt-content {
    background: #ffffff;
    padding: 40px 0 60px;
  }

  .kt-card {
    border: 1px solid #e6e6e6;
    background: #ffffff;
    padding: 30px;
    margin-bottom: 22px;
  }

  .kt-title {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #C21807;
    margin: 0 0 14px;
  }

  .kt-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 14px;
  }
  .kt-desc:last-of-type {
    margin-bottom: 0;
  }

  .kt-list {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 14px;
    padding-left: 22px;
  }
  .kt-list li {
    margin-bottom: 4px;
  }
  .kt-sublist {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin: 4px 0 4px;
    padding-left: 22px;
    list-style-type: circle;
  }

  .kt-number {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #9CA3AF;
    margin: 14px 0 0;
  }

  /* ===================== Responsive ===================== */
  @media (max-width: 991.98px) {
    .kt-banner { height: auto; min-height: 160px; }
    .kt-banner-shape { width: 100%; clip-path: none; padding: 24px; justify-content: center; }
    .kt-banner-image { position: static; width: 100%; height: 160px; }
    .kt-banner { display: flex; flex-direction: column; height: auto; }
  }

  @media (max-width: 767.98px) {
    .kt-card { padding: 22px 18px; }
    .kt-banner-title { font-size: 28px; }
    .kt-title { font-size: 19px; }
  }

  /* kihon */
.kihon-page{
    background:#fff;
    padding:0;
}

.kihon-banner{
    width:100%;
    height:430px;
    overflow:hidden;
}

.kihon-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

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

@media (max-width:767px){
    .kihon-banner{
        height:220px;
    }
}

/* Waza */
.waza-page{
    background:#fff;
    padding:0;
}

.waza-banner{
    width:100%;
    height:430px;
    overflow:hidden;
}

.waza-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

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

@media (max-width:767px){
    .waza-banner{
        height:220px;
    }
}

/* .----------------------------- Features page Style ----------------------------------------- */
    .features-page {
        font-family: 'Poppins', sans-serif;
        background: #FFFFFF;
        color: #6B7280;
    }
    .features-page *,
    .features-page *::before,
    .features-page *::after {
        box-sizing: border-box;
    }
    .features-page img {
        max-width: 100%;
        display: block;
    }
    .features-page a {
        text-decoration: none;
    }

    .ft-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .ft-section {
        padding: 56px 0;
    }

    .ft-heading-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 36px;
    }

    .ft-heading-row h2 {
        flex: 0 0 auto;
        max-width: 340px;
        font-size: 26px;
        font-weight: 700;
        color: #111111;
        margin: 0;
        line-height: 1.3;
    }

    .ft-heading-row p {
        flex: 1 1 auto;
        font-size: 13.5px;
        line-height: 1.8;
        color: #6B7280;
        margin: 0;
        max-width: 480px;
    }

    .ft-centered-heading {
        text-align: center;
        margin-bottom: 40px;
    }
    .ft-centered-heading h2 {
        font-size: 26px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 8px;
    }
    .ft-centered-heading p {
        font-size: 13.5px;
        color: #6B7280;
        margin: 0;
    }

    /* ===================== SECTION 1: Hero ===================== */
    .ft-hero-row {
        display: flex;
        align-items: center;
        gap: 40px;
    }
    .ft-hero-text {
        flex: 1 1 50%;
        min-width: 0;
    }
    .ft-hero-text h1 {
        font-size: 30px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 14px;
        line-height: 1.3;
    }
    .ft-hero-text p {
        font-size: 13.5px;
        line-height: 1.8;
        color: #6B7280;
        margin: 0;
        max-width: 420px;
    }
    .ft-hero-images {
        flex: 1 1 50%;
        display: flex;
        gap: 16px;
    }
    .ft-hero-image-card {
        flex: 1 1 50%;
        text-align: center;
    }
    .ft-hero-image-card img {
        width: 100%;
        height: 130px;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 10px;
    }
    .ft-hero-image-card span {
        font-size: 12.5px;
        font-weight: 600;
        color: #111111;
    }

    /* ===================== SECTION 2: Welcome ===================== */
    .ft-welcome-row {
        display: flex;
        gap: 40px;
        align-items: stretch;
    }
    .ft-welcome-image {
        flex: 1 1 45%;
    }
    .ft-welcome-image img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        border-radius: 6px;
    }
    .ft-welcome-list {
        flex: 1 1 55%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
    }
    .ft-welcome-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        border-radius: 6px;
        padding: 16px 18px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }
    .ft-welcome-icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #FDECEC;
        color: #E31E24;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    .ft-welcome-item-content h4 {
        font-size: 14.5px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 4px;
    }
    .ft-welcome-item-content p {
        font-size: 12.5px;
        color: #6B7280;
        margin: 0;
        line-height: 1.7;
    }

    /* ===================== SECTION 3: Why Choose (red) ===================== */
    .ft-red-section {
        background: #E31E24;
        padding: 56px 0;
    }
    .ft-red-section .ft-heading-row h2,
    .ft-red-section .ft-heading-row p {
        color: #FFFFFF;
    }
    .ft-red-section .ft-heading-row p {
        color: #FCE0E1;
    }

    .ft-red-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .ft-red-card {
        background: #FFFFFF;
        border-radius: 8px;
        padding: 28px 24px;
    }
    .ft-red-card-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #FDECEC;
        color: #E31E24;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 18px;
    }
    .ft-red-card h4 {
        font-size: 15px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 10px;
    }
    .ft-red-card p {
        font-size: 13px;
        color: #6B7280;
        line-height: 1.75;
        margin: 0;
    }

    /* ===================== SECTION 4: Meet Our Team ===================== */
    .ft-team-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .ft-team-card {
        text-align: center;
    }
    .ft-team-card img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 14px;
    }
    .ft-team-card h4 {
        font-size: 15px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 4px;
    }
    .ft-team-card span {
        font-size: 12px;
        color: #6B7280;
    }

    /* ===================== SECTION 5: Core Values ===================== */
    .ft-values-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .ft-value-card {
        text-align: center;
        padding: 20px 10px;
    }
    .ft-value-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #FDECEC;
        color: #E31E24;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin: 0 auto 16px;
    }
    .ft-value-card h4 {
        font-size: 14.5px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 6px;
    }
    .ft-value-card p {
        font-size: 12px;
        color: #6B7280;
        margin: 0;
    }

    /* ===================== SECTION 6: Gallery ===================== */
    .ft-gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 250px;
        gap: 14px;
    }
    .ft-gallery-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }
    .ft-gallery-item-tall {
        grid-row: span 2;
    }

    /* ===================== SECTION 7: Latest News ===================== */
    .ft-news-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .ft-news-card {
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .ft-news-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }
    .ft-news-body {
        padding: 18px 20px 22px;
    }
    .ft-news-date {
        font-size: 11px;
        color: #E31E24;
        font-weight: 600;
        margin: 0 0 8px;
    }
    .ft-news-body h4 {
        font-size: 14.5px;
        font-weight: 700;
        color: #111111;
        margin: 0 0 10px;
        line-height: 1.4;
    }
    .ft-news-body p {
        font-size: 12.5px;
        color: #6B7280;
        line-height: 1.7;
        margin: 0 0 14px;
    }
    .ft-news-readmore {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        color: #FFFFFF;
        background: #111111;
        padding: 8px 16px;
        border-radius: 4px;
    }
    .ft-news-readmore:hover {
        background: #E31E24;
        color: #FFFFFF;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 991px) {
        .ft-red-cards,
        .ft-team-grid,
        .ft-values-grid,
        .ft-news-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .ft-gallery-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 767px) {
        .ft-hero-row,
        .ft-welcome-row,
        .ft-heading-row {
            flex-direction: column;
        }
        .ft-heading-row h2 {
            max-width: 100%;
        }
        .ft-hero-images {
            width: 100%;
        }
        .ft-red-cards,
        .ft-team-grid,
        .ft-values-grid,
        .ft-news-grid,
        .ft-gallery-grid {
            grid-template-columns: 1fr;
        }
        .ft-gallery-item-tall {
            grid-row: span 1;
        }
    }

    /* ===============================Announcement View All page style======================= */
    .announcements-page {
        font-family: 'Poppins', sans-serif;
        background: #F4F6FB;
        color: #6B7280;
        padding: 40px 0 60px;
        min-height: 100%;
    }
    .announcements-page *,
    .announcements-page *::before,
    .announcements-page *::after {
        box-sizing: border-box;
    }
    .announcements-page img {
        max-width: 100%;
        display: block;
    }
    .announcements-page a {
        text-decoration: none;
    }

    .ann-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* ===================== Header ===================== */
    .ann-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .ann-header-icon {
        font-size: 26px;
        line-height: 1;
    }

    .ann-header-title {
        font-size: 28px;
        font-weight: 700;
        color: #1E3A8A;
        margin: 0;
    }

    .ann-divider {
        width: 100%;
        height: 1px;
        background: #E5E7EB;
        border: none;
        margin: 0 0 32px;
    }

    /* ===================== Grid ===================== */
    .ann-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
    }

    /* ===================== Card ===================== */
    .ann-card {
        background: #FFFFFF;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
        display: flex;
        flex-direction: column;
        max-width: 390px;
    }

    .ann-card-image {
        width: 100%;
        height: 200px;
        background: #F3F4F6;
        overflow: hidden;
    }
    .ann-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ann-card-body {
        padding: 20px 22px 24px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .ann-card-title {
        font-size: 17px;
        font-weight: 700;
        color: #111827;
        line-height: 1.4;
        margin: 0 0 14px;
    }

    .ann-card-date {
        display: inline-block;
        align-self: flex-start;
        background: #F3F4F6;
        color: #6B7280;
        font-size: 12px;
        font-weight: 500;
        padding: 4px 12px;
        border-radius: 20px;
        margin-bottom: 14px;
    }

    .ann-card-excerpt {
        font-size: 13.5px;
        line-height: 1.75;
        color: #6B7280;
        margin: 0 0 18px;
        flex: 1;
    }

    .ann-card-readmore {
        font-size: 13.5px;
        font-weight: 600;
        color: #E31E24;
    }
    .ann-card-readmore:hover {
        color: #C4181D;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 767px) {
        .ann-header-title {
            font-size: 22px;
        }
        .ann-grid {
            grid-template-columns: 1fr;
        }
        .ann-card {
            max-width: 100%;
        }
    }

    /* ====================================Announcement single page style =============================== */
    .announcement-single-page {
        font-family: 'Poppins', sans-serif;
        background: #FFFFFF;
        color: #6B7280;
        padding: 30px 0 60px;
    }
    .announcement-single-page *,
    .announcement-single-page *::before,
    .announcement-single-page *::after {
        box-sizing: border-box;
    }
    .announcement-single-page img {
        max-width: 100%;
        display: block;
    }
    .announcement-single-page a {
        text-decoration: none;
    }

    .asp-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===================== Hero Image ===================== */
    .asp-hero {
        width: 100%;
        height: 320px;
        border-radius: 8px;
        overflow: hidden;
        background: #0B0B0B;
        margin-bottom: 24px;
    }
    .asp-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ===================== Category badge ===================== */
    .asp-category {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #FDECEC;
        color: #E31E24;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 20px;
        margin-bottom: 16px;
    }

    /* ===================== Title & Meta ===================== */
    .asp-title {
        font-size: 26px;
        font-weight: 700;
        color: #111827;
        line-height: 1.35;
        margin: 0 0 12px;
    }

    .asp-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12.5px;
        color: #9CA3AF;
        margin-bottom: 24px;
    }
    .asp-meta .asp-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #D1D5DB;
        display: inline-block;
    }

    /* ===================== Body ===================== */
    .asp-body {
        border-top: 1px solid #E5E7EB;
        padding-top: 22px;
        margin-bottom: 30px;
    }

    .asp-text {
        font-size: 14px;
        line-height: 1.85;
        color: #4B5563;
        margin: 0 0 16px;
    }
    .asp-text:last-child {
        margin-bottom: 0;
    }

    .asp-text strong {
        color: #111827;
    }

    .asp-list {
        margin: 0 0 16px;
        padding-left: 20px;
    }
    .asp-list li {
        font-size: 14px;
        line-height: 1.85;
        color: #4B5563;
        margin-bottom: 6px;
    }

    /* ===================== Share Section ===================== */
    .asp-share {
        border-top: 1px solid #E5E7EB;
        padding-top: 22px;
        margin-bottom: 40px;
    }
    .asp-share-title {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 12px;
    }
    .asp-share-icons {
        display: flex;
        gap: 10px;
    }
    .asp-share-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #F3F4F6;
        border: 1px solid #E5E7EB;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4B5563;
        transition: all 0.2s ease;
    }
    .asp-share-icons a:hover {
        background: #E31E24;
        border-color: #E31E24;
        color: #FFFFFF;
    }

    /* ===================== Related News ===================== */
    .asp-related-title {
        font-size: 17px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 18px;
    }

    .asp-related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 18px;
    }

    .asp-related-card {
        display: block;
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .asp-related-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 18px rgba(17, 24, 39, 0.10);
    }

    .asp-related-image {
        width: 100%;
        height: 110px;
        background: #F3F4F6;
        overflow: hidden;
    }
    .asp-related-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .asp-related-body {
        padding: 12px 14px 14px;
    }
    .asp-related-body h4 {
        font-size: 12.5px;
        font-weight: 600;
        color: #111827;
        line-height: 1.4;
        margin: 0 0 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .asp-related-body span {
        font-size: 11px;
        color: #9CA3AF;
    }

    /* ===================== Responsive ===================== */
    @media (max-width: 600px) {
        .asp-hero {
            height: 220px;
        }
        .asp-title {
            font-size: 21px;
        }
    }

/* =============================================
   DOJO DIRECTORY PAGE
   ============================================= */

.dojo-page {
    font-family: 'Poppins', sans-serif;
    background: #F4F6FB;
    padding-bottom: 60px;
    min-height: 100vh;
}
.dojo-page *, .dojo-page *::before, .dojo-page *::after { box-sizing: border-box; }
.dojo-page a { text-decoration: none; }
.dojo-page img { max-width: 100%; display: block; }

.dojo-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Banner */
.dojo-banner {
    position: relative;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0B1736 0%, #1a2d5a 40%, #C41020 100%);
    margin-bottom: 0;
    overflow: hidden;
}
.dojo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='white' fill-opacity='0.04'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.dojo-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11,23,54,0.55);
}
.dojo-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 48px 24px;
}
.dojo-banner-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFD700;
    margin-bottom: 16px;
    background: rgba(255,255,255,0.08);
    padding: 4px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,215,0,0.3);
}
.dojo-banner-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.dojo-red { color: #E31E24; }
.dojo-banner-content p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.82);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Stats Row */
.dojo-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(11,23,54,0.06);
}
.dojo-stat-box {
    text-align: center;
    padding: 28px 20px;
    border-right: 1px solid #F0F0F0;
    transition: background 0.2s;
}
.dojo-stat-box:last-child { border-right: none; }
.dojo-stat-num {
    font-size: 2.4rem;
    font-weight: 800;
    color: #E31E24;
    margin: 0 0 4px;
    line-height: 1;
}
.dojo-stat-label {
    font-size: 14px;
    font-weight: 700;
    color: #0B1736;
    margin: 0 0 4px;
}
.dojo-stat-desc {
    font-size: 11.5px;
    color: #9CA3AF;
    margin: 0;
}

/* Filter Bar */
.dojo-filter-bar {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(11,23,54,0.04);
}
.dojo-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) {
    .dojo-filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .dojo-filter-grid { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; }
}
.dojo-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.dojo-search-wrap svg {
    position: absolute;
    left: 14px;
    width: 17px;
    height: 17px;
    color: #9CA3AF;
    pointer-events: none;
    flex-shrink: 0;
}
.dojo-input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    color: #0B1736;
    background: #FAFAFA;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dojo-input:focus {
    outline: none;
    border-color: #E31E24;
    box-shadow: 0 0 0 3px rgba(227,30,36,0.1);
    background: #fff;
}
.dojo-select {
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    color: #374151;
    background: #FAFAFA;
    cursor: pointer;
    transition: border-color 0.2s;
    width: 100%;
}
.dojo-select:focus {
    outline: none;
    border-color: #E31E24;
    box-shadow: 0 0 0 3px rgba(227,30,36,0.1);
}
.btn-dojo-clear {
    height: 44px;
    padding: 0 20px;
    background: #F3F4F6;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    font-family: 'Poppins', sans-serif;
    width: 100%;
}
@media (min-width: 1024px) { .btn-dojo-clear { width: auto; } }
.btn-dojo-clear:hover { background: #E5E7EB; }

/* Results Bar */
.dojo-results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 20px;
}
.dojo-results-bar strong { color: #0B1736; }

/* Dojo Grid */
.dojo-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 22px;
    margin-bottom: 32px;
}
@media (min-width: 600px) { .dojo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .dojo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .dojo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .dojo-grid { grid-template-columns: repeat(5, 1fr); } }

.dojo-col {
    display: flex;
    flex-direction: column;
}

/* Dojo Card */
.dojo-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #EEF0F6;
    box-shadow: 0 2px 12px rgba(11,23,54,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.dojo-card:hover {
    box-shadow: 0 16px 36px rgba(11,23,54,0.14);
    transform: translateY(-4px);
}

.dojo-card-media {
    position: relative;
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: #F3F4F6;
    flex-shrink: 0;
}
.dojo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.dojo-card:hover .dojo-card-media img { transform: scale(1.05); }
.dojo-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E8EBF0 0%, #D1D5DB 100%);
}
.dojo-card-img-placeholder svg { width: 52px; height: 52px; color: #9CA3AF; }
.dojo-country-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(11,23,54,0.78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dojo-card-body {
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dojo-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0B1736;
    margin: 0 0 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dojo-card-loc {
    font-size: 11.5px;
    color: #6B7280;
    line-height: 1.55;
    margin: 0 0 14px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.dojo-card-loc svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: #E31E24; }

.dojo-instructor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #F8F9FD;
    border-radius: 10px;
}
.dojo-instructor-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #E31E24;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dojo-instructor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dojo-instructor-initials {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.dojo-instructor-label {
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.dojo-instructor-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #0B1736;
    margin: 0;
}

.dojo-schedule-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #059669;
    font-weight: 600;
    margin-bottom: 14px;
}
.dojo-schedule-preview svg { width: 13px; height: 13px; flex-shrink: 0; }
.dojo-schedule-empty { color: #9CA3AF; }

.btn-dojo-view {
    display: block;
    text-align: center;
    background: #E31E24;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 11px 0;
    border-radius: 999px;
    margin-top: auto;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.02em;
}
.btn-dojo-view:hover {
    background: #c41020;
    color: #fff;
    transform: translateY(-1px);
}

/* Pagination */
.dojo-pagination-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #E5E7EB;
}
.dojo-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dojo-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}
.dojo-page-btn:hover { background: #FEF2F2; border-color: #E31E24; color: #E31E24; }
.dojo-active { background: #E31E24 !important; border-color: #E31E24 !important; color: #fff !important; }
.dojo-disabled { background: #F3F4F6 !important; color: #D1D5DB !important; pointer-events: none; }
.dojo-page-ellipsis { padding: 0 4px; color: #9CA3AF; font-weight: 600; }
.dojo-go-btn { background: #E31E24; border-color: #E31E24; color: #fff; }
.dojo-go-btn:hover { background: #c41020; }
.dojo-jump-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dojo-jump-form label { font-size: 0.85rem; color: #555; font-weight: 500; white-space: nowrap; }
.dojo-jump-form input[type="number"] {
    width: 70px;
    padding: 6px 10px;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.875rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}
.dojo-jump-form input[type="number"]:focus { outline: none; border-color: #E31E24; }

/* =============================================
   DOJO SINGLE / SHOW PAGE
   ============================================= */

.dojo-single-page {
    font-family: 'Poppins', sans-serif;
    background: #F4F6FB;
    padding: 32px 0 64px;
    min-height: 100vh;
}
.dojo-single-page *, .dojo-single-page *::before, .dojo-single-page *::after { box-sizing: border-box; }
.dojo-single-page a { text-decoration: none; }

.dss-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Breadcrumb */
.dss-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.dss-breadcrumb a { color: #E31E24; font-weight: 600; }
.dss-breadcrumb a:hover { text-decoration: underline; }
.dss-breadcrumb-sep { color: #D1D5DB; }

/* Hero */
.dss-hero {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(11,23,54,0.08);
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 28px;
}
@media (min-width: 768px) {
    .dss-hero { grid-template-columns: 380px 1fr; }
}

.dss-hero-image-wrap {
    position: relative;
    height: 280px;
    background: #F3F4F6;
    overflow: hidden;
}
@media (min-width: 768px) { .dss-hero-image-wrap { height: auto; min-height: 320px; } }
.dss-hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dss-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E8EBF0 0%, #D1D5DB 100%);
}
.dss-img-placeholder svg { width: 64px; height: 64px; color: #9CA3AF; }
.dss-country-pill {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(11,23,54,0.8);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.dss-hero-info {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dss-code-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #E31E24;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: 3px 12px;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.dss-title {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: #0B1736;
    margin: 0 0 18px;
    line-height: 1.25;
}
.dss-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.55;
}
.dss-info-row svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: #E31E24; }

/* Body Grid */
.dss-body-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
@media (min-width: 768px) {
    .dss-body-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .dss-body-grid { grid-template-columns: 1fr 1fr 1fr; }
    .dss-schedule-card { grid-column: span 1; }
}

/* Cards */
.dss-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 12px rgba(11,23,54,0.05);
    padding: 28px 26px;
}
.dss-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #0B1736;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F0F0F6;
}
.dss-card-heading svg { width: 18px; height: 18px; color: #E31E24; flex-shrink: 0; }

/* Instructor */
.dss-instructor-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dss-instructor-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #E31E24;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #FEE2E2;
}
.dss-instructor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dss-instructor-initials { color: #fff; font-weight: 800; font-size: 22px; }
.dss-instructor-name { font-size: 17px; font-weight: 700; color: #0B1736; margin: 0 0 4px; }
.dss-instructor-role { font-size: 12px; color: #E31E24; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }

/* Details Table */
.dss-detail-table { width: 100%; border-collapse: collapse; }
.dss-detail-table tr { border-bottom: 1px solid #F3F4F6; }
.dss-detail-table tr:last-child { border-bottom: none; }
.dss-detail-label { font-size: 11.5px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 0 10px 0; width: 40%; vertical-align: top; }
.dss-detail-value { font-size: 13px; color: #374151; padding: 10px 0; font-weight: 500; }
.dss-detail-value code { background: #FEF2F2; color: #E31E24; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-family: monospace; }

/* Schedule */
.dss-schedule-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.dss-schedule-item {
    display: flex;
    flex-direction: column;
    background: #F8F9FD;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 14px;
}
.dss-schedule-day { font-size: 12px; font-weight: 700; color: #0B1736; margin-bottom: 2px; }
.dss-schedule-time { font-size: 12px; color: #E31E24; font-weight: 600; }
.dss-schedule-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    color: #9CA3AF;
    gap: 12px;
}
.dss-schedule-empty svg { width: 40px; height: 40px; }
.dss-schedule-empty p { font-size: 13px; line-height: 1.7; margin: 0; }

/* Back button */
.dss-back-wrap { margin-top: 8px; }
.dss-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0B1736;
    padding: 10px 20px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    transition: all 0.2s;
}
.dss-back-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.dss-back-btn:hover { border-color: #E31E24; color: #E31E24; background: #FEF2F2; }

@media (max-width: 640px) {
    .dojo-stats-row { grid-template-columns: repeat(3, 1fr); }
    .dojo-stat-num { font-size: 1.8rem; }
}