/* =============================================================================
   KFCC PREMIUM THEME  |  theme.css
   Loaded after bootstrap.min.css + plugins.css + style.css
   Non-destructive override layer — remove this <link> to fully revert.
   ============================================================================= */

/* ────────────────────────────────────────────────────────────────────────────
   1. GOOGLE FONTS IMPORT
   ──────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

/* ────────────────────────────────────────────────────────────────────────────
   2. DESIGN TOKENS
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --kfcc-navy:        #0f2447;
  --kfcc-navy-mid:    #1a3a6e;
  --kfcc-navy-light:  #243f7a;
  --kfcc-gold:        #c9a84c;
  --kfcc-gold-light:  #e8c96b;
  --kfcc-gold-dark:   #a8852e;
  --kfcc-red:         #c0392b;

  /* Neutrals */
  --kfcc-bg:          #f7f8fc;
  --kfcc-surface:     #ffffff;
  --kfcc-border:      rgba(15, 36, 71, 0.09);
  --kfcc-text:        #1a1f36;
  --kfcc-text-muted:  #6b7280;

  /* Effects */
  --kfcc-shadow-sm:   0 2px 8px rgba(15,36,71,.08);
  --kfcc-shadow-md:   0 6px 24px rgba(15,36,71,.13);
  --kfcc-shadow-lg:   0 16px 48px rgba(15,36,71,.18);
  --kfcc-radius:      14px;
  --kfcc-radius-sm:   8px;
  --kfcc-radius-pill: 50px;

  /* Override Bootstrap primary */
  --primary:          #c9a84c;
  --dark:             #0f2447;
  --light:            #f7f8fc;
  --danger:           #0f2447; /* Re-map danger/red to Navy for titles */

  /* Transitions */
  --ease:             cubic-bezier(.4, 0, .2, 1);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Open Sans', sans-serif;
  background-color: var(--kfcc-bg);
  color: var(--kfcc-text);
  -webkit-font-smoothing: antialiased;
}

/* ────────────────────────────────────────────────────────────────────────────
   3. TOP ADDRESS BAR
   ──────────────────────────────────────────────────────────────────────────── */
.addressbar-bg {
  background: linear-gradient(90deg, var(--kfcc-navy) 0%, var(--kfcc-navy-mid) 100%) !important;
  border-bottom: 2px solid var(--kfcc-gold);
}

.addressbar-bg small {
  font-size: .78rem;
  letter-spacing: .3px;
  color: rgba(255,255,255,.85) !important;
}

.addressbar-bg .btn-sm-round {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  transition: background .25s var(--ease), transform .2s;
}

.addressbar-bg .btn-sm-round:hover {
  background: var(--kfcc-gold) !important;
  border-color: var(--kfcc-gold) !important;
  transform: scale(1.12);
}

/* ────────────────────────────────────────────────────────────────────────────
   4. NAVBAR
   ──────────────────────────────────────────────────────────────────────────── */
.navbar.navbar-light.sticky-top {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 2px solid var(--kfcc-gold);
  box-shadow: 0 4px 25px rgba(15,36,71,.15) !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.navbar-light .navbar-brand {
  background-color: #ffffff !important;
  padding: 0px 20px !important;
}

.navbar.navbar-light.sticky-top:hover {
  box-shadow: 0 4px 28px rgba(15,36,71,.12);
}

/* Logo */
.navbar-brand img.logo,
.navbar-brand img {
  height: 75px !important;
  width: auto;
  transition: opacity .25s;
}
.navbar-brand:hover img { opacity: .85; }

/* Nav links */
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link.dropdown-toggle {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--kfcc-navy) !important;
  /* padding: 28px 0 !important; */
  margin-right: 28px;
  position: relative;
}

.navbar-light .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--kfcc-gold);
  border-radius: 2px;
  margin: 0 !important;
  padding: 0 !important;
  transition: width .3s var(--ease), left .3s var(--ease);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--kfcc-gold-dark) !important;
}

.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after {
  width: 100%;
}

.dropdown-menu.fade-up {
  border: none;
  border-radius: var(--kfcc-radius);
  box-shadow: var(--kfcc-shadow-lg);
  background: #fff;
  border-top: 3px solid var(--kfcc-gold);
  padding: 6px !important;
  min-width: 220px;
  width: 220px !important;
  animation: dropFadeIn .2s var(--ease);
}

@keyframes dropFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/*
 * HIGH-SPECIFICITY override — must beat:
 *   .navbar-light .navbar-nav .nav-link { padding: 28px 0 !important }
 * which is specificity 0,3,0. We use 0,4,0 to win.
 */
.navbar-light .navbar-nav .dropdown-menu .nav-link,
.navbar-light .navbar-nav .dropdown-menu .dropdown-item,
.navbar       .navbar-nav .dropdown-menu .nav-link,
.navbar       .navbar-nav .dropdown-menu .dropdown-item {
  font-size: .81rem !important;
  font-weight: 500 !important;
  color: var(--kfcc-navy) !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  border-radius: var(--kfcc-radius-sm);
  transition: background .18s, color .18s;
  display: block;
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: .2px !important;
}

.navbar-light .navbar-nav .dropdown-menu .nav-link::after,
.navbar       .navbar-nav .dropdown-menu .nav-link::after {
  display: none !important;   /* hide the gold underline slide on dropdown items */
}

.navbar-light .navbar-nav .dropdown-menu .nav-link:hover,
.navbar-light .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar       .navbar-nav .dropdown-menu .nav-link:hover,
.navbar       .navbar-nav .dropdown-menu .dropdown-item:hover {
  background: linear-gradient(90deg, rgba(201,168,76,.13), rgba(201,168,76,.03)) !important;
  color: var(--kfcc-gold-dark) !important;
}

/* Hide chevron icons that were creating extra vertical space */
.dropdown-menu .nav-link i.bi,
.dropdown-menu .dropdown-item i.bi {
  display: none !important;
}


.dropdown-item.active,
.dropdown-item:active {
  background-color: #c9a84c !important;
  color: #fff !important;
}


/* Mobile toggler */
.navbar-toggler {
  border: 1px solid var(--kfcc-border) !important;
  border-radius: var(--kfcc-radius-sm) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   5. SPINNER
   ──────────────────────────────────────────────────────────────────────────── */
.spinner-grow.text-primary {
  color: var(--kfcc-gold) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   6. PAGE HEADER / HERO BANNER
   ──────────────────────────────────────────────────────────────────────────── */
.container-fluid.page-header {
  position: relative;
  background:
    linear-gradient(
      135deg,
      rgba(15, 36, 71, 0.88) 0%,
      rgba(26, 58, 110, 0.75) 50%,
      rgba(201, 168, 76, 0.35) 100%
    ),
    url('../img/slider-2.png') center center / cover no-repeat !important;
  overflow: hidden;
}

/* Cinematic grain overlay */
.container-fluid.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .4;
}

/* Gold bottom border */
.container-fluid.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--kfcc-gold), transparent);
}

.container-fluid.page-header h1,
.container-fluid.page-header h2,
.container-fluid.page-header h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
  letter-spacing: .5px;
}

/* Breadcrumb inside page-header */
.page-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
  color: rgba(255,255,255,.75);
  font-size: .82rem;
}

.page-header .breadcrumb-item.active { color: var(--kfcc-gold); }
.page-header .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* ────────────────────────────────────────────────────────────────────────────
   7. SECTION TITLES
   ──────────────────────────────────────────────────────────────────────────── */
.section-title h1 {
  font-family: 'Playfair Display', serif;
  color: var(--kfcc-navy);
  padding: 0 60px;
}

.section-title h1::before,
.section-title h1::after {
  background: var(--kfcc-gold) !important;
  height: 3px;
}

/* Global Branding Overrides */
.text-primary, .text-danger.fw-bold, h1.text-primary, h1.text-danger, h2.text-primary, h2.text-danger { color: #c9a84c !important; }
.bg-primary { background-color: #c9a84c !important; }
.btn-primary { background-color: #c9a84c !important; border-color: #c9a84c !important; color: #fff !important; }
.btn-primary:hover { background-color: #a8852e !important; border-color: #a8852e !important; }

/* Responsive Table Wrapper */
.table-responsive-custom {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .83rem;
  letter-spacing: .4px;
  border-radius: var(--kfcc-radius-pill) !important;
  transition: all .3s var(--ease) !important;
  position: relative;
  overflow: hidden;
}

/* Primary = gold gradient */
.btn.btn-primary,
.btn-primary {
  background: linear-gradient(135deg, var(--kfcc-gold) 0%, var(--kfcc-gold-dark) 100%) !important;
  border: none !important;
  color: var(--kfcc-navy) !important;
  box-shadow: 0 4px 14px rgba(201,168,76,.35);
}

.btn.btn-primary:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--kfcc-gold-light) 0%, var(--kfcc-gold) 100%) !important;
  box-shadow: 0 6px 20px rgba(201,168,76,.5);
  transform: translateY(-2px);
}

/* Secondary = navy */
.btn.btn-secondary,
.btn-secondary {
  background: var(--kfcc-navy) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--kfcc-shadow-sm);
}

.btn.btn-secondary:hover,
.btn-secondary:hover {
  background: var(--kfcc-navy-mid) !important;
  box-shadow: var(--kfcc-shadow-md);
  transform: translateY(-2px);
}

/* Outline variants */
.btn-outline-primary {
  border: 2px solid var(--kfcc-gold) !important;
  color: var(--kfcc-gold-dark) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--kfcc-gold) !important;
  color: var(--kfcc-navy) !important;
  transform: translateY(-2px);
}

.btn-outline-secondary {
  border: 2px solid var(--kfcc-navy) !important;
  color: var(--kfcc-navy) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background: var(--kfcc-navy) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Back to top */
.back-to-top {
  position: fixed !important;
  right: 30px !important;
  bottom: 30px !important;
  z-index: 9999 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: none; /* jQuery main.js will fadeInUp */
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--kfcc-gold) 0%, var(--kfcc-gold-dark) 100%) !important;
  color: var(--kfcc-navy) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(201,168,76,.45), 0 0 0 3px rgba(201,168,76,.15) !important;
  font-size: 1.1rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease) !important;
}

.back-to-top:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,.55), 0 0 0 5px rgba(201,168,76,.12) !important;
  background: linear-gradient(135deg, var(--kfcc-gold-light) 0%, var(--kfcc-gold) 100%) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   9. CARDS
   ──────────────────────────────────────────────────────────────────────────── */
.card {
  border: none !important;
  border-radius: var(--kfcc-radius) !important;
  box-shadow: var(--kfcc-shadow-sm) !important;
  background: var(--kfcc-surface);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--kfcc-shadow-md) !important;
  transform: translateY(-3px);
}

.card-header {
  background: linear-gradient(90deg, rgba(15,36,71,.04), rgba(201,168,76,.04)) !important;
  border-bottom: 1px solid var(--kfcc-border) !important;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 14px 20px;
}

.card-body {
  padding: 20px;
}

/* ────────────────────────────────────────────────────────────────────────────
   10. FORM CONTROLS
   ──────────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  font-family: 'Inter', sans-serif;
  font-size: .87rem;
  border: 1.5px solid rgba(15,36,71,.15) !important;
  border-radius: var(--kfcc-radius-sm) !important;
  color: var(--kfcc-text) !important;
  background: #fff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  padding: 10px 14px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--kfcc-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.18) !important;
  outline: none;
}

.form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--kfcc-navy);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ────────────────────────────────────────────────────────────────────────────
   11. TABLES
   ──────────────────────────────────────────────────────────────────────────── */
.table {
  font-family: 'Inter', sans-serif;
  font-size: .87rem;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 0;
}

.table thead th,
.table-dark th {
  background: var(--kfcc-navy) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 11px 14px;
  border: none !important;
  line-height: 1.3;
}

.table thead tr th:first-child { border-radius: var(--kfcc-radius-sm) 0 0 0; }
.table thead tr th:last-child  { border-radius: 0 var(--kfcc-radius-sm) 0 0; }

.table tbody tr td {
  padding: 9px 14px;
  border-color: var(--kfcc-border);
  border-bottom: 1px solid var(--kfcc-border);
  vertical-align: middle;
  color: var(--kfcc-text);
  line-height: 1.4;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background .15s var(--ease);
}

.table-hover tbody tr:hover {
  background: rgba(201,168,76,.06) !important;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid var(--kfcc-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: rgba(15,36,71,.025) !important;
}

.table-responsive {
  border-radius: var(--kfcc-radius);
  overflow: hidden;
  box-shadow: var(--kfcc-shadow-sm);
}

/* ────────────────────────────────────────────────────────────────────────────
   12. BADGES
   ──────────────────────────────────────────────────────────────────────────── */
.badge.bg-info,
.badge.badge-info {
  background: var(--kfcc-navy) !important;
  color: #fff;
}

.badge.bg-secondary {
  background: var(--kfcc-text-muted) !important;
}

.modal {
  z-index: 11000 !important;
}
.modal-backdrop {
  z-index: 10990 !important;
}

.modal-content {
  border: none !important;
  border-radius: var(--kfcc-radius) !important;
  box-shadow: 0 24px 64px rgba(15,36,71,.22) !important;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.modal-header {
  background: linear-gradient(90deg, var(--kfcc-navy) 0%, var(--kfcc-navy-mid) 100%);
  border-bottom: none !important;
  padding: 16px 22px;
}

.modal-header .modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: .3px;
}

.modal-header .btn-close {
  filter: invert(1) brightness(2);
  opacity: .8;
}

.modal-header .close {
  color: rgba(255,255,255,.8) !important;
  opacity: 1;
  font-size: 1.4rem;
  line-height: 1;
  transition: color .2s;
}

.modal-header .close:hover {
  color: var(--kfcc-gold) !important;
}

.modal-body {
  padding: 22px 24px;
  font-size: .88rem;
  color: var(--kfcc-text);
  line-height: 1.65;
  background: var(--kfcc-surface);
}

.modal-footer {
  background: rgba(15,36,71,.03);
  border-top: 1px solid var(--kfcc-border) !important;
  padding: 14px 22px;
  gap: 8px;
}

.modal-footer .btn {
  min-width: 90px;
}

.modal-backdrop.show {
  opacity: .65 !important;
}

/* Modal inside table - producer/film detail modals */
#producerModal .modal-dialog,
#filmModal .modal-dialog {
  border-radius: var(--kfcc-radius);
}

#producerContent table,
#filmContent table {
  font-size: .85rem;
  box-shadow: none;
}

#producerContent table th {
  width: 38%;
  font-weight: 600;
  color: var(--kfcc-navy) !important;
  background: rgba(15,36,71,.04) !important;
  font-size: .82rem;
  text-transform: none;
  letter-spacing: 0;
}

#producerContent table td {
  color: var(--kfcc-text);
}

/* ────────────────────────────────────────────────────────────────────────────
   13. PAGINATION
   ──────────────────────────────────────────────────────────────────────────── */
.page-link {
  color: var(--kfcc-navy);
  border-color: var(--kfcc-border);
  border-radius: var(--kfcc-radius-sm) !important;
  font-size: .83rem;
  font-weight: 500;
  transition: all .2s var(--ease);
  margin: 0 2px;
}

.page-link:hover { background: var(--kfcc-gold); color: var(--kfcc-navy); border-color: var(--kfcc-gold); }
.page-item.active .page-link {
  background: var(--kfcc-navy) !important;
  border-color: var(--kfcc-navy) !important;
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────────────────
   14. TEAM / PERSON CARDS (office bearers etc.)
   ──────────────────────────────────────────────────────────────────────────── */
.team-item {
  border-radius: var(--kfcc-radius) !important;
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.team-item:hover {
  box-shadow: var(--kfcc-shadow-lg);
  transform: translateY(-6px);
}

.team-item img {
  transition: transform .4s var(--ease) !important;
}

.team-item:hover img {
  transform: scale(1.06) !important;
}

.obimage {
  border-radius: 50% !important;
  border: 4px solid var(--kfcc-gold) !important;
  box-shadow: 0 4px 16px rgba(201,168,76,.25);
}

/* ────────────────────────────────────────────────────────────────────────────
   15. MOVIE POSTERS
   ──────────────────────────────────────────────────────────────────────────── */
.movie-poster {
  border-radius: var(--kfcc-radius) !important;
  box-shadow: var(--kfcc-shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.movie-poster:hover {
  box-shadow: var(--kfcc-shadow-lg);
  transform: translateY(-4px) scale(1.01);
}

.image-container .overlay {
  background: linear-gradient(
    to top,
    rgba(15,36,71,.88) 0%,
    rgba(15,36,71,.4) 60%,
    transparent 100%
  ) !important;
  border-radius: var(--kfcc-radius) !important;
}

.image-container img {
  border-radius: var(--kfcc-radius) !important;
}

.overlay-text {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* ────────────────────────────────────────────────────────────────────────────
   16. MARQUEE / NOTICE BAR
   ──────────────────────────────────────────────────────────────────────────── */
.marquee {
  background: linear-gradient(90deg, var(--kfcc-navy), var(--kfcc-navy-mid));
  color: rgba(255,255,255,.9);
  padding: 8px 0;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .3px;
  border-bottom: 2px solid var(--kfcc-gold);
}

/* ────────────────────────────────────────────────────────────────────────────
   16b. SLIDER / CAROUSEL UNIFORM HEIGHT
   ──────────────────────────────────────────────────────────────────────────── */
.header-carousel .owl-carousel-item {
  position: relative;
  height: 540px;         /* fixed uniform height for all slides */
  overflow: hidden;
}

.header-carousel .owl-carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fills frame, crops proportionally */
  object-position: center;
  display: block;
}

/* Overlay sits above image */
.header-carousel .owl-carousel-item > div.position-absolute {
  z-index: 2;
}

/* Mobile: slightly shorter */
@media (max-width: 767.98px) {
  .header-carousel .owl-carousel-item {
    height: 320px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .header-carousel .owl-carousel-item {
    height: 420px;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   17. FOOTER
   ──────────────────────────────────────────────────────────────────────────── */
footer.bg-dark,
footer {
  background: linear-gradient(160deg, var(--kfcc-navy) 0%, #0a1a36 100%) !important;
  border-top: 3px solid var(--kfcc-gold) !important;
  border-radius: 0 !important;
}

footer h5 {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kfcc-gold) !important;
  margin-bottom: 18px;
}

footer p,
footer .small {
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  line-height: 1.7;
}

/* Footer links */
footer a.text-light,
footer .footer-links a {
  color: rgba(255,255,255,.75) !important;
  text-decoration: none;
  font-size: .85rem;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
  display: block;
  margin-bottom: 8px;
}

footer a.text-light:hover,
footer .footer-links a:hover {
  color: var(--kfcc-gold) !important;
  padding-left: 4px;
}

/* Footer social icons */
footer .btn-outline-light {
  border: 1px solid rgba(255,255,255,.25) !important;
  color: rgba(255,255,255,.75) !important;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s var(--ease);
  font-size: .85rem;
}

footer .btn-outline-light:hover {
  background: var(--kfcc-gold) !important;
  border-color: var(--kfcc-gold) !important;
  color: var(--kfcc-navy) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(201,168,76,.35);
}

/* Footer HR */
footer hr {
  border-color: rgba(255,255,255,.1) !important;
  margin: 24px 0 16px;
}

footer .row .small,
footer .text-center.small {
  color: rgba(255,255,255,.5) !important;
  font-size: .78rem;
}

/* ────────────────────────────────────────────────────────────────────────────
   18. AWARDS PAGE SPECIFIC
   ──────────────────────────────────────────────────────────────────────────── */
.awards-year-badge {
  background: linear-gradient(135deg, var(--kfcc-navy) 0%, var(--kfcc-navy-mid) 100%) !important;
  box-shadow: 0 4px 16px rgba(15,36,71,.25), inset 0 1px 0 rgba(255,255,255,.1) !important;
  border: 1px solid rgba(201,168,76,.3);
}

.awards-year-line {
  border-color: var(--kfcc-gold) !important;
  opacity: .2 !important;
}

.awards-type-title {
  color: var(--kfcc-navy) !important;
  border-left-color: var(--kfcc-gold) !important;
}

.award-category-tag {
  background: var(--kfcc-navy) !important;
}

.award-recipient { color: var(--kfcc-navy) !important; }

.award-card {
  box-shadow: var(--kfcc-shadow-sm) !important;
}

.award-card:hover {
  box-shadow: var(--kfcc-shadow-md) !important;
}

.award-card-photo {
  background: linear-gradient(135deg, rgba(15,36,71,.06) 0%, rgba(201,168,76,.08) 100%) !important;
}

.award-card-badge {
  background: var(--kfcc-gold) !important;
  color: var(--kfcc-navy) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   19. USER ACCOUNT — GLASSMORPHISM LOGIN PANEL
   ──────────────────────────────────────────────────────────────────────────── */

/* Full-page cinematic background for user_account pages */
body.user-account-page {
  background:
    linear-gradient(135deg, var(--kfcc-navy) 0%, #0a1a36 50%, #1a2a4e 100%);
  min-height: 100vh;
}

/* Glass login card */
body.user-account-page .card {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow: var(--kfcc-shadow-lg) !important;
  border-radius: 20px !important;
}

body.user-account-page .card-header {
  background: linear-gradient(90deg, var(--kfcc-navy), var(--kfcc-navy-mid)) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 18px 22px;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  border-radius: 20px 20px 0 0 !important;
}

body.user-account-page .card-header strong,
body.user-account-page #formHeader {
  color: #fff !important;
}

/* Login page text on dark background */
body.user-account-page h4,
body.user-account-page h5,
body.user-account-page h1 {
  color: #fff !important;
}

body.user-account-page p,
body.user-account-page li,
body.user-account-page .note {
  color: rgba(255,255,255,.8);
}

body.user-account-page .container {
  position: relative;
  z-index: 1;
}

/* User account page decorative blobs */
body.user-account-page::before {
  content: '';
  position: fixed;
  top: -10%;
  right: -5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.15) 0%, transparent 70%);
  pointer-events: none;
  animation: blobFloat 8s ease-in-out infinite;
}

body.user-account-page::after {
  content: '';
  position: fixed;
  bottom: -10%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,58,110,.4) 0%, transparent 70%);
  pointer-events: none;
  animation: blobFloat 10s ease-in-out infinite reverse;
}

@keyframes blobFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

/* Navbar on user-account pages - keep readable */
body.user-account-page .navbar.navbar-light.sticky-top {
  background: rgba(15,36,71,.97) !important;
  border-bottom: 2px solid var(--kfcc-gold) !important;
}

body.user-account-page .navbar-light .navbar-nav .nav-link {
  color: rgba(255,255,255,.85) !important;
}

body.user-account-page .navbar-light .navbar-nav .nav-link:hover,
body.user-account-page .navbar-light .navbar-nav .nav-link.active {
  color: var(--kfcc-gold) !important;
}

body.user-account-page .navbar-toggler {
  border-color: rgba(255,255,255,.3) !important;
}

body.user-account-page .navbar-toggler-icon {
  filter: invert(1);
}

/* Login form inputs on glass card */
body.user-account-page .form-control {
  background: rgba(255,255,255,.9) !important;
}

/* Form-control-label */
body.user-account-page .form-control-label {
  color: var(--kfcc-navy) !important;
  font-weight: 600;
  font-size: .82rem;
}

/* Success button */
body.user-account-page .btn.btn-success,
body.user-account-page .btn-success {
  background: linear-gradient(135deg, var(--kfcc-gold) 0%, var(--kfcc-gold-dark) 100%) !important;
  border: none !important;
  color: var(--kfcc-navy) !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(201,168,76,.4);
  border-radius: var(--kfcc-radius-pill) !important;
}

body.user-account-page .btn.btn-success:hover,
body.user-account-page .btn-success:hover {
  background: linear-gradient(135deg, var(--kfcc-gold-light) 0%, var(--kfcc-gold) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,168,76,.5);
}

/* Alert styling inside the white card */
body.user-account-page .alert-danger {
  background: rgba(192,57,43,.08) !important;
  border: 1px solid rgba(192,57,43,.2) !important;
  border-radius: var(--kfcc-radius-sm) !important;
  color: #7b2d26 !important;
  font-size: .83rem;
}

/* Clickable text links */
body.user-account-page p[onclick] {
  color: var(--kfcc-gold-dark) !important;
  font-weight: 500;
  font-size: .85rem;
  transition: color .2s;
}

body.user-account-page p[onclick]:hover {
  color: var(--kfcc-navy) !important;
}

/* Page header on user-account */
body.user-account-page .container-fluid.page-header {
  background:
    linear-gradient(135deg, rgba(15,36,71,.92) 0%, rgba(26,58,110,.7) 100%),
    url('../../assets/img/slider-2.png') center center / cover no-repeat !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   20. SERVICE / FEATURE ITEMS
   ──────────────────────────────────────────────────────────────────────────── */
.service-item {
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  border-radius: var(--kfcc-radius) !important;
  overflow: hidden;
}

.service-item:hover {
  box-shadow: var(--kfcc-shadow-lg);
  transform: translateY(-5px);
}

/* ────────────────────────────────────────────────────────────────────────────
   21. ALERTS
   ──────────────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--kfcc-radius-sm) !important;
  font-size: .87rem;
  border: none !important;
}

.alert-info {
  background: rgba(15,36,71,.07) !important;
  color: var(--kfcc-navy) !important;
}

.alert-success {
  background: rgba(39,174,96,.08) !important;
  color: #1a6b3a !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   22. MICRO-ANIMATIONS
   ──────────────────────────────────────────────────────────────────────────── */

/* Fade up on load — applied via WOW.js wow fadeInUp */
.wow.fadeInUp { animation-fill-mode: both; }

/* Smooth image load */
img { transition: opacity .35s var(--ease); }

/* ────────────────────────────────────────────────────────────────────────────
   23. RESPONSIVE OVERRIDES
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link {
    padding: 10px 4px !important;
    margin-right: 0;
    border-bottom: 1px solid var(--kfcc-border);
    font-size: .85rem;
  }

  .navbar-light .navbar-nav .nav-link::after {
    display: none;
  }

  .dropdown-menu.fade-up {
    box-shadow: none;
    border-radius: 0 !important;
    border-top: none;
    border-left: 3px solid var(--kfcc-gold);
    background: rgba(15,36,71,.03) !important;
  }

  .container-fluid.page-header { padding: 40px 0 !important; }
}

@media (max-width: 767.98px) {
  body.user-account-page::before,
  body.user-account-page::after { display: none; }

  .card { border-radius: var(--kfcc-radius-sm) !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   24. SCROLLBAR (webkit)
   ──────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--kfcc-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--kfcc-navy), var(--kfcc-navy-mid));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--kfcc-gold); }

/* ────────────────────────────────────────────────────────────────────────────
   25. SELECTION COLOR
   ──────────────────────────────────────────────────────────────────────────── */
::selection {
  background: var(--kfcc-gold);
  color: var(--kfcc-navy);
}

/* ────────────────────────────────────────────────────────────────────────────
   26. MEMBER DASHBOARD OVERRIDES (CoolAdmin / Internal Portal)
   ──────────────────────────────────────────────────────────────────────────── */

body.brand-dashboard {
  background-color: #f4f7fa !important;
  font-family: 'Inter', sans-serif !important;
}

/* Sidebar Branding */
body.brand-dashboard .menu-sidebar {
  background: linear-gradient(180deg, var(--kfcc-navy) 0%, #0a1a36 100%) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
  border-right: none;
}

body.brand-dashboard .menu-sidebar .logo {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 20px 25px;
}

body.brand-dashboard .navbar-sidebar .navbar__list li a {
  color: rgba(255,255,255,.65) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .88rem;
  padding: 14px 25px;
  transition: all .25s var(--ease);
}

body.brand-dashboard .navbar-sidebar .navbar__list li a:hover {
  color: var(--kfcc-gold) !important;
  background: rgba(255,255,255,.05) !important;
}

body.brand-dashboard .navbar-sidebar .navbar__list li.active a,
body.brand-dashboard .navbar-sidebar .navbar__list li.active i {
  color: var(--kfcc-gold) !important;
  background: rgba(201,168,76,.08) !important;
}

body.brand-dashboard .navbar-sidebar .navbar__list li a i {
  color: rgba(255,255,255,.4);
  margin-right: 12px;
  transition: color .25s;
}

body.brand-dashboard .navbar-sidebar .navbar__list li a:hover i,
body.brand-dashboard .navbar-sidebar .navbar__list li.active a i {
  color: var(--kfcc-gold) !important;
}

/* Header Desktop */
body.brand-dashboard .header-desktop {
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kfcc-border) !important;
  box-shadow: 0 4px 12px rgba(15,36,71,.04);
}

body.brand-dashboard .header-desktop h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--kfcc-navy);
}

/* Dashboard Cards */
body.brand-dashboard .card {
  border-radius: var(--kfcc-radius) !important;
  box-shadow: var(--kfcc-shadow-sm) !important;
  border: 1px solid var(--kfcc-border) !important;
}

body.brand-dashboard .card-header {
  border-bottom: 1px solid var(--kfcc-border) !important;
  background: rgba(15,36,71,.02) !important;
  color: var(--kfcc-navy) !important;
  font-weight: 700;
}

/* Buttons in Dashboard */
body.brand-dashboard .au-btn,
body.brand-dashboard .btn-primary {
  border-radius: var(--kfcc-radius-pill) !important;
  font-weight: 600;
  letter-spacing: .3px;
}

body.brand-dashboard .au-btn-blue, 
body.brand-dashboard .btn-primary {
  background: var(--kfcc-navy) !important;
  border: none !important;
}

body.brand-dashboard .au-btn-green,
body.brand-dashboard .btn-success {
  background: linear-gradient(135deg, var(--kfcc-gold) 0%, var(--kfcc-gold-dark) 100%) !important;
  color: var(--kfcc-navy) !important;
  border: none !important;
}

body.brand-dashboard .au-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--kfcc-shadow-md);
}

/* Tables in Dashboard */
body.brand-dashboard .table-data {
  border-radius: var(--kfcc-radius);
  overflow: hidden;
  box-shadow: var(--kfcc-shadow-sm);
}

body.brand-dashboard .table-data thead th {
  background: var(--kfcc-navy) !important;
  color: #fff !important;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .5px;
  padding: 15px 20px;
}

/* Account Dropdown */
body.brand-dashboard .account-dropdown {
  border-radius: var(--kfcc-radius) !important;
  box-shadow: var(--kfcc-shadow-lg) !important;
  border: 1px solid var(--kfcc-border) !important;
}

body.brand-dashboard .account-dropdown .info {
  background: linear-gradient(90deg, var(--kfcc-navy), var(--kfcc-navy-mid)) !important;
  padding: 20px;
}

body.brand-dashboard .account-dropdown .info .name a {
  color: #fff !important;
}

body.brand-dashboard .account-dropdown .info .email {
  color: rgba(255,255,255,.7) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   GLOBAL RESPONSIVE TABLES & CARDS
   ──────────────────────────────────────────────────────────────────────────── */
.table-responsive, .table-responsive-custom {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* Aggressive row stacking */
  table thead, .table thead { display: none !important; visibility: hidden !important; }
  
  table, tbody, tr, td, .table, .table tbody, .table tr, .table td { 
    display: block !important; 
    width: 100% !important; 
    border: none !important; 
  }
  
  .table-responsive tr, .table-responsive-custom tr { 
    margin-bottom: 25px !important; 
    border: 1px solid #eee !important; 
    border-radius: 14px !important; 
    padding: 15px 0 !important; 
    background: #fff !important; 
    box-shadow: 0 4px 15px rgba(15,36,71,0.05) !important;
  }
  
  .table-responsive td, .table-responsive-custom td { 
    padding: 10px 20px !important; 
    text-align: left !important; 
    position: relative;
  }
  
  /* Create labels from data-label attribute */
  .table-responsive td::before, .table-responsive-custom td::before { 
    content: attr(data-label); 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 0.65rem; 
    color: #999; 
    display: block; 
    margin-bottom: 5px; 
    letter-spacing: 0.8px;
  }
  
  /* Action button container refinement */
  .table-responsive td[data-label="Action"], .table-responsive-custom td[data-label="Action"] { 
    padding-top: 15px !important; 
    margin-top: 10px;
    border-top: 1px solid #f1f3f9 !important;
  }
  
  .table-responsive .d-inline-flex.shadow-sm, 
  .table-responsive-custom .d-inline-flex.shadow-sm { 
    display: flex !important; 
    flex-direction: column !important;
    width: 100% !important; 
    border-radius: 12px !important; 
    overflow: hidden !important;
    box-shadow: none !important;
    border: 1px solid #eee !important;
  }
  
  .table-responsive .d-inline-flex.shadow-sm .btn, 
  .table-responsive-custom .d-inline-flex.shadow-sm .btn { 
    flex: 1 !important; 
    width: 100% !important;
    border-radius: 0 !important; 
    padding: 14px 0 !important; 
    font-size: 0.95rem !important;
    text-align: center !important;
    border-bottom: 1px solid #f1f3f9 !important;
    display: block !important;
  }

  .table-responsive .d-inline-flex.shadow-sm .btn:last-child, 
  .table-responsive-custom .d-inline-flex.shadow-sm .btn:last-child {
    border-bottom: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   MODERN NEWS TICKER (HOME)
   ──────────────────────────────────────────────────────────────────────────── */
.news-ticker-container {
  display: flex !important;
  align-items: center;
  background: var(--kfcc-navy);
  height: 50px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

.news-ticker-label {
  background: var(--kfcc-gold);
  color: var(--kfcc-navy);
  padding: 0 35px 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1.2px;
  position: relative;
  z-index: 20;
  box-shadow: 10px 0 30px rgba(0,0,0,0.4);
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}

.news-ticker-content {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

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

.news-ticker-track:hover {
  animation-play-state: paused;
}

.ticker-item {
  color: rgba(255,255,255,0.95);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0 50px;
}

.text-gold { color: var(--kfcc-gold) !important; }

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .news-ticker-container { height: 45px; }
  .news-ticker-label {
    padding: 0 25px 0 15px;
    font-size: 0.75rem;
  }
  .ticker-item {
    font-size: 0.82rem;
    padding: 0 25px;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   15. ALERTS & NOTIFICATIONS
   ──────────────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--kfcc-radius) !important;
  border: none !important;
  font-family: 'Inter', sans-serif;
.alert {
  border-radius: var(--kfcc-radius) !important;
  border: none !important;
  font-weight: 500;
  font-size: 0.88rem !important;
  box-shadow: var(--kfcc-shadow-sm) !important;
  padding: 1.1rem 1.4rem !important;
  display: flex !important;
  align-items: center;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease) !important;
}

.alert i, .alert .fa {
  font-size: 1.1rem;
  margin-right: 12px;
}

.alert-success {
  background: linear-gradient(90deg, #dcfce7 0%, #f0fdf4 100%) !important;
  color: #166534 !important;
  border-left: 5px solid #22c55e !important;
}

.alert-danger {
  background: linear-gradient(90deg, #fee2e2 0%, #fef2f2 100%) !important;
  color: #991b1b !important;
  border-left: 5px solid #ef4444 !important;
}

.alert-info {
  background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%) !important;
  color: #075985 !important;
  border-left: 5px solid #0ea5e9 !important;
}

.alert-warning {
  background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%) !important;
  color: #92400e !important;
  border-left: 5px solid #f59e0b !important;
}

/* Hide animation classes */
.alert.hiding {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
}
}