/* === GLOBAL FONT SIZE REDUCTION === */
html {
  font-size: 17px;
  /* Increased to 18px for better readability */
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 0;
  max-width: 100vw;
  overflow-x: hidden;
  width: 100%;
  font-size: 1rem;
  /* Increased base font size for better readability */
  line-height: 1.5;
  box-sizing: border-box;
}

/* Reduce heading sizes proportionally - Applied globally */
h1:not(.contact-hero-title):not(.page-hero-title):not(.page-title) {
  font-size: 1.6rem !important;
  /* Reduced from default 2rem */
}

.collab-detail-title {
  color: #004b88;
}

h2 {
  font-size: 1.4rem !important;
  /* Reduced from default 1.75rem */
}

h3 {
  font-size: 1.2rem !important;
  /* Reduced from default 1.5rem */
}

h4 {
  font-size: 1.1rem !important;
  /* Reduced from default 1.25rem */
}

h5 {
  font-size: 1rem !important;
  /* Reduced from default 1.1rem */
}

h6 {
  font-size: 0.95rem !important;
  /* Reduced from default 1rem */
}

p,
span,
div,
a,
li,
td,
th {
  font-size: inherit;
}

/* === HEADER BASE === */
header {
  position: fixed;
  width: 100%;
  max-width: 100vw;
  z-index: 3;
  top: var(--drupal-displace-offset-top, 0px);
  left: 0;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  padding: 0;
  overflow: visible !important;
  /* Allow drawer to escape */
  /* margin: 0; */
  /* box-sizing: border-box; */
  /* overflow-x: hidden; */
}

#app-content {
  margin-top: 0;
  padding-top: 100px;
  min-height: calc(100vh - 180px);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Ensure all page content sections have proper spacing and are visible */
#app-content>section,
#app-content>.container {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  /* padding-top: 20px;  */
}

/* Ensure sections inside containers also expand */
#app-content section.container,
#app-content>section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Ensure content sections fill available space */
#app-content .content-section,
#app-content section .content-section {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0px;
  margin: 0px;
  max-width: 100vw;
}

/* Ensure rows and columns inside sections expand */
#app-content section .row,
#app-content section.container .row {
  display: flex;
  flex-wrap: wrap;
  min-height: 0;
  /* justify-content: end; */
  flex: 1 1 auto;
}

#app-content section .col,
#app-content section [class*="col-"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Ensure inner page sections expand to fill available space */
#app-content>section:not(.page-hero-section):not(.contact-hero-section) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

/* Vision and mission sections should expand */
.karmayogi-vision-section,
.mission-karmayogi-section,
.mission-karmayogi-section-alt {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* === CENTRALIZED CONTAINER SPACING === */
/* All containers and content areas get consistent left/right padding across all pages */
/* Spacing values are centralized using CSS custom properties for easy maintenance */

:root {
  /* Centralized spacing values - update these to change spacing across all pages */
  --page-horizontal-spacing-xs: 15px;
  /* Base: < 576px */
  --page-horizontal-spacing-sm: 20px;
  /* Small: ≥ 576px */
  --page-horizontal-spacing-md: 30px;
  /* Medium: ≥ 768px */
  --page-horizontal-spacing-lg: 40px;
  /* Large: ≥ 992px */
  --page-horizontal-spacing-xl: 50px;
  /* XL: ≥ 1200px */
  --page-horizontal-spacing-xxl: 60px;
  /* XXL: ≥ 1400px */
  --page-horizontal-spacing-xxxl: 50px;
  /* XXXL: ≥ 1920px */
  --page-max-width: 1920px;
  --cbc-header-offset: 0px;
}

/* Base spacing for all containers and sections */
#app-content .container,
#app-content .container-fluid,
#app-content section.container,
#app-content>section>.container,
#app-content>section>.container-fluid {
  padding-left: var(--page-horizontal-spacing-xs) !important;
  padding-right: var(--page-horizontal-spacing-xs) !important;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  #app-content .container,
  #app-content .container-fluid,
  #app-content section.container,
  #app-content>section>.container,
  #app-content>section>.container-fluid {
    padding-left: var(--page-horizontal-spacing-sm) !important;
    padding-right: var(--page-horizontal-spacing-sm) !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  #app-content .container,
  #app-content .container-fluid,
  #app-content section.container,
  #app-content>section>.container,
  #app-content>section>.container-fluid {
    padding-left: var(--page-horizontal-spacing-md) !important;
    padding-right: var(--page-horizontal-spacing-md) !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  #app-content .container,
  #app-content .container-fluid,
  #app-content section.container,
  #app-content>section>.container,
  #app-content>section>.container-fluid {
    padding-left: var(--page-horizontal-spacing-lg) !important;
    padding-right: var(--page-horizontal-spacing-lg) !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  #app-content .container,
  #app-content .container-fluid,
  #app-content section.container,
  #app-content>section>.container,
  #app-content>section>.container-fluid {
    padding-left: var(--page-horizontal-spacing-xl) !important;
    padding-right: var(--page-horizontal-spacing-xl) !important;
  }
}

/* XXL devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

  #app-content .container,
  #app-content .container-fluid,
  #app-content section.container,
  #app-content>section>.container,
  #app-content>section>.container-fluid {
    padding-left: var(--page-horizontal-spacing-xxl) !important;
    padding-right: var(--page-horizontal-spacing-xxl) !important;
    max-width: var(--page-max-width);
    margin: 0 auto;
  }
}

/* Constrain all containers on very large screens (1920px and up) */
@media (min-width: 1920px) {

  .container,
  .container-fluid {
    max-width: var(--page-max-width);
  }

  #app-content .container,
  #app-content .container-fluid,
  #app-content section.container,
  #app-content>section>.container,
  #app-content>section>.container-fluid {
    padding-left: var(--page-horizontal-spacing-xxxl) !important;
    padding-right: var(--page-horizontal-spacing-xxxl) !important;
  }
}

/* Content section with reasonable padding */
section.container .content-section {
  /* max-width: 1400px; */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Restore row margins for proper spacing */
section.container .row {
  margin-left: -10px;
  margin-right: -10px;
}

@media (min-width: 768px) {
  section.container .row {
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* Column padding for proper spacing */
section.container .row>[class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

@media (min-width: 768px) {
  section.container .row>[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Regular page content should have proper top margin */
/* #app-content section.container,
#app-content > section:not(.carousel):not(.info-wrapper) {
  padding-top: 40px;
} */

/* Carousel on home page should start below header */
#app-content>.carousel {
  margin-top: 0;
  padding-top: 0;
  position: relative;
  z-index: 1;
}

/* Info wrapper on home page */
#app-content>.info-wrapper {
  margin-top: 0;
  padding-top: 0;
}

/* Body margin and padding are handled above */

a {
  text-decoration: none;
}

/* === GLOBAL TABLE BORDERS === */
/* Ensure all tables have visible borders to separate from background */
table:not(.table-borderless) {
  border: 1px solid #d0d0d0;
  border-bottom: none !important;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff !important;
  margin-bottom: 0 !important;
  --bs-table-bg: #ffffff !important;
}

/* Add borders to table cells if not already specified */
table:not(.table-borderless) thead th {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

table:not(.table-borderless) thead th:last-child {
  border-right: none;
}

table:not(.table-borderless) tbody tr {
  border-bottom: 1px solid #e9ecef;
}

/* Alternating row colors for better readability */
table:not(.table-borderless) tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

table:not(.table-borderless) tbody tr:nth-child(even) {
  background-color: #f8f9fa !important;
}

table:not(.table-borderless) tbody tr:last-child {
  border-bottom: none !important;
}

/* Remove bottom border from all tables */
table:not(.table-borderless) tbody tr:last-child td {
  border-bottom: none !important;
}

table:not(.table-borderless) tbody td {
  border-right: 1px solid #e9ecef;
}

table:not(.table-borderless) tbody td:last-child {
  border-right: none;
}

/* Ensure table-responsive containers have visible borders when wrapping tables */
.table-responsive:not(.no-border-wrapper) {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 0 !important;
}

/* For tables inside table-responsive, remove outer border to avoid double borders */
.table-responsive:not(.no-border-wrapper)>table {
  border: none;
  border-radius: 0;
  margin-bottom: 0 !important;
}

/* Specific table classes that need explicit borders */
.mou-status-table,
.circulars-table,
.tenders-table {
  border: 1px solid #d0d0d0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  --bs-table-bg: #ffffff !important;
}

/* Alternating row colors for specific table classes */
.mou-status-table tbody tr:nth-child(odd),
.circulars-table tbody tr:nth-child(odd),
.tenders-table tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

.mou-status-table tbody tr:nth-child(even),
.circulars-table tbody tr:nth-child(even),
.tenders-table tbody tr:nth-child(even) {
  background-color: #f8f9fa !important;
}

.mou-status-table tbody tr:last-child,
.circulars-table tbody tr:last-child,
.tenders-table tbody tr:last-child {
  border-bottom: none !important;
}

.mou-status-table tbody tr:last-child td,
.circulars-table tbody tr:last-child td,
.tenders-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Bootstrap table-bordered class enhancement */
.table-bordered {
  border: 1px solid #d0d0d0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  --bs-table-bg: #ffffff !important;
}

.table-bordered thead th,
.table-bordered tbody td {
  border: 1px solid #e9ecef !important;
}

.table-bordered thead th {
  border-bottom: 2px solid #d0d0d0 !important;
}

/* Alternating row colors for table-bordered */
.table-bordered tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

.table-bordered tbody tr:nth-child(even) {
  background-color: #f8f9fa !important;
}

.table-bordered tbody tr:last-child {
  border-bottom: none !important;
}

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

/* Remove margin-bottom from all table elements and override Bootstrap variables */
table,
.table,
.table-responsive {
  margin-bottom: 0 !important;
  --bs-table-bg: #ffffff !important;
}

/* Alternating row colors for all tables - with high specificity */
table tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

table tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
  background-color: #f8f9fa !important;
}

/* Remove bottom border from all tables and last rows */
table tbody tr:last-child,
.table tbody tr:last-child {
  border-bottom: none !important;
}

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

/* Override Bootstrap table background variable for all table elements */
table *,
.table * {
  --bs-table-bg: #ffffff !important;
}

/* Final comprehensive rule for alternating row colors - highest priority */
/* This must come last to override all other rules */
table tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd),
table:not(.table-borderless) tbody tr:nth-child(odd),
tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

table tbody tr:nth-child(even),
.table tbody tr:nth-child(even),
table:not(.table-borderless) tbody tr:nth-child(even),
tbody tr:nth-child(even) {
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
}

/* === TOP BAR (SECTION 1) === */
.top-bar {
  background: linear-gradient(90deg, #004b88 0%, #0063ae 100%);
  color: #ffffff;
  font-size: clamp(14px, 1vw, 1.1rem);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.top-bar .container-fluid {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(8px, 1vw, 15px);
  box-sizing: border-box;
}


.top-bar .container-fluid>.d-flex:first-child {
  margin-left: 0;
  padding-left: 15px;
}

.top-bar .container-fluid>.d-flex:last-child {
  margin-right: 0;
  padding-right: 15px;
}

.top-bar .container-fluid.px-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.top-bar .d-flex {
  gap: 8px;
  align-items: center;
}

.top-bar a {
  color: #ffffff;
  text-decoration: none;
  margin-right: 0;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.top-bar a:hover {
  color: #ffa500;
  text-decoration: underline;
}

.header-border {
  padding-left: 10px;
  margin-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.access-icon {
  width: 26px;
  height: 26px;
  margin-right: 10px;
  flex-shrink: 0;
}

/* === LANGUAGE TOGGLE === */
.language-toggle {
  display: inline-block;
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.language-toggle ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.language-toggle .lang-select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* Drupal language switcher block structure */
.language-toggle .block-language,
.language-toggle .language-switcher-locale-url,
.language-toggle nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.language-toggle nav ul,
.language-toggle .block-language ul,
.language-toggle .language-switcher-locale-url ul {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style for language links/options */
.language-toggle a,
.language-toggle .language-link,
.language-toggle li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

/* Radio button style for language options */
.language-toggle input[type="radio"] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #ffffff;
  flex-shrink: 0;
}

/* Ensure all language items are visible */
.language-toggle li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Active language style - HIDE the active language */
.language-toggle .lang-active,
.language-toggle a.is-active,
.language-toggle .language-link.is-active,
.language-toggle li.is-active,
.language-toggle li.is-active a,
.language-toggle li.active,
.language-toggle li.active a {
  display: none !important;
  visibility: hidden !important;
}

/* Inactive language style - SHOW only the inactive language */
.language-toggle .lang-inactive,
.language-toggle a:not(.is-active),
.language-toggle .language-link:not(.is-active),
.language-toggle li:not(.is-active):not(.active),
.language-toggle li:not(.is-active):not(.active) a {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1;
  font-weight: 500;
  color: #ffffff;
}

.language-toggle a:hover,
.language-toggle .language-link:hover,
.language-toggle li a:hover {
  opacity: 1;
  color: #ffa500;
  text-decoration: none;
}

/* Ensure inactive language items are visible */
.language-toggle .lang-select,
.language-toggle .lang-select>*:not(.is-active):not(.active),
.language-toggle li:not(.is-active):not(.active) {
  display: inline-flex !important;
  visibility: visible !important;
}

/* Hide language separator if it exists, or style it */
.language-toggle .language-switcher-separator {
  display: none;
}

/* Make sure language block content is visible */
.language-toggle>* {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* === MAIN NAVBAR (SECTION 2) === */
.custom-navbar {
  background: #ffffff;
  /* border-bottom: 2px solid #0063ae; */
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100vw;
  transition: all 0.3s ease-in-out;
  margin: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: visible !important;
  /* Allow drawer to escape on mobile */
  position: relative;
}


.custom-navbar .container-fluid,
.custom-navbar .navigation-oprions {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(15px, 1.5vw, 30px);
  box-sizing: border-box;
}

.custom-navbar .navbar-collapse {
  width: 80%;
  flex: 0 0 80%;
  max-width: 80%;
  display: flex;
  align-items: center;
}

.custom-navbar .navbar-collapse .navbar-nav {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 5px 10px;
  flex-wrap: nowrap;
  overflow: visible;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


@media (max-width: 992px) {
  .custom-navbar .navbar-collapse {
    margin-right: 10px;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .custom-navbar .navbar-collapse .navbar-nav {
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* When drawer is open, make nav full width */
  .custom-navbar .navbar-collapse.show .navbar-nav,
  .custom-navbar .navbar-collapse.collapsing .navbar-nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .custom-navbar .navigation-oprions>.d-flex.align-items-center:last-child,
  .custom-navbar .container-fluid>.d-flex.align-items-center:last-child {
    width: auto;
    flex: 0 0 auto;
    max-width: none;
  }
}

.custom-navbar .navigation-oprions>.d-flex.align-items-center:last-child,
.custom-navbar .container-fluid>.d-flex.align-items-center:last-child {
  order: 2;
  width: 20%;
  flex: 0 0 20%;
  max-width: 20%;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  overflow: hidden;
  box-sizing: border-box;
}

.custom-navbar .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}

.custom-navbar .navbar-toggler {
  order: 0;
  margin-right: 15px;
}

.custom-navbar .container-fluid.px-3,
.custom-navbar .navigation-oprions.px-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 1200px) {

  .custom-navbar .container-fluid,
  .custom-navbar .navigation-oprions {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: clamp(10px, 1.5vw, 20px);
  }

  .custom-navbar .navbar-collapse {}

  .custom-navbar .navigation-oprions>.d-flex.align-items-center:last-child,
  .custom-navbar .container-fluid>.d-flex.align-items-center:last-child {}

  .top-bar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: clamp(5px, 1vw, 10px);
  }

  .top-bar .container-fluid>.d-flex:first-child {
    padding-left: 15px;
  }

  .top-bar .container-fluid>.d-flex:last-child {
    padding-right: 15px;
  }

  .navbar-nav .nav-link {
    font-size: clamp(10px, 1vw, 12px);
    padding: 6px clamp(10px, 1.2vw, 15px);
  }
}

@media (max-width: 992px) {

  .custom-navbar .container-fluid,
  .custom-navbar .navigation-oprions {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 10px;
  }

  .custom-navbar .navbar-collapse {}

  .custom-navbar .navigation-oprions>.d-flex.align-items-center:last-child,
  .custom-navbar .container-fluid>.d-flex.align-items-center:last-child {}

  .top-bar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 8px;
  }

  .top-bar .container-fluid>.d-flex:first-child {
    padding-left: 15px;
  }

  .top-bar .container-fluid>.d-flex:last-child {
    padding-right: 15px;
  }

  .navbar-nav .nav-link {
    font-size: 11px;
    padding: 6px 12px;
  }

  .custom-navbar .navbar-collapse {
    margin-right: 15px;
    padding-left: 20px;
  }

  /* Ensure drawer opens outside navbar */
  .custom-navbar .navbar-collapse.show,
  .custom-navbar .navbar-collapse.collapsing {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #004b88 !important;
    z-index: 1050 !important;
    margin: 0 !important;
    padding: 15px 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Ensure navbar collapse is hidden by default on mobile */
  .custom-navbar .navbar-collapse:not(.show):not(.collapsing) {
    display: none !important;
  }

  .custom-navbar .navigation-oprions>.d-flex.align-items-center:last-child,
  .custom-navbar .container-fluid>.d-flex.align-items-center:last-child {
    padding-right: 20px;
  }
}

@media (min-width: 1400px) {

  .custom-navbar .container-fluid,
  .custom-navbar .navigation-oprions {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .custom-navbar .navbar-collapse {}

  .custom-navbar .navigation-oprions>.d-flex.align-items-center:last-child,
  .custom-navbar .container-fluid>.d-flex.align-items-center:last-child {}

  .top-bar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .top-bar .container-fluid>.d-flex:first-child {
    padding-left: 20px;
  }

  .top-bar .container-fluid>.d-flex:last-child {
    padding-right: 20px;
  }
}

@media (min-width: 1920px) {

  .custom-navbar .container-fluid,
  .custom-navbar .navigation-oprions {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .custom-navbar .navbar-collapse {}

  .custom-navbar .navigation-oprions>.d-flex.align-items-center:last-child,
  .custom-navbar .container-fluid>.d-flex.align-items-center:last-child {}

  .top-bar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .top-bar .container-fluid>.d-flex:first-child {
    padding-left: 20px;
  }

  .top-bar .container-fluid>.d-flex:last-child {
    padding-right: 20px;
  }
}

.navbar-brand img {
  transition: all 0.3s ease;
  height: auto;
  max-height: 50px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.custom-navbar {
  min-height: 60px;
  display: flex;
  align-items: center;
}

ul.navbar-nav.nav-rounded {
  height: auto;
  min-height: 46px;
  display: flex;
  align-items: center;
}


.dropdown-item {
  display: block;
  width: 100%;
}

/* Rounded Navigation Bar */
ul.navbar-nav.nav-rounded {
  background: #004b88;
  border-radius: 0;
  padding: 7px clamp(8px, 1vw, 12px);
  /* Responsive padding */
  box-shadow: 0 0 8px #ffc107;
  position: relative;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0.3rem, 0.5vw, 0.5rem);
  /* Responsive gap */
  max-width: 100%;
  width: 100%;
  min-width: 0;
  /* Allow shrinking */
  z-index: 2;
  overflow: visible;
  flex-wrap: nowrap;
  display: flex;
  list-style: none;
  margin: 0;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  ul.navbar-nav.nav-rounded {
    gap: clamp(0.2rem, 0.4vw, 0.4rem);
    padding: 7px clamp(6px, 0.8vw, 10px);
  }
}

@media (max-width: 992px) {
  ul.navbar-nav.nav-rounded {
    gap: 0.3rem;
    padding: 7px 8px;
    flex-wrap: wrap;
  }
}

/* Nav Links */
.navbar-nav .nav-link {
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
  font-size: clamp(12px, 1vw, 14px);
  /* Responsive font size reduced further */
  margin: 0;
  border-radius: 0;
  padding: 6px clamp(10px, 1.2vw, 15px);
  /* Responsive padding reduced */
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease-in-out;
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  text-decoration: none;
  box-sizing: border-box;
}

.navbar-nav .nav-item {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 1400px) {
  .navbar-nav .nav-link {
    font-size: 13px;
    padding: 7px 15px;
  }

  ul.navbar-nav.nav-rounded {
    gap: 0.5rem;
    padding: 8px 12px;
  }

  .top-bar {
    font-size: 14px;
  }

  .top-bar a {
    font-size: 14px;
  }
}

@media (min-width: 1600px) {
  .navbar-nav .nav-link {
    font-size: 14px;
    padding: 7px 15px;
  }

  ul.navbar-nav.nav-rounded {
    gap: 0.45rem;
  }

  .top-bar {
    font-size: 15px;
  }

  .top-bar a {
    font-size: 15px;
  }
}

@media (min-width: 1920px) {
  .navbar-nav .nav-link {
    font-size: 15px;
    padding: 8px 16px;
  }

  ul.navbar-nav.nav-rounded {
    gap: 0.5rem;
    padding: 10px 12px;
  }

  .top-bar {
    font-size: 16px;
  }

  .top-bar a {
    font-size: 16px;
  }

  .navbar-brand img {
    max-height: 60px;
  }
}

/* Ultra-wide screens (2560px and above) */
@media (min-width: 2560px) {
  .navbar-nav .nav-link {
    font-size: 16px;
    padding: 10px 20px;
  }

  ul.navbar-nav.nav-rounded {
    gap: 0.6rem;
    padding: 12px 15px;
  }

  .top-bar {
    font-size: 18px;
  }

  .top-bar a {
    font-size: 18px;
  }

  .navbar-brand img {
    max-height: 70px;
  }
}


.navbar-nav .nav-link:hover {
  color: #ffa600;
  border-image: linear-gradient(90deg, #0063ae, #ffa600) 1;
  border-bottom: 3px solid transparent;
  transform: translateY(-2px);
}

/* Prevent text color from turning black on click/focus for nav-links */
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus {
  color: #ffffff !important;
}

.navbar-nav .nav-link.active {
  color: #ffffff;
  border-bottom: none;
  padding: 6px 18px;
  background: linear-gradient(90deg, #ffc107 0%, #ffa500 100%);
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(255, 165, 0, 0.25);
}

/* Dropdown Styles */
.navbar-nav .nav-item.dropdown {
  position: relative;
  z-index: 3;
}

.navbar-nav .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Prevent text color from turning black on click/focus */
.navbar-nav .dropdown-toggle:active,
.navbar-nav .dropdown-toggle:focus,
.navbar-nav .dropdown-toggle.show,
.navbar-nav .dropdown-toggle[aria-expanded="true"] {
  color: #ffffff !important;
}

/* Hide dropdown arrows */
.navbar-nav .dropdown-toggle::after {
  display: none;
}

.navbar-nav .dropdown-menu {
  background: #0063ae;
  border: 1px solid rgba(0, 99, 174, 0.2);
  border-radius: 0;
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.15);
  padding: 6px 0;
  position: absolute;
  z-index: 1000;
  margin-top: 6px;
  min-width: 260px;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: visible;
  top: 100%;
  left: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (min-width: 993px) {
  .navbar-nav .dropdown-menu {
    max-height: none;
    overflow: visible;
    margin-top: 4px;
  }

  .navbar-nav .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 20px;
    right: 20px;
    height: 4px;
    background: transparent;
  }
}

.navbar-nav .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.navbar-nav .dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.navbar-nav .dropdown-menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.navbar-nav .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.navbar-nav .dropdown-menu[aria-labelledby="frameworksDropdown"] {
  min-width: 430px;
  max-width: 500px;
}

.navbar-nav .dropdown-menu[aria-labelledby="initiativesDropdown"] {
  min-width: 460px;
  max-width: 550px;
}

.navbar-nav .dropdown-menu[aria-labelledby="servicesDropdown"] {
  min-width: 490px;
  max-width: 550px;
}

.navbar-nav .dropdown-menu[aria-labelledby="collaborationsDropdown"] {
  min-width: 410px;
  max-width: 500px;
}

/* Show dropdown on hover */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
}

.navbar-nav .dropdown-item {
  color: #ffffff !important;
  padding: 8px 16px;
  font-size: 16px;
  font-size: 13px !important;
  font-weight: 500;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.navbar-nav .dropdown-item i {
  font-size: 13px !important;
  /* Reduced from 16px */
  margin-right: 8px;
  width: 16px;
  font-size: 13px !important;
  width: 13px;
  text-align: center;
  color: #ffffff;
  transition: color 0.3s ease;
}

.navbar-nav .dropdown-item:hover i {
  color: #ffc107;
}

.navbar-nav .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-left-color: #ffc107;
  padding-left: 18px;
}

.navbar-nav .dropdown-item:active {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.navbar-nav .dropdown-divider {
  margin: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Hover-based sub-items in Frameworks dropdown */
.navbar-nav .dropdown-item.has-sub-items {
  position: relative;
  cursor: pointer;
  color: #ffffff !important;
}

.navbar-nav .dropdown-item.has-sub-items::after {
  display: none;
}

.navbar-nav li.has-submenu {
  position: relative;
}

.navbar-nav .sub-items-container {
  min-width: 250px;
  max-width: 350px;
  background: rgb(253, 233, 147);
  border: 1px solid rgba(0, 99, 174, 0.2);
  border-radius: 0;
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.15);
  padding: 6px 0;
  z-index: 1001;
  list-style: none;
}

@media (min-width: 993px) {
  .navbar-nav .dropdown-menu .has-submenu {
    position: relative;
  }

  .navbar-nav .dropdown-menu .has-submenu .sub-items-container {
    position: absolute !important;
    top: 0;
    left: calc(100% - 4px);
    margin-left: 0;
    max-height: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .navbar-nav .dropdown-menu .has-submenu:hover>.sub-items-container,
  .navbar-nav .dropdown-menu .has-submenu:focus-within>.sub-items-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.navbar-nav .sub-items-container .sub-item {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  color: #02385f !important;
  background: rgb(253, 233, 147) !important;
  border-left: 3px solid #00aaff !important;
  font-size: 12px !important;
  /* Reduced from 15px */
  padding: 8px 16px !important;
  font-size: 12px !important;
  display: block;
  width: 100%;
  text-decoration: none;
}

.navbar-nav .sub-items-container .sub-item:hover {
  color: #004b80 !important;
  background: rgba(255, 216, 23, 0.9) !important;
  border-left-color: #00ccff !important;
  padding-left: 18px !important;
}

.navbar-nav .dropdown-item[style*="padding-left: 24px"] {
  padding-left: 32px !important;
  font-size: 15px;
  font-size: 12px !important;
  color: #ffffff !important;
  border-left: none !important;
}

.navbar-nav .dropdown-item[style*="padding-left: 24px"]:hover {
  padding-left: 34px !important;
  color: #ffffff;
  border-left: none !important;
  background: rgba(255, 255, 255, 0.2);
}

/* Knowledge Repository dropdown with descriptions */
.navbar-nav .knowledge-dropdown {
  min-width: 450px;
  max-width: 550px;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 993px) {
  .navbar-nav .knowledge-dropdown {
    max-height: none;
    overflow: visible;
  }
}

.navbar-nav .knowledge-item {
  padding: 0 !important;
  border-left: none !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px !important;
  overflow: hidden;
}

.navbar-nav .knowledge-dropdown .knowledge-item {
  align-items: flex-start;
}

.navbar-nav .knowledge-dropdown .knowledge-icon {
  margin-top: 2px;
  align-items: flex-start;
  padding-top: 0;
}

.navbar-nav .knowledge-item:hover {
  padding-left: 16px !important;
  border-left: none !important;
  background: rgba(255, 255, 255, 0.2);
}

.navbar-nav .knowledge-icon {
  width: auto;
  height: auto;
  min-width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.3s ease;
  color: #ffffff;
}

.navbar-nav .knowledge-icon i {
  font-size: 18px;
}

.navbar-nav .knowledge-item:hover .knowledge-icon {
  color: #ffc107;
}

.navbar-nav .knowledge-content {
  flex: 1;
  min-width: 0;
}

.navbar-nav .knowledge-title {
  font-weight: 600;
  font-size: 16px;
  font-size: 13px !important;
  color: #ffffff;
  margin-bottom: 4px;
  transition: color 0.3s ease;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.navbar-nav .knowledge-item:hover .knowledge-title {
  color: #ffc107;
}

.navbar-nav .knowledge-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Adjust title when there's no description */
.navbar-nav .knowledge-content:only-child .knowledge-title,
.navbar-nav .knowledge-content .knowledge-title:only-child {
  margin-bottom: 0;
}

/* Ensure proper alignment for items without descriptions */
.navbar-nav .knowledge-item .knowledge-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Center items without descriptions (Services, Collaborations) */
.navbar-nav .dropdown-menu[aria-labelledby="servicesDropdown"] .knowledge-item,
.navbar-nav .dropdown-menu[aria-labelledby="collaborationsDropdown"] .knowledge-item {
  align-items: center;
}

.navbar-nav .dropdown-menu[aria-labelledby="servicesDropdown"] .knowledge-icon,
.navbar-nav .dropdown-menu[aria-labelledby="collaborationsDropdown"] .knowledge-icon {
  margin-top: 0;
  align-items: center;
}

/* Search Box */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.search-wrapper input {
  padding: 6px 32px 6px 12px;
  padding: 4px 28px 4px 10px;
  border-radius: 20px;
  border: 1px solid #cfd8ea;
  outline: none;
  width: clamp(120px, 12vw, 180px);
  /* Responsive width */
  max-width: 100%;
  background: #fff;
  transition: all 0.3s ease;
  width: clamp(120px, 12vw, 180px);
  max-width: 100%;
  font-size: clamp(11px, 1.1vw, 13px);
  height: 28px;
  line-height: 1.2;
  box-sizing: border-box;
}

.search-wrapper input:focus {
  border-color: #0063ae;
  box-shadow: 0 0 6px rgba(0, 99, 174, 0.3);
}

.search-wrapper i {
  position: absolute;
  right: 10px;
  color: #0063ae;
  font-size: 1rem;
  cursor: pointer;
  pointer-events: none;
}

/* Search button - replace text with icon using CSS background */
.search-wrapper input[type="submit"],
.search-wrapper button[type="submit"],
.search-wrapper .form-submit,
.search-wrapper button.form-submit,
.search-wrapper input.form-submit,
.search-wrapper .form-actions input[type="submit"],
.search-wrapper .form-actions button[type="submit"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  margin: 0;
  border: none;
  background: #0063ae url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3Cline x1='9' y1='9' x2='12' y2='12' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 20px 20px;
  cursor: pointer;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
  border-radius: 14px;
  transition: all 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}

/* Hover effect */
.search-wrapper input[type="submit"]:hover,
.search-wrapper button[type="submit"]:hover,
.search-wrapper .form-submit:hover,
.search-wrapper button.form-submit:hover,
.search-wrapper input.form-submit:hover,
.search-wrapper .form-actions input[type="submit"]:hover,
.search-wrapper .form-actions button[type="submit"]:hover {
  background-color: #004b88;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3Cline x1='9' y1='9' x2='12' y2='12' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;
}

/* Adjust input padding if button is inside wrapper */
.search-wrapper input[type="text"],
.search-wrapper input[type="search"] {
  padding-right: 12px !important;
}

/* Style for search form container */
.search-wrapper form {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Ensure button is properly aligned and visible */
.search-wrapper .form-actions {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Ensure search button is visible */
.search-wrapper input[type="submit"],
.search-wrapper button[type="submit"] {
  visibility: visible !important;
  display: inline-flex !important;
  opacity: 1 !important;
}

/* Make sure button appears next to input */
.search-wrapper .container-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Responsive */
@media (max-width: 992px) {
  .top-bar {
    font-size: 12px;
    padding: 5px 0;
  }

  .top-bar .container-fluid {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .top-bar .d-flex {
    gap: 6px;
    width: 100%;
  }

  .top-bar a {
    font-size: 11px;
    margin-right: 0;
  }

  .header-border {
    padding-left: 6px;
    margin-left: 6px;
  }

  .search-wrapper {
    width: 100%;
    margin-top: 8px;
    margin-left: 0;
  }

  .search-wrapper input {
    width: 100%;
    max-width: 100%;
    font-size: 12px;
  }

  .access-icon {
    margin-right: 6px;
  }

  #app-content {
    padding-top: 160px;
  }

  .custom-navbar {
    padding: 8px 2px;
  }

  .navbar-brand img {
    max-height: 45px;
  }

  ul.navbar-nav.nav-rounded {
    border-radius: 0;
    box-shadow: none;
    padding: 5px;
    gap: 0;
  }

  .navbar-nav .nav-link {
    margin: 2px 0;
    padding: 8px 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }

  /* Hide dropdown toggle arrows on mobile since everything is expanded */
  .navbar-nav .dropdown-toggle::after {
    display: none !important;
  }

  .navbar-nav .nav-item.dropdown {
    width: 100%;
  }

  .navbar-nav .dropdown-menu {
    position: static;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: 0 4px 15px rgba(0, 99, 174, 0.12);
    width: calc(100% - 15px);
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 3px 0;
  }

  /* Show all dropdown menus by default on mobile - no click needed */
  .navbar-nav .nav-item.dropdown .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
  }

  /* Disable hover on mobile */
  .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
  }

  .navbar-nav .dropdown-item {
    padding: 6px 15px;
    font-size: 13px;
    line-height: 1.3;
  }

  /* On mobile, submenu appears below and is always visible - compact spacing */
  .navbar-nav .sub-items-container {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-left: 15px;
    margin-top: 2px;
    margin-bottom: 2px;
    width: calc(100% - 30px);
    max-width: none;
    max-height: 1000px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    padding: 3px 0 !important;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border-left: 2px solid rgba(255, 193, 7, 0.5) !important;
    border-radius: 3px;
  }

  /* Submenus are always visible on mobile - no toggling needed */
  .navbar-nav .sub-items-container,
  .navbar-nav .sub-items-container.show,
  .navbar-nav li.has-submenu.submenu-open .sub-items-container,
  .navbar-nav li.has-submenu .sub-items-container {
    max-height: 1000px !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 6px 0 !important;
    pointer-events: auto !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Ensure all submenu children are visible */
  .navbar-nav .sub-items-container *,
  .navbar-nav .sub-items-container.show *,
  .navbar-nav li.has-submenu.submenu-open .sub-items-container * {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* Force visibility - override any other rules */
  .navbar-nav .sub-items-container[style*="max-height: 1000px"],
  .navbar-nav .sub-items-container[style*="opacity: 1"] {
    max-height: 1000px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Disable hover effects on mobile */
  .navbar-nav li.has-submenu:hover .sub-items-container {
    max-height: 1000px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Make submenu parent link compact and clickable */
  .navbar-nav .dropdown-item.has-sub-items {
    cursor: pointer;
    position: relative;
    padding: 5px 15px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500;
  }

  /* No arrow needed since submenus are always expanded */
  .navbar-nav .dropdown-item.has-sub-items::after {
    content: '';
    display: none;
  }

  /* Style submenu items on mobile - compact and clickable */
  .navbar-nav .sub-items-container .sub-item {
    padding: 5px 12px 5px 20px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    border-left: none !important;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
  }

  .navbar-nav .sub-items-container .sub-item:hover,
  .navbar-nav .sub-items-container .sub-item:active,
  .navbar-nav .sub-items-container .sub-item:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    pointer-events: auto !important;
  }

  /* Ensure submenu items are always clickable when container is visible */
  .navbar-nav .sub-items-container.show .sub-item,
  .navbar-nav .sub-items-container[style*="opacity: 1"] .sub-item {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Ensure navbar collapse works on mobile - position outside navbar */
  .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    position: static;
    display: none;
    /* Hidden by default on mobile */
  }

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #004b88 !important;
    z-index: 1050 !important;
    margin-top: 0 !important;
    padding: 8px 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Reduce divider spacing on mobile */
  .navbar-nav .dropdown-divider {
    margin: 2px 0 !important;
    opacity: 0.5;
  }

  /* Ensure toggler button is visible and clickable */
  .navbar-toggler {
    display: block !important;
    z-index: 1060 !important;
    position: relative;
  }

  /* Make sure toggler icon is visible - hamburger icon */
  .navbar-toggler-icon {
    display: inline-block !important;
    width: 1.5em !important;
    height: 1.5em !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% !important;
    transition: all 0.3s ease !important;
  }

  /* Change to X (close icon) when menu is open */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon,
  .navbar-toggler.active .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M6 24L24 6'/%3e%3c/svg%3e") !important;
  }

  /* Ensure navbar container doesn't clip the collapse */
  .custom-navbar .container-fluid,
  .custom-navbar .navigation-oprions {
    position: relative;
    overflow: visible !important;
  }

  /* Make navbar itself not clip */
  .custom-navbar {
    overflow: visible !important;
  }

  /* Page Content Responsive */
  #app-content section.container {
    padding-left: 15px;
    padding-right: 15px;
  }

  section.container .content-section {
    padding: 20px 0;
  }
}

@media (max-width: 768px) {

  /* Top Bar Responsive */
  .top-bar {
    font-size: 11px;
    padding: 4px 0;
  }

  .top-bar .container-fluid {
    padding: 0 10px;
  }

  .top-bar a {
    font-size: 10px;
    margin-right: 6px;
  }

  .access-icon {
    width: 22px;
    height: 22px;
    margin-right: 8px;
  }

  /* Header height adjustment */
  #app-content {
    padding-top: 140px;
  }

  .navbar-brand img {
    height: 45px;
  }

  /* Page Content Responsive */
  #app-content section.container {
    padding-left: 10px;
    padding-right: 10px;
  }

  section.container .content-section {
    padding: 15px 0;
  }

  section.container .row {
    margin-left: -5px;
    margin-right: -5px;
  }

  section.container .row>[class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (max-width: 480px) {

  /* Top Bar Responsive */
  .top-bar {
    font-size: 10px;
    padding: 3px 0;
  }

  #app-content section.container {
    padding-left: 15px;
    padding-right: 15px;
  }

  section.container .content-section {
    padding: 20px 0;
  }
}

@media (max-width: 768px) {
  .top-bar {
    font-size: 11px;
    padding: 4px 0;
  }

  .top-bar .container-fluid {
    padding: 0 10px;
  }

  .top-bar a {
    font-size: 10px;
    margin-right: 6px;
  }

  .access-icon {
    width: 22px;
    height: 22px;
    margin-right: 8px;
  }

  #app-content {
    padding-top: 140px;
  }

  .navbar-brand img {
    height: 45px;
  }

  #app-content section.container {
    padding-left: 10px;
    padding-right: 10px;
  }

  section.container .content-section {
    padding: 15px 0;
  }

  section.container .row {
    margin-left: -5px;
    margin-right: -5px;
  }

  section.container .row>[class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (max-width: 480px) {
  .top-bar {
    font-size: 10px;
    padding: 3px 0;
  }

  .top-bar .container-fluid {
    padding: 0 8px;
    flex-direction: column;
    gap: 5px;
  }

  .top-bar a {
    font-size: 9px;
    margin-right: 4px;
  }

  .header-border {
    padding-left: 5px;
  }

  #app-content {
    padding-top: 130px;
  }

  .navbar-brand img {
    height: 40px;
  }

  #app-content section.container {
    padding-left: 8px;
    padding-right: 8px;
  }

  section.container .content-section {
    padding: 12px 0;
  }
}




/* ------------------------------------------------ carousel ---------------------------------------- */

/*----------------------------------------------------------- footer -------------------------------*/
.footer-modern {
  background: radial-gradient(circle at top left, #0b0e2a, #050617 80%);
  color: #f4f4f4;
  padding: 70px 8% 20px;
  font-family: 'Poppins', sans-serif;
  position: relative;
  overflow: hidden;
}

/* Animated Glow Line */
.footer-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 3px;
  background: linear-gradient(90deg, #00c6ff, #0072ff, #00c6ff);
  animation: glowingLine 6s linear infinite;
}

@keyframes glowingLine {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(50%);
  }
}

.footer-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  z-index: 2;
  position: relative;
}

/* About Section */
.footer-about h2 {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #00b3ff;
}

.footer-about p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #cbd3e2;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.social-icons a {
  background: #0a2540;
  color: #00c6ff;
  border-radius: 50%;
  width: 38px;
  text-decoration: none;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background: #00b3ff;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 0 15px #00b3ff;
}

/* Link Sections */
.footer-links h3,
.footer-contact h3 {
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 1.1rem;
  border-left: 4px solid #00b3ff;
  padding-left: 8px;
}

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

.footer-links ul li {
  margin-bottom: 8px;
}

.footer-links ul li a {
  color: #cbd3e2;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.footer-links ul li a:hover {
  color: #00c6ff;
  text-shadow: 0 0 8px #00c6ff;
}

/* Contact Info */
.footer-contact p {
  font-size: 0.9rem;
  margin: 6px 0;
  color: #d3d8e2;
}

.footer-contact i {
  color: #00b3ff;
  margin-right: 8px;
}

.visit-stats p {
  margin-top: 10px;
  color: #9da5b9;
  font-size: 0.9rem;
}

/* Bottom Bar */
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  margin-top: 50px;
  font-size: 0.9rem;
  color: #b4bac9;
}

.footer-bottom p {
  margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .footer-wrapper {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer-about {
    grid-column: span 3;
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .footer-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .footer-about {
    grid-column: span 2;
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }
}

@media (max-width: 550px) {
  .footer-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }

  .footer-links ul li a {
    font-size: 1rem;
  }
}



/*---------------------------------------------------- initiatives Karmayogi-section ----------------------------------------------*/

/* Initiative Breadcrumb */
.initiative-breadcrumb {
  background: linear-gradient(90deg, #004b88 0%, #0063ae 100%);
  padding: 12px 0;
  position: relative;
  z-index: 10;
  margin-top: 0;
}

.initiative-breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
}

.initiative-breadcrumb .breadcrumb-item a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.initiative-breadcrumb .breadcrumb-item a:hover {
  color: #ffa500;
}

.initiative-breadcrumb .breadcrumb-item.active {
  color: #ffffff;
}

.initiative-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: ">";
  color: #ffffff;
  padding: 0 8px;
}

/* Initiative Hero Section */
.initiative-hero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f0f0f0" width="1200" height="600"/><path fill="%23e0e0e0" d="M0 300 Q300 200 600 300 T1200 300" stroke="%23d0d0d0" fill="none"/></svg>');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 75, 136, 0.85) 0%, rgba(0, 99, 174, 0.75) 100%);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 50px 15px;
}

.hero-text-content {
  max-width: 900px;
  color: #ffffff;
}

.hero-category-tag {
  display: inline-block;
  background: rgba(59, 130, 246, 0.9);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: 3.5rem;
  /* font-size: 2.2rem !important;  */
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 35px;
  color: #ffffff;
  opacity: 0.95;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  background: rgba(59, 130, 246, 0.95);
  border: none;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.hero-btn-primary:hover {
  background: rgba(59, 130, 246, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  color: #ffffff;
}

.hero-btn-primary i {
  font-size: 18px;
}

.hero-btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
  color: #ffffff;
}

.hero-btn-secondary i {
  font-size: 18px;
}

/* Responsive Hero Section */
@media (max-width: 768px) {
  .initiative-hero {
    min-height: 280px;
  }

  .hero-content {
    padding: 40px 15px;
  }

  .hero-title {
    font-size: 2.2rem;
    margin-bottom: 15px;
  }

  .hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 25px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-category-tag {
    font-size: 12px;
    padding: 6px 16px;
  }
}

.Karmayogi-section {
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 45%, #f7f9fc 100%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 80px;
  padding-top: 0;
}

.Karmayogi-section .content-section {
  margin: auto;
  background: #fff;
  border-radius: 10px;
  padding: 30px 35px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.Karmayogi-section .card {
  border: none;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.Karmayogi-section .content-section h4 {
  font-weight: 700;
  color: #0d6efd;
  /* margin-bottom: 20px; */
  border-left: 4px solid #0d6efd;
  padding-left: 10px;
}

.Karmayogi-section .content-section h1 {
  font-weight: 800;
  font-size: 26px;
  color: #1b1f23;
  margin-bottom: 10px;
}

.Karmayogi-section .highlight-box {
  background: #f1f5ff;
  border-left: 4px solid #0d6efd;
  border-radius: 8px;
  padding: 15px 20px;
  font-size: 15px;
  margin-bottom: 20px;
}

.Karmayogi-section p {
  line-height: 1.8;
  font-size: 1.1rem;
  /* Increased from 15.5px for better readability */
  margin-bottom: 25px;
  /* text-align: justify; */
}

/* Timeline Wrapper Styles */
.Karmayogi-section .timeline-wrapper {
  margin-top: 10px;
}

.Karmayogi-section .timeline-wrapper .timeline-item {
  display: flex;
  gap: 20px;
  padding: 15px 0;
  border-left: 3px solid #0d6efd;
  padding-left: 20px;
  position: relative;
  margin-left: 0;
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.Karmayogi-section .timeline-wrapper .timeline-item::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 20px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #0d6efd;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.Karmayogi-section .timeline-date {
  min-width: 140px;
  font-weight: 600;
  color: #0d6efd;
  font-size: 15px;
  padding-top: 2px;
}

.Karmayogi-section .timeline-content {
  flex: 1;
  color: #333;
  line-height: 1.7;
}

.Karmayogi-section .timeline-content p {
  margin-bottom: 0;
  text-align: justify;
}

/* About Section Content Styling */
.content-section p,
.content-section p.lead {
  text-align: center;
}

/* Milestone Card Styles */
.Karmayogi-section .milestone-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #28a745;
  transition: all 0.2s ease;
}

.Karmayogi-section .milestone-card:hover {
  background: #f0f4ff;
  transform: translateX(3px);
}

.Karmayogi-section .milestone-card i {
  font-size: 1.3rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.Karmayogi-section .milestone-card>div {
  flex: 1;
}

.Karmayogi-section .milestone-card strong {
  display: block;
  margin-bottom: 6px;
  color: #1b1f23;
  font-size: 15px;
}

.Karmayogi-section .milestone-card .small {
  color: #6c757d;
  line-height: 1.6;
}

/* Enhanced Timeline Styles */
.Karmayogi-section .timeline-wrapper {
  margin-top: 20px;
  position: relative;
  padding-left: 30px;
}

.Karmayogi-section .timeline-wrapper::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e9ecef;
}

.Karmayogi-section .timeline-item-enhanced {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
  padding: 0 0 30px 0;
  margin-bottom: 0;
}

.Karmayogi-section .timeline-item-enhanced:last-child {
  padding-bottom: 0;
}

.Karmayogi-section .timeline-number-badge {
  width: 50px;
  height: 50px;
  background: #00569A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
  border: none;
  position: absolute;
  left: -30px;
  top: 0;
  z-index: 2;
}

.Karmayogi-section .timeline-content-enhanced {
  flex: 1;
  padding-top: 0;
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-left: 20px;
}

.Karmayogi-section .timeline-event-title {
  display: block;
  font-size: 1.15rem;
  color: #00569A;
  font-weight: 700;
  margin-bottom: 8px;
}

.Karmayogi-section .timeline-date-text {
  font-size: 0.95rem;
  color: #EC8C25;
  font-weight: 600;
  margin-bottom: 0;
  display: block;
}

.Karmayogi-section .timeline-content-enhanced p {
  display: none;
}

/* Milestone Stat Cards */
.Karmayogi-section .milestone-stat-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  border: 1px solid #e9ecef;
  height: 100%;
}

.Karmayogi-section .milestone-icon-wrapper {
  width: 60px;
  height: 60px;
  background: #e0f2f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: none;
}

.Karmayogi-section .milestone-icon-wrapper i {
  font-size: 1.75rem;
  color: #00569A;
}

.Karmayogi-section .milestone-stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #00569A;
  margin-bottom: 10px;
}

.Karmayogi-section .milestone-stat-label {
  font-size: 0.95rem;
  color: #6c757d;
  font-weight: 500;
}

/* Impact Metrics Table */
.Karmayogi-section .impact-metrics-table {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}

.Karmayogi-section .metrics-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 2fr;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #dee2e6;
}

.Karmayogi-section .metrics-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 2fr;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
  align-items: center;
}

.Karmayogi-section .metrics-table-row:last-child {
  border-bottom: none;
}

.Karmayogi-section .metrics-table-row:hover {
  background: #f8f9fa;
}

.Karmayogi-section .metric-col {
  font-size: 0.95rem;
}

.Karmayogi-section .progress-bar-wrapper {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.Karmayogi-section .progress-bar-fill {
  height: 100%;
  background: #00569A;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.Karmayogi-section .progress-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #00569A;
}

/* Download Button */
.Karmayogi-section .download-btn {
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.Karmayogi-section .download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

/* Concept Note Gist Styles */
.Karmayogi-section .concept-overview-quote {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-left: 4px solid #0d6efd;
  border-radius: 8px;
  padding: 25px;
  position: relative;
  margin-top: 20px;
}

.Karmayogi-section .quote-icon {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 2.5rem;
  color: #0d6efd;
  opacity: 0.2;
}

.Karmayogi-section .quote-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #1b1f23;
  font-style: italic;
  text-align: justify;
  margin: 0;
  padding-left: 30px;
}

.Karmayogi-section .concept-feature-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
}

.Karmayogi-section .concept-feature-card:hover {
  border-color: #00569A;
}

.Karmayogi-section .feature-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.Karmayogi-section .feature-card-header i {
  font-size: 1.3rem;
}

.Karmayogi-section .feature-card-header h6 {
  font-weight: 600;
  color: #1b1f23;
}

.Karmayogi-section .framework-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.Karmayogi-section .framework-badge {
  display: inline-block;
  padding: 6px 14px;
  background: #ffffff;
  color: #00569A;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #00569A;
  transition: all 0.2s ease;
}

.Karmayogi-section .framework-badge:hover {
  background: #00569A;
  color: #ffffff;
  border-color: #00569A;
}

.Karmayogi-section .process-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.Karmayogi-section .process-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.Karmayogi-section .process-step:hover {
  background: #f0f4ff;
  transform: translateX(5px);
}

.Karmayogi-section .process-step i {
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.Karmayogi-section .process-step span {
  font-size: 0.95rem;
  color: #495057;
  line-height: 1.6;
}

/* Core Principles Styles */
.Karmayogi-section .core-principles-section {
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid #e9ecef;
}

.Karmayogi-section .principles-group {
  margin-bottom: 20px;
}

.Karmayogi-section .principle-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0d6efd;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.Karmayogi-section .principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.Karmayogi-section .principle-pill {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border: 2px solid #e0e7ff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.Karmayogi-section .principle-pill:hover {
  border-color: #0d6efd;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.15);
}

.Karmayogi-section .principle-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d6efd;
  margin-bottom: 6px;
}

.Karmayogi-section .principle-desc {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.4;
  text-align: justify;
}

/* Competency Framework Cards */
.Karmayogi-section .competency-framework-section {
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid #e9ecef;
}

.Karmayogi-section .competency-domain-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  height: 100%;
}

.Karmayogi-section .competency-domain-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(13, 110, 253, 0.15);
}

.Karmayogi-section .domain-behavioural {
  border-top: 4px solid #28a745;
}

.Karmayogi-section .domain-behavioural:hover {
  border-color: #28a745;
}

.Karmayogi-section .domain-functional {
  border-top: 4px solid #6610f2;
}

.Karmayogi-section .domain-functional:hover {
  border-color: #6610f2;
}

.Karmayogi-section .domain-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}

.Karmayogi-section .domain-behavioural .domain-icon {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
}

.Karmayogi-section .domain-functional .domain-icon {
  background: linear-gradient(135deg, #6610f2 0%, #9c27b0 100%);
  box-shadow: 0 4px 15px rgba(102, 16, 242, 0.2);
}

.Karmayogi-section .domain-icon i {
  font-size: 1.75rem;
  color: #ffffff;
}

.Karmayogi-section .domain-number {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.Karmayogi-section .domain-behavioural .domain-number {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.Karmayogi-section .domain-functional .domain-number {
  background: linear-gradient(135deg, #6610f2 0%, #9c27b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.Karmayogi-section .domain-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1b1f23;
  margin-bottom: 6px;
}

.Karmayogi-section .domain-subtitle {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 15px;
}

.Karmayogi-section .domain-examples {
  font-size: 0.85rem;
  color: #495057;
  line-height: 1.6;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

/* Sidebar Styles */
.Karmayogi-section .concept-sidebar-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.Karmayogi-section .sidebar-section {
  position: relative;
}

.Karmayogi-section .sidebar-icon {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}

.Karmayogi-section .sidebar-icon i {
  font-size: 1.3rem;
  color: #ffffff;
}

.Karmayogi-section .sidebar-title {
  font-weight: 700;
  color: #1b1f23;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.Karmayogi-section .sidebar-text {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 15px;
}

.Karmayogi-section .mission-objectives {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.Karmayogi-section .mission-objective-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.Karmayogi-section .mission-objective-item:hover {
  background: #f0f4ff;
  transform: translateX(5px);
}

.Karmayogi-section .mission-objective-item i {
  color: #28a745;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.Karmayogi-section .mission-objective-item span {
  font-size: 0.9rem;
  color: #495057;
}

.Karmayogi-section .transform-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.Karmayogi-section .transform-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.Karmayogi-section .transform-item:hover {
  background: #f0f4ff;
  transform: translateX(5px);
}

.Karmayogi-section .transform-item i {
  color: #0d6efd;
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.Karmayogi-section .transform-item span {
  font-size: 0.9rem;
  color: #495057;
  line-height: 1.5;
}

.Karmayogi-section .significance-box {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
  border-left: 4px solid #ffc107;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  gap: 15px;
}

.Karmayogi-section .significance-box i {
  font-size: 1.5rem;
  color: #ffc107;
  flex-shrink: 0;
  margin-top: 2px;
}

.Karmayogi-section .significance-box strong {
  display: block;
  color: #1b1f23;
  margin-bottom: 8px;
  font-size: 1rem;
}

.Karmayogi-section .significance-box p {
  margin: 0;
  color: #495057;
  line-height: 1.6;
}

/* Media Gallery */
.Karmayogi-section .media-section-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1b1f23;
}

.Karmayogi-section .media-placeholder,
.Karmayogi-section .video-placeholder {
  aspect-ratio: 16/9;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.Karmayogi-section .media-placeholder:hover,
.Karmayogi-section .video-placeholder:hover {
  border-color: #0d6efd;
  background: #f0f4ff;
}

.Karmayogi-section .media-placeholder i,
.Karmayogi-section .video-placeholder i {
  font-size: 3rem;
  color: #6c757d;
}

/* Full Concept Note Styles */
.Karmayogi-section .concept-download-btn {
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #00569A;
  background: transparent;
  color: #00569A;
  padding: 8px 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.Karmayogi-section .concept-download-btn:hover {
  background: #00569A;
  color: #ffffff;
  border-color: #00569A;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 86, 154, 0.3);
}

.Karmayogi-section .concept-download-btn i {
  color: inherit;
}

.Karmayogi-section .concept-note-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left: 3px solid #00569A;
  border-radius: 8px;
}

.Karmayogi-section .toc-pill {
  display: inline-block;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #00569A;
  color: #00569A;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.Karmayogi-section .toc-pill:hover {
  background: #00569A;
  color: #ffffff;
  border-color: #00569A;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 86, 154, 0.2);
}

.Karmayogi-section .concept-note-section {
  padding: 16px 0;
  border-bottom: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.Karmayogi-section .concept-note-section:hover {
  background: #f8f9fa;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 6px;
}

.Karmayogi-section .concept-note-section:last-child {
  border-bottom: none;
}

.Karmayogi-section .concept-note-section h5 {
  margin: 0 0 10px 0;
  font-weight: 700;
  color: #00569A;
  border-left: 4px solid #EC8C25;
  padding-left: 12px;
  font-size: 1.1rem;
}

.Karmayogi-section .concept-note-body p {
  font-size: 1.1rem;
  /* Increased from 0.95rem for better readability */
  line-height: 1.7;
  color: #333;
  margin-bottom: 12px;
  text-align: justify;
}

.Karmayogi-section .concept-note-body ul {
  margin-bottom: 16px;
  padding-left: 24px;
}

.Karmayogi-section .concept-note-body li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 8px;
  position: relative;
}

.Karmayogi-section .concept-note-body li::marker {
  color: #EC8C25;
  font-weight: 700;
}

.Karmayogi-section .concept-note-body strong {
  color: #00569A;
  font-weight: 700;
}

/* ============================================
   ENHANCED SECTIONS STYLES
   ============================================ */

/* Enhanced Full Concept Note Section */
.Karmayogi-section .concept-note-card-enhanced {
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.Karmayogi-section .concept-note-header-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f4ff;
}

.Karmayogi-section .concept-note-title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 1;
}

.Karmayogi-section .concept-note-icon-wrapper {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.Karmayogi-section .concept-note-icon-wrapper i {
  font-size: 1.75rem;
  color: #ffffff;
}

.Karmayogi-section .concept-note-main-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #00569A;
  margin-bottom: 8px;
}

.Karmayogi-section .concept-note-subtitle {
  font-size: 0.95rem;
  color: #6c757d;
  line-height: 1.6;
}

.Karmayogi-section .concept-download-btn-enhanced {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 86, 154, 0.2);
}

.Karmayogi-section .concept-download-btn-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 86, 154, 0.3);
  color: #ffffff;
}

.Karmayogi-section .concept-note-toc-enhanced {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 12px;
  padding: 20px;
  border-left: 4px solid #00569A;
}

.Karmayogi-section .toc-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #00569A;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.Karmayogi-section .toc-pills-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.Karmayogi-section .toc-pill-enhanced {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #ffffff;
  border: 2px solid #00569A;
  color: #00569A;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.Karmayogi-section .toc-pill-enhanced:hover {
  background: #00569A;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 86, 154, 0.3);
}

.Karmayogi-section .concept-note-body-enhanced {
  margin-top: 30px;
}

.Karmayogi-section .concept-note-section-enhanced {
  padding: 25px;
  margin-bottom: 25px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.Karmayogi-section .concept-note-section-enhanced:hover {
  box-shadow: 0 6px 20px rgba(0, 86, 154, 0.1);
  border-color: #00569A;
}

.Karmayogi-section .section-icon-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.Karmayogi-section .section-icon-wrapper {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0ecff 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.Karmayogi-section .section-icon-wrapper i {
  font-size: 1.3rem;
  color: #00569A;
}

.Karmayogi-section .concept-note-section-enhanced h5 {
  margin: 0;
  font-weight: 700;
  color: #00569A;
  font-size: 1.25rem;
  border-left: none;
  padding-left: 0;
}

.Karmayogi-section .section-content-wrapper p {
  font-size: 1.1rem;
  /* Increased from 0.95rem for better readability */
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
  text-align: justify;
}

.Karmayogi-section .benchmarking-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.Karmayogi-section .benchmark-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  color: #00569A;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid #e0ecff;
  transition: all 0.3s ease;
}

.Karmayogi-section .benchmark-badge:hover {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  color: #ffffff;
  border-color: #00569A;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 86, 154, 0.2);
}

.Karmayogi-section .development-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.Karmayogi-section .dev-step-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border-radius: 10px;
  border-left: 4px solid #00569A;
  transition: all 0.3s ease;
}

.Karmayogi-section .dev-step-item:hover {
  box-shadow: 0 4px 15px rgba(0, 86, 154, 0.1);
  transform: translateX(5px);
}

.Karmayogi-section .dev-step-number {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.Karmayogi-section .dev-step-text {
  flex: 1;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.7;
  padding-top: 6px;
}

.Karmayogi-section .principles-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.Karmayogi-section .principle-card-enhanced {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  border: 2px solid #e0ecff;
  transition: all 0.3s ease;
}

.Karmayogi-section .principle-card-enhanced:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 86, 154, 0.15);
  border-color: #00569A;
}

.Karmayogi-section .principle-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 auto 15px;
}

.Karmayogi-section .principle-name-enhanced {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00569A;
  margin-bottom: 8px;
}

.Karmayogi-section .principle-desc-enhanced {
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.6;
}

.Karmayogi-section .gunas-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.Karmayogi-section .guna-card-enhanced {
  background: linear-gradient(135deg, #ffffff 0%, #fff5e6 100%);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  border: 2px solid #ffe0b2;
  transition: all 0.3s ease;
}

.Karmayogi-section .guna-card-enhanced:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(236, 140, 37, 0.15);
  border-color: #EC8C25;
}

.Karmayogi-section .guna-card-enhanced i {
  font-size: 2.5rem;
  color: #EC8C25;
  margin-bottom: 15px;
}

.Karmayogi-section .guna-name-enhanced {
  font-size: 1.1rem;
  font-weight: 700;
  color: #EC8C25;
  margin-bottom: 8px;
}

.Karmayogi-section .guna-desc-enhanced {
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.6;
}

.Karmayogi-section .framework-domain-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 12px;
  padding: 25px;
  border: 2px solid #e0ecff;
  transition: all 0.3s ease;
  height: 100%;
}

.Karmayogi-section .framework-domain-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 86, 154, 0.15);
  border-color: #00569A;
}

.Karmayogi-section .domain-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.Karmayogi-section .domain-header i {
  font-size: 2.5rem;
  color: #00569A;
}

.Karmayogi-section .domain-count {
  font-size: 2rem;
  font-weight: 700;
  color: #00569A;
  line-height: 1;
}

.Karmayogi-section .domain-title-enhanced {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00569A;
  margin-top: 5px;
}

.Karmayogi-section .domain-subtitle-enhanced {
  font-size: 0.9rem;
  color: #EC8C25;
  font-weight: 600;
  margin-bottom: 12px;
}

.Karmayogi-section .domain-examples-enhanced {
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.7;
}

.Karmayogi-section .alignment-objectives {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.Karmayogi-section .alignment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
  border-radius: 8px;
  border-left: 4px solid #00569A;
  transition: all 0.3s ease;
}

.Karmayogi-section .alignment-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 86, 154, 0.1);
}

.Karmayogi-section .alignment-item i {
  color: #00569A;
  font-size: 1.2rem;
}

.Karmayogi-section .alignment-item span {
  font-size: 0.95rem;
  color: #333;
  font-weight: 500;
}

.Karmayogi-section .transform-shifts {
  margin-top: 20px;
}

.Karmayogi-section .shift-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border-radius: 10px;
}

.Karmayogi-section .shift-from,
.Karmayogi-section .shift-to {
  font-weight: 700;
  color: #00569A;
  font-size: 0.9rem;
}

.Karmayogi-section .shift-arrow {
  flex: 1;
  text-align: center;
}

.Karmayogi-section .shift-arrow i {
  font-size: 1.5rem;
  color: #EC8C25;
}

.Karmayogi-section .shift-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 8px;
  border: 2px solid #e0ecff;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.Karmayogi-section .shift-detail:hover {
  border-color: #00569A;
  box-shadow: 0 4px 12px rgba(0, 86, 154, 0.1);
}

.Karmayogi-section .shift-label {
  font-size: 0.95rem;
  color: #333;
  font-weight: 500;
}

.Karmayogi-section .significance-highlight-box {
  background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%);
  border-left: 4px solid #EC8C25;
  border-radius: 10px;
  padding: 25px;
  position: relative;
}

.Karmayogi-section .significance-highlight-box i {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 2rem;
  color: #EC8C25;
  opacity: 0.2;
}

.Karmayogi-section .significance-highlight-box p {
  padding-left: 30px;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

/* Simple Professional Chronology Section */
.Karmayogi-section .chronology-card-simple {
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  border-radius: 12px;
}

.Karmayogi-section .chronology-header-simple {
  margin-bottom: 30px;
  /* padding-bottom: 20px; */
}

.Karmayogi-section .chronology-title-simple {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.Karmayogi-section .chronology-subtitle-simple {
  font-size: 0.95rem;
  color: #6c757d;
  line-height: 1.6;
}

.Karmayogi-section .chronology-timeline-simple {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  margin-top: 20px;
}

.Karmayogi-section .chronology-item-simple {
  display: flex;
  align-items: center;
  gap: 20px;
}

.Karmayogi-section .chronology-number-simple {
  width: 48px;
  height: 48px;
  background: #1e88e5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.3);
}

.Karmayogi-section .chronology-card-simple-item {
  flex: 1;
  background: #ffffff;
  border-radius: 8px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.Karmayogi-section .chronology-card-simple-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  border-color: #00569A;
}

.Karmayogi-section .chronology-event-title-simple {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  line-height: 1.4;
}

.Karmayogi-section .chronology-event-date-simple {
  font-size: 0.9rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  line-height: 1.5;
}

.Karmayogi-section .chronology-event-date-simple i {
  color: #9e9e9e;
  font-size: 0.85rem;
}

/* Enhanced Key Milestones Section */
.Karmayogi-section .milestones-card-enhanced {
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.Karmayogi-section .milestones-header-enhanced {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.Karmayogi-section .milestones-main-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #00569A;
  margin-bottom: 8px;
}

.Karmayogi-section .milestones-subtitle {
  font-size: 0.95rem;
  color: #6c757d;
  line-height: 1.6;
}

.Karmayogi-section .milestone-stat-card-enhanced {
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border-radius: 16px;
  padding: 35px 25px;
  text-align: center;
  border: 2px solid #e9ecef;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.Karmayogi-section .milestone-stat-card-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 86, 154, 0.02) 0%, rgba(236, 140, 37, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.Karmayogi-section .milestone-stat-card-enhanced:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 86, 154, 0.25);
  border-color: #00569A;
}

.Karmayogi-section .milestone-stat-card-enhanced:hover::before {
  opacity: 1;
}

.Karmayogi-section .milestone-card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 16px 16px 0 0;
  z-index: 1;
}

.Karmayogi-section .milestone-gradient-1 {
  background: linear-gradient(90deg, #00569A 0%, #0063ae 100%);
}

.Karmayogi-section .milestone-gradient-2 {
  background: linear-gradient(90deg, #EC8C25 0%, #ff9800 100%);
}

.Karmayogi-section .milestone-gradient-3 {
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.Karmayogi-section .milestone-gradient-4 {
  background: linear-gradient(90deg, #6f42c1 0%, #8e44ad 100%);
}

.Karmayogi-section .milestone-icon-wrapper-enhanced {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
}

.Karmayogi-section .milestone-icon-1 {
  background: linear-gradient(135deg, #e0f2f7 0%, #c5e5f0 100%);
  box-shadow: 0 4px 15px rgba(0, 86, 154, 0.15);
}

.Karmayogi-section .milestone-icon-2 {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe0b2 100%);
  box-shadow: 0 4px 15px rgba(236, 140, 37, 0.15);
}

.Karmayogi-section .milestone-icon-3 {
  background: linear-gradient(135deg, #e0f7e0 0%, #c5ecc5 100%);
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.15);
}

.Karmayogi-section .milestone-icon-4 {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  box-shadow: 0 4px 15px rgba(111, 66, 193, 0.15);
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-icon-wrapper-enhanced {
  transform: scale(1.15) rotate(5deg);
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-icon-1 {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  box-shadow: 0 8px 25px rgba(0, 86, 154, 0.3);
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-icon-2 {
  background: linear-gradient(135deg, #EC8C25 0%, #ff9800 100%);
  box-shadow: 0 8px 25px rgba(236, 140, 37, 0.3);
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-icon-3 {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-icon-4 {
  background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%);
  box-shadow: 0 8px 25px rgba(111, 66, 193, 0.3);
}

.Karmayogi-section .milestone-icon-wrapper-enhanced i {
  font-size: 2.2rem;
  transition: all 0.4s ease;
}

.Karmayogi-section .milestone-icon-1 i {
  color: #00569A;
}

.Karmayogi-section .milestone-icon-2 i {
  color: #EC8C25;
}

.Karmayogi-section .milestone-icon-3 i {
  color: #28a745;
}

.Karmayogi-section .milestone-icon-4 i {
  color: #6f42c1;
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-icon-wrapper-enhanced i {
  color: #ffffff;
  transform: scale(1.1);
}

.Karmayogi-section .milestone-content-wrapper {
  position: relative;
  z-index: 2;
}

.Karmayogi-section .milestone-stat-number-enhanced {
  font-size: 1.85rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-stat-number-enhanced {
  color: #00569A;
}

.Karmayogi-section .milestone-stat-label-enhanced {
  font-size: 0.95rem;
  color: #555;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.5;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Karmayogi-section .milestone-stat-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.Karmayogi-section .milestone-badge-success {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  color: #ffffff;
}

.Karmayogi-section .milestone-badge-progress {
  background: linear-gradient(135deg, #EC8C25 0%, #ff9800 100%);
  color: #ffffff;
}

.Karmayogi-section .milestone-stat-card-enhanced:hover .milestone-stat-badge {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Enhanced Impact Metrics Dashboard */
.Karmayogi-section .impact-metrics-card-enhanced {
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.Karmayogi-section .impact-metrics-header-enhanced {
  margin-bottom: 30px;
  /* padding-bottom: 20px; */
}

.Karmayogi-section .impact-metrics-main-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #00569A;
  margin-bottom: 0px;
}

.Karmayogi-section .impact-metrics-subtitle {
  font-size: 0.95rem;
  color: #6c757d;
  line-height: 1.6;
}

.Karmayogi-section .impact-metrics-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prevent double scrollbars inside impact-metrics-table-wrapper */
.Karmayogi-section .impact-metrics-table-wrapper .table-responsive {
  overflow-x: visible;
}

/* Scrollbar styling for impact-metrics-table-wrapper on mobile - almost transparent */
@media (max-width: 768px) {
  .Karmayogi-section .impact-metrics-table-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .Karmayogi-section .impact-metrics-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
  }

  .Karmayogi-section .impact-metrics-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }

  .Karmayogi-section .impact-metrics-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }
}

.Karmayogi-section .impact-metrics-table-enhanced,
.Karmayogi-section .table.impact-metrics-table-enhanced {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e0e0;
}

.Karmayogi-section .mou-status-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
}

.Karmayogi-section .table.impact-metrics-table-enhanced thead {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%) !important;
}

.Karmayogi-section .impact-metrics-table-enhanced thead {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%) !important;
}

.Karmayogi-section .impact-metrics-table-enhanced thead th,
.Karmayogi-section .table.impact-metrics-table-enhanced thead th {
  padding: 20px 24px !important;
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border: none !important;
  white-space: nowrap !important;
  position: relative !important;
  background: transparent !important;
}

.Karmayogi-section .impact-metrics-table-enhanced thead th:not(:last-child)::after,
.Karmayogi-section .table.impact-metrics-table-enhanced thead th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.Karmayogi-section .impact-metrics-table-enhanced thead th:first-child {
  border-top-left-radius: 10px;
}

.Karmayogi-section .impact-metrics-table-enhanced thead th:last-child {
  border-top-right-radius: 10px;
}

.Karmayogi-section .impact-metrics-table-enhanced tbody tr {
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  /* Background will be set by nth-child rules below */
}

/* Alternating row colors for impact-metrics-table-enhanced */
.Karmayogi-section .impact-metrics-table-enhanced tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

.Karmayogi-section .impact-metrics-table-enhanced tbody tr:nth-child(even) {
  background: #f8f9fa !important;
}

.Karmayogi-section .impact-metrics-table-enhanced tbody tr:last-child {
  border-bottom: none;
}

.Karmayogi-section .impact-metrics-table-enhanced tbody tr:hover {
  background: #f8f9ff;
  box-shadow: inset 0 0 0 1px rgba(0, 86, 154, 0.1);
}

.Karmayogi-section .impact-metrics-table-enhanced tbody td {
  padding: 20px 24px;
  vertical-align: middle;
  font-size: 0.95rem;
  color: #333;
  border: none;
  line-height: 1.6;
}

.Karmayogi-section .impact-metrics-table-enhanced tbody td:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.Karmayogi-section .impact-metrics-table-enhanced tbody td strong {
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.95rem;
}

.Karmayogi-section .achieved-value {
  color: #00569A !important;
  font-weight: 600;
  font-size: 0.95rem;
}

.Karmayogi-section .progress-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 140px;
}

.Karmayogi-section .progress-bar-wrapper-table {
  width: 100%;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.Karmayogi-section .progress-bar-fill-table {
  height: 100%;
  background: linear-gradient(90deg, #00569A 0%, #0063ae 100%);
  border-radius: 6px;
  transition: width 0.6s ease;
  box-shadow: 0 1px 3px rgba(0, 86, 154, 0.3);
}

.Karmayogi-section .progress-bar-fill-table.progress-partial {
  background: linear-gradient(90deg, #EC8C25 0%, #ff9800 100%);
  box-shadow: 0 1px 3px rgba(236, 140, 37, 0.3);
}

.Karmayogi-section .progress-text-table {
  font-size: 0.9rem;
  font-weight: 700;
  color: #00569A;
  margin-top: 2px;
}

.Karmayogi-section .remarks-cell {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.7;
  font-weight: 400;
}

/* Table Column Widths */
.Karmayogi-section .col-outcome {
  width: 28%;
  min-width: 220px;
}

.Karmayogi-section .col-target {
  width: 18%;
  min-width: 140px;
}

.Karmayogi-section .col-achieved {
  width: 15%;
  min-width: 130px;
}

.Karmayogi-section .col-progress {
  width: 20%;
  min-width: 160px;
}

.Karmayogi-section .col-remarks {
  width: 19%;
  min-width: 220px;
}

/* Responsive Styles for Enhanced Sections */
@media (max-width: 768px) {

  .Karmayogi-section .concept-note-header-enhanced,
  .Karmayogi-section .chronology-header-enhanced,
  .Karmayogi-section .milestones-header-enhanced,
  .Karmayogi-section .impact-metrics-header-enhanced {
    flex-direction: column;
  }

  .Karmayogi-section .milestone-stat-card-enhanced {
    padding: 25px 20px;
    margin-bottom: 20px;
  }

  .Karmayogi-section .milestone-icon-wrapper-enhanced {
    width: 75px;
    height: 75px;
    margin-bottom: 20px;
  }

  .Karmayogi-section .milestone-icon-wrapper-enhanced i {
    font-size: 1.8rem;
  }

  .Karmayogi-section .milestone-stat-number-enhanced {
    font-size: 1.6rem;
  }

  .Karmayogi-section .milestone-stat-label-enhanced {
    font-size: 0.9rem;
    min-height: auto;
    margin-bottom: 15px;
  }

  .Karmayogi-section .milestone-stat-badge {
    padding: 6px 14px;
    font-size: 0.8rem;
  }

  .Karmayogi-section .concept-download-btn-enhanced {
    width: 100%;
    margin-top: 15px;
  }

  .Karmayogi-section .timeline-wrapper-enhanced {
    padding-left: 40px;
  }

  .Karmayogi-section .timeline-event-description {
    padding-left: 0;
  }

  .Karmayogi-section .principles-grid-enhanced,
  .Karmayogi-section .gunas-grid-enhanced {
    grid-template-columns: 1fr;
  }

  .Karmayogi-section .impact-metrics-table-enhanced {
    font-size: 0.85rem;
  }

  .Karmayogi-section .impact-metrics-table-enhanced thead th {
    padding: 16px 12px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
  }

  .Karmayogi-section .impact-metrics-table-enhanced tbody td {
    padding: 16px 12px;
  }

  .Karmayogi-section .impact-metrics-table-enhanced tbody td:not(:last-child) {
    border-right: none;
  }

  .Karmayogi-section .progress-cell {
    min-width: 100px;
  }

  .Karmayogi-section .progress-bar-wrapper-table {
    height: 10px;
  }

  .Karmayogi-section .chronology-item-simple {
    gap: 15px;
  }

  .Karmayogi-section .chronology-number-simple {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .Karmayogi-section .chronology-card-simple-item {
    padding: 16px 20px;
  }

  .Karmayogi-section .chronology-event-title-simple {
    font-size: 1rem;
  }

  .Karmayogi-section .chronology-event-date-simple {
    font-size: 0.85rem;
  }
}

/* Way Forward Section */
.Karmayogi-section .way-forward-section {
  background: #00569A;
  border-radius: 8px;
  padding: 40px;
  color: #ffffff;
  border: none;
}

.Karmayogi-section .way-forward-content {
  padding-right: 30px;
}

.Karmayogi-section .way-forward-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}

.Karmayogi-section .way-forward-text {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0;
  text-align: justify;
}

.Karmayogi-section .next-steps-box {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.Karmayogi-section .next-steps-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}

.Karmayogi-section .next-steps-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.Karmayogi-section .next-step-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.Karmayogi-section .next-step-number {
  width: 35px;
  height: 35px;
  background: #00569A;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  border: none;
}

.Karmayogi-section .next-step-text {
  flex: 1;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.6;
  padding-top: 6px;
}

@media (max-width: 768px) {
  .Karmayogi-section .content-section {
    padding: 25px;
  }

  .Karmayogi-section .timeline-wrapper .timeline-item {
    flex-direction: column;
    gap: 8px;
  }

  .Karmayogi-section .timeline-date {
    min-width: auto;
    font-size: 14px;
  }

  .Karmayogi-section .milestone-card {
    flex-direction: column;
    gap: 8px;
  }

  .Karmayogi-section .objective-card {
    padding: 20px;
  }

  .Karmayogi-section .objective-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .Karmayogi-section .objective-icon-wrapper i {
    font-size: 1.5rem;
  }

  .Karmayogi-section .objective-title {
    font-size: 1.1rem;
  }

  .Karmayogi-section .metrics-table-header,
  .Karmayogi-section .metrics-table-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .Karmayogi-section .metrics-table-header>div:not(:first-child),
  .Karmayogi-section .metrics-table-row>div:not(:first-child) {
    padding-left: 10px;
  }

  .Karmayogi-section .way-forward-section {
    padding: 25px;
  }

  .Karmayogi-section .way-forward-content {
    padding-right: 0;
    margin-bottom: 25px;
  }

  .Karmayogi-section .way-forward-title {
    font-size: 1.5rem;
  }

  .Karmayogi-section .timeline-wrapper {
    padding-left: 40px;
  }

  .Karmayogi-section .timeline-wrapper::before {
    left: 30px;
  }

  .Karmayogi-section .timeline-item-enhanced {
    flex-direction: column;
    gap: 15px;
    padding-left: 0;
  }

  .Karmayogi-section .timeline-number-badge {
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 10px;
  }

  .Karmayogi-section .timeline-content-enhanced {
    margin-left: 0;
    padding: 15px;
  }

  .Karmayogi-section .principles-grid {
    grid-template-columns: 1fr;
  }

  .Karmayogi-section .concept-overview-quote {
    padding: 20px;
  }

  .Karmayogi-section .quote-text {
    padding-left: 0;
    font-size: 0.95rem;
  }

  .Karmayogi-section .quote-icon {
    display: none;
  }

  .Karmayogi-section .competency-domain-card {
    margin-bottom: 15px;
  }

  .Karmayogi-section .domain-number {
    font-size: 2rem;
  }

  .Karmayogi-section .concept-note-header {
    flex-direction: column;
    align-items: stretch;
  }

  .Karmayogi-section .concept-download-btn {
    width: 100%;
  }
}

/* Reduce spacing for professional look */
.Karmayogi-section .content-section h5,
.Karmayogi-section .card h5 {
  margin-top: 12px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #1b1f23;
  font-size: 1.1rem;
}

.Karmayogi-section .content-section h6,
.Karmayogi-section .card h6 {
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #1b1f23;
  font-size: 1rem;
}

.Karmayogi-section .content-section ul,
.Karmayogi-section .card ul {
  margin-bottom: 16px;
  padding-left: 20px;
}

.Karmayogi-section .content-section ul li,
.Karmayogi-section .card ul li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* Vision Section Styles */
.vision-icon-wrapper {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.2);
  margin: 0 auto;
}

.vision-icon {
  font-size: 2rem;
  color: #ffffff;
}

.section-heading-primary {
  font-weight: 700;
  color: #0d6efd;
  margin-bottom: 10px;
  font-size: 1.5rem;
}

.lead-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 0;
}

.vision-highlight-box {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 12px;
  padding: 15px;
  margin-top: 15px;
  border-left: 4px solid #0d6efd;
}

/* Vision Pointers */
.vision-pointers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.vision-pointer-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #f8f9ff;
  border-radius: 8px;
  border-left: 3px solid #0d6efd;
  transition: all 0.3s ease;
}

.vision-pointer-item:hover {
  background: #f0f4ff;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
}

.vision-pointer-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d6efd;
  font-size: 1.2rem;
  margin-top: 2px;
}

.vision-pointer-content {
  flex: 1;
}

.vision-pointer-content p {
  margin: 0;
  line-height: 1.6;
  color: #333;
  font-size: 0.95rem;
}

/* Objectives Tab Interface */
.objectives-main-title {
  font-weight: 700;
  font-size: 1.75rem;
  color: #1b1f23;
  margin-bottom: 20px;
}

.objectives-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid #e9ecef;
}

.objective-tab {
  background: #f8f9fa;
  border: none;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
  margin-right: 4px;
}

.objective-tab:hover {
  background: #e9ecef;
  color: #495057;
}

.objective-tab.active {
  background: #ffffff;
  color: #1b1f23;
  font-weight: 600;
  border-bottom: 2px solid #ffffff;
  margin-bottom: -2px;
}

.objective-tab-content {
  background: #ffffff;
  border-radius: 0 8px 8px 8px;
  padding: 0;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.objective-content-box {
  background: #ffffff;
  border-left: 4px solid #0d6efd;
  border-radius: 8px;
  padding: 20px;
  margin-top: 0;
}

.objective-content-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.objective-content-header i {
  font-size: 1.5rem;
}

.objective-content-header h5 {
  margin: 0;
  font-weight: 600;
  color: #0d6efd;
  font-size: 1.1rem;
}

/* Enhanced Objective Cards */
.Karmayogi-section .objective-card {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  padding: 25px;
  border: 1px solid #e9ecef;
  border-left: 4px solid #00569A;
  transition: border-color 0.2s ease;
  height: 100%;
}

.Karmayogi-section .objective-card:hover {
  border-left-color: #EC8C25;
}

.Karmayogi-section .objective-card-short {
  border-left-color: #00569A;
}

.Karmayogi-section .objective-card-short:hover {
  border-left-color: #EC8C25;
}

.Karmayogi-section .objective-card-long {
  border-left-color: #00569A;
}

.Karmayogi-section .objective-card-long:hover {
  border-left-color: #EC8C25;
}

.Karmayogi-section .objective-icon-wrapper {
  width: 70px;
  height: 70px;
  background: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  border: none;
}

.Karmayogi-section .objective-card-short .objective-icon-wrapper {
  background: #f0f7ff;
}

.Karmayogi-section .objective-card-long .objective-icon-wrapper {
  background: #f0f7ff;
}

.Karmayogi-section .objective-icon-wrapper i {
  font-size: 2rem;
  color: #00569A;
}

.Karmayogi-section .objective-card-content {
  flex: 1;
}

.Karmayogi-section .objective-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #f0f7ff;
  color: #00569A;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* margin-bottom: 12px; */
}

.Karmayogi-section .objective-card-short .objective-badge {
  background: #f0f7ff;
  color: #00569A;
}

.Karmayogi-section .objective-card-long .objective-badge {
  background: #f0f7ff;
  color: #00569A;
}

.Karmayogi-section .objective-title {
  font-weight: 700;
  font-size: 1.25rem;
  color: #1b1f23;
  margin-bottom: 15px;
  margin-top: 0;
}

.Karmayogi-section .objective-description {
  color: #495057;
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 15px;
  text-align: justify;
}

.objective-content-box p {
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
  text-align: justify;
}

/* Feature Boxes */
.feature-box {
  text-align: center;
  padding: 15px;
  background: #f8f9ff;
  border-radius: 10px;
  transition: all 0.3s ease;
  height: 100%;
}

.feature-box:hover {
  background: #f0f4ff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.1);
}

.feature-icon {
  font-size: 2rem;
  color: #0d6efd;
  margin-bottom: 10px;
  display: block;
}

.feature-box h6 {
  font-weight: 600;
  color: #1b1f23;
  margin-bottom: 8px;
}

/* Focus Area List */
.focus-area-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.focus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #f8f9ff;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.focus-item:hover {
  background: #f0f4ff;
  transform: translateX(5px);
}

.focus-item i {
  font-size: 1.2rem;
}

/* Component Cards */
.component-card {
  text-align: center;
  padding: 20px 15px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 12px;
  border: 2px solid #f0f4ff;
  transition: all 0.3s ease;
  height: 100%;
}

.component-card:hover {
  border-color: #0d6efd;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.15);
}

.component-icon-wrapper {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 1.75rem;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.2);
}

.component-card h5 {
  font-weight: 600;
  color: #1b1f23;
  margin-bottom: 12px;
}

/* Achievement Items */
.achievement-item {
  text-align: center;
  padding: 15px;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 12px;
  border-left: 4px solid #0d6efd;
}

.achievement-number {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 5px;
}

.achievement-label {
  font-size: 0.95rem;
  color: #6c757d;
  font-weight: 500;
}

.impact-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
}

/* Benefit Items */
.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f8f9ff;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  background: #f0f4ff;
  transform: translateX(5px);
}

.benefit-item i {
  font-size: 1.5rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.benefit-item strong {
  display: block;
  color: #1b1f23;
  margin-bottom: 5px;
}

/* Implementation Steps */
.implementation-step {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 12px;
  border-left: 4px solid #0d6efd;
  transition: all 0.3s ease;
  height: 100%;
}

.implementation-step:hover {
  border-left-width: 6px;
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.1);
}

.step-number {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}

.step-content h6 {
  font-weight: 600;
  color: #1b1f23;
  margin-bottom: 8px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .vision-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }

  .vision-icon {
    font-size: 2rem;
  }

  .section-heading-primary {
    font-size: 1.5rem;
    text-align: center;
  }

  .achievement-number {
    font-size: 2.5rem;
  }

  .component-icon-wrapper {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .step-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* KCM Badge */
.badge-kcm {
  background: linear-gradient(90deg, #0d6efd, #6610f2);
  color: white;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.08);
}

/* Card with glass effect */
.lead-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 18px;
}

/* Section title */
.section-title {
  display: flex;
  gap: 12px;
  align-items: center;
  /* margin-bottom: 14px; */
}

.section-title h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

/* Muted text */
.muted {
  color: #6c757d;
}

/* Timeline */
.timeline {
  position: relative;
}

.timeline-item {
  position: relative;
  margin-left: 56px;
  margin-bottom: 22px;
  padding: 12px 18px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.04);
}

.timeline-bullet {
  position: absolute;
  left: -34px;
  top: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.08);
  background: linear-gradient(90deg, #0d6efd, #6610f2);
}

/* Competency pill */
.competency-pill {
  border-radius: 50px;
  padding: 6px 12px;
  display: inline-block;
  margin: 6px 8px 6px 0;
  background: #f1f5ff;
  color: #0d47a1;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.03);
}

/* Card glow */
.card-glow {
  border-radius: 12px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 250, 255, 0.6));
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.06);
}

/* Responsive timeline */
@media (max-width: 767px) {
  .timeline::before {
    left: 12px;
  }

  .timeline-item {
    margin-left: 48px;
  }

  .timeline-bullet {
    left: -28px;
  }
}

/*----------------------------------------------------------- aboutus mission -----------------------------------*/
.mission-karmayogi-section,
.mission-karmayogi-section-alt {
  /* background: #f9fafc; */
  border-radius: 20px;

  .text-gradient {
    background: linear-gradient(90deg, #6f42c1, #d63384);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .mission-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  .card {
    background: #ffffff;
  }

  .principle-item {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;

    transition: all 0.3s ease;
  }

  .principle-item:hover {
    /* transform: translateY(-3px); */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  }
}

/* ===========================================
   KARMAYOGI FULL-WIDTH REDESIGN STYLES
   =========================================== */

/* Hero Section - Full Width */
.karmayogi-hero-fullwidth {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #003b73 0%, #0077cc 50%, #004b88 100%);
  color: #fff;
  padding: 80px 5%;
  overflow: hidden;
}

.karmayogi-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.karmayogi-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  text-align: left;
}

.karmayogi-hero-tag {
  display: inline-block;
  padding: 12px 28px;
  background: linear-gradient(135deg, #ffa500 0%, #ffb347 50%, #ffc966 100%);
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 25px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.4);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.karmayogi-hero-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 165, 0, 0.5);
  background: linear-gradient(135deg, #ff9900 0%, #ffa500 50%, #ffb84d 100%);
}

.karmayogi-hero-title {
  font-size: 2.8rem;
  font-weight: 900;
  margin-bottom: 25px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.karmayogi-hero-subtitle {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 900px;
  margin: 0;
  opacity: 0.95;
  text-align: justify;
}

/* Breadcrumb - Full Width */
.karmayogi-breadcrumb-fullwidth {
  background: #f8f9fa;
  padding: 15px 0;
  border-bottom: 1px solid #e9ecef;
}

.karmayogi-breadcrumb-fullwidth .breadcrumb {
  margin: 0;
  background: transparent;
  padding: 0;
}

.karmayogi-breadcrumb-fullwidth .breadcrumb-item a {
  color: #0063ae;
  text-decoration: none;
}

.karmayogi-breadcrumb-fullwidth .breadcrumb-item.active {
  color: #6c757d;
}

/* Full Width Sections */
.karmayogi-section-fullwidth {
  width: 100%;
  padding: 50px;
  position: relative;
}

.karmayogi-gallery-section {
  padding: 30px 0 !important;
}

.karmayogi-gallery-section .karmayogi-section-title {
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.karmayogi-vision-section {
  background: linear-gradient(180deg, #ffe3ab 0%, rgba(255, 227, 171, 0.95) 15%, rgba(255, 235, 200, 0.85) 30%, rgba(255, 240, 210, 0.7) 45%, rgba(255, 245, 230, 0.5) 60%, rgba(255, 248, 240, 0.3) 75%, rgba(255, 250, 245, 0.15) 85%, #ffffff 100%);
  position: relative;
}

.karmayogi-objectives-section {
  background: #ffe3ab;
}

.karmayogi-concept-section {
  background: linear-gradient(180deg, #ffe3ab 0%, rgba(255, 227, 171, 0.95) 15%, rgba(255, 235, 200, 0.85) 30%, rgba(255, 240, 210, 0.7) 45%, rgba(255, 245, 230, 0.5) 60%, rgba(255, 248, 240, 0.3) 75%, rgba(255, 250, 245, 0.15) 85%, #ffffff 100%);
  position: relative;
}

.karmayogi-alignment-section {
  background: #f0f6ff;
}

.karmayogi-concept-note-section {
  background: linear-gradient(180deg, #ffe3ab 0%, rgba(255, 227, 171, 0.95) 15%, rgba(255, 235, 200, 0.85) 30%, rgba(255, 240, 210, 0.7) 45%, rgba(255, 245, 230, 0.5) 60%, rgba(255, 248, 240, 0.3) 75%, rgba(255, 250, 245, 0.15) 85%, #ffffff 100%);
  position: relative;
}

.karmayogi-chronology-section {
  background: #ffe3ab;
}

.karmayogi-milestones-section {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.karmayogi-metrics-section {
  background: #f0f6ff;
}

.karmayogi-wayforward-section {
  background: linear-gradient(135deg, #003b73 0%, #0077cc 100%);
  color: #fff;
}

/* Section Titles */
.karmayogi-section-title {
  font-size: 1.8rem;
  font-weight: 600;
  /* margin-bottom: 15px; */
  color: #002b5b;
  text-align: center;
}

.karmayogi-section-subtitle {
  font-size: 1.1rem;
  color: #6c757d;
  text-align: center;
  margin-bottom: 40px;
}

.karmayogi-content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.karmayogi-content-wrapper p {
  font-size: 1rem;
  /* Increased for better readability */
  line-height: 1.5;
  color: #333;
  margin-bottom: 1.25rem;
}

.karmayogi-text-large {
  font-size: 1rem;
  line-height: 1.8;
  color: #2d3748;
  margin-bottom: 20px;
  text-align: justify;
}

/* Objectives Blocks */
.karmayogi-objective-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-radius: 20px;
  padding: 35px;
  height: 100%;
  box-shadow: 0 10px 40px rgba(0, 99, 174, 0.15);
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
}

.karmayogi-objective-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(0, 99, 174, 0.2);
}

.karmayogi-objective-badge {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, #0099ff 0%, #007acc 100%);
  color: #fff;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.karmayogi-objective-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 20px;
}

.karmayogi-objective-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #2d3748;
  margin-bottom: 15px;
  text-align: justify;
}

/* Concept Note Styles */
.karmayogi-quote-block {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-left: 5px solid #0063ae;
  border-radius: 12px;
  padding: 35px;
  margin: 30px 0;
  position: relative;
}

.karmayogi-quote-icon {
  position: absolute;
  top: 20px;
  left: 25px;
  font-size: 3rem;
  color: #0063ae;
  opacity: 0.3;
}

.karmayogi-quote-text {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #1b1f23;
  font-style: italic;
  margin: 0;
  padding-left: 20px;
  text-align: justify;
}

.karmayogi-feature-block {
  background: #ffffff;
  border-radius: 15px;
  padding: 30px;
  /* margin: 5px 0; */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.karmayogi-feature-block:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.karmayogi-feature-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.karmayogi-feature-header i {
  font-size: 1.8rem;
  color: #0063ae;
}

.karmayogi-feature-header h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0;
}

.karmayogi-feature-desc {
  font-size: 1.1rem;
  /* Increased from 1rem for better readability */
  color: #6c757d;
  margin-bottom: 20px;
  text-align: justify;
}

.karmayogi-badges-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.karmayogi-badge {
  display: inline-block;
  padding: 10px 20px;
  background: #f0f6ff;
  color: #0063ae;
  border-radius: 25px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.karmayogi-badge:hover {
  background: #0063ae;
  color: #fff;
  border-color: #0063ae;
  transform: translateY(-2px);
}

.karmayogi-process-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.karmayogi-process-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.karmayogi-process-item:hover {
  background: #f0f6ff;
  transform: translateX(5px);
}

.karmayogi-process-item i {
  font-size: 1.3rem;
  color: #28a745;
  margin-top: 2px;
  flex-shrink: 0;
}

.karmayogi-process-item span {
  font-size: 1rem;
  color: #2d3748;
  line-height: 1.6;
}

/* Principles */
.karmayogi-principles-block {
  margin: 40px 0;
}

.karmayogi-principles-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 25px;
}

.karmayogi-principles-group {
  margin-bottom: 30px;
}

.karmayogi-principles-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0063ae;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.karmayogi-principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.karmayogi-principle-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.karmayogi-principle-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.15);
  border-color: #0063ae;
}

.karmayogi-principle-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0063ae;
  margin-bottom: 10px;
}

.karmayogi-principle-desc {
  font-size: 0.95rem;
  color: #6c757d;
  line-height: 1.5;
  text-align: justify;
}

/* Framework */
.karmayogi-framework-block {
  margin: 40px 0;
}

.karmayogi-framework-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 15px;
}

.karmayogi-framework-desc {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 30px;
  text-align: justify;
}

.karmayogi-domain-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border-radius: 20px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 99, 174, 0.15);
  transition: all 0.4s ease;
  height: 100%;
  border: 2px solid transparent;
}

.karmayogi-domain-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(0, 99, 174, 0.2);
  border-color: #0063ae;
}

.karmayogi-domain-icon {
  font-size: 3rem;
  color: #0063ae;
  margin-bottom: 20px;
}

.karmayogi-domain-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: #0063ae;
  margin-bottom: 10px;
}

.karmayogi-domain-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 10px;
}

.karmayogi-domain-subtitle {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 20px;
  font-weight: 600;
}

.karmayogi-domain-examples {
  font-size: 0.95rem;
  color: #495057;
  line-height: 1.6;
  text-align: justify;
}

/* Alignment Section */
.karmayogi-alignment-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-radius: 20px;
  padding: 35px;
  height: 100%;
  box-shadow: 0 10px 40px rgba(0, 99, 174, 0.15);
  backdrop-filter: blur(10px);
}

.karmayogi-alignment-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 20px;
}

.karmayogi-alignment-desc {
  font-size: 1.1rem;
  /* Increased from 1rem for better readability */
  color: #6c757d;
  margin-bottom: 25px;
  text-align: justify;
}

.karmayogi-objectives-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.karmayogi-objective-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.karmayogi-objective-list-item:hover {
  background: #f0f6ff;
  transform: translateX(5px);
}

.karmayogi-objective-list-item i {
  font-size: 1.2rem;
  color: #28a745;
  flex-shrink: 0;
}

.karmayogi-objective-list-item span {
  font-size: 1rem;
  color: #2d3748;
}

.karmayogi-transform-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

.karmayogi-transform-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.karmayogi-transform-item:hover {
  background: #f0f6ff;
  transform: translateX(5px);
}

.karmayogi-transform-item i {
  font-size: 1.2rem;
  color: #0063ae;
  flex-shrink: 0;
}

.karmayogi-transform-item span {
  font-size: 1rem;
  color: #2d3748;
}

.karmayogi-significance-box {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #fff9e6 0%, #ffe3ab 100%);
  border-radius: 12px;
  border-left: 4px solid #ffa500;
}

.karmayogi-significance-box i {
  font-size: 1.8rem;
  color: #ffa500;
  flex-shrink: 0;
}

.karmayogi-significance-box strong {
  display: block;
  font-size: 1.1rem;
  color: #002b5b;
  margin-bottom: 8px;
}

.karmayogi-significance-box p {
  font-size: 1.1rem;
  /* Increased from 0.95rem for better readability */
  color: #2d3748;
  margin: 0;
  line-height: 1.6;
}

/* Concept Note Section */
.karmayogi-concept-note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.karmayogi-concept-note-title-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

.karmayogi-concept-note-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
}

.karmayogi-concept-note-title {
  font-size: 2rem;
  font-weight: 800;
  color: #002b5b;
  margin: 0;
}

.karmayogi-concept-note-subtitle {
  font-size: 1rem;
  color: #6c757d;
  margin: 5px 0 0 0;
}

.karmayogi-download-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  color: #fff;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.3);
}

.karmayogi-download-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 99, 174, 0.4);
  color: #fff;
}

/* TOC */
.karmayogi-toc-wrapper {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 40px;
}

.karmayogi-toc-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.karmayogi-toc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.karmayogi-toc-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #ffffff;
  color: #0063ae;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.karmayogi-toc-pill:hover {
  background: #0063ae;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.3);
}

/* Concept Note Body */
.karmayogi-concept-note-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.karmayogi-concept-section-item {
  background: #ffffff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.karmayogi-concept-section-item:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.karmayogi-concept-section-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.karmayogi-concept-section-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
}

.karmayogi-concept-section-header h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0;
}

.karmayogi-concept-section-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #2d3748;
  text-align: justify;
}

.karmayogi-concept-section-content p {
  text-align: justify;
}

.karmayogi-dev-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.karmayogi-dev-step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.karmayogi-dev-step:hover {
  background: #f0f6ff;
  transform: translateX(5px);
}

.karmayogi-dev-step-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.karmayogi-dev-step-text {
  font-size: 1rem;
  color: #2d3748;
  line-height: 1.6;
  text-align: justify;
}

.karmayogi-gunas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.karmayogi-guna-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.karmayogi-guna-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.15);
}

.karmayogi-guna-item i {
  font-size: 2.5rem;
  color: #0063ae;
  margin-bottom: 15px;
}

.karmayogi-guna-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0063ae;
  margin-bottom: 8px;
}

.karmayogi-guna-desc {
  font-size: 0.95rem;
  color: #6c757d;
  line-height: 1.5;
  text-align: justify;
}

.karmayogi-shift-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.karmayogi-shift-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.karmayogi-shift-item:hover {
  background: #f0f6ff;
  transform: translateX(5px);
}

.karmayogi-shift-from {
  font-size: 1rem;
  color: #dc3545;
  font-weight: 600;
}

.karmayogi-shift-item i {
  font-size: 1.5rem;
  color: #0063ae;
}

.karmayogi-shift-to {
  font-size: 1rem;
  color: #28a745;
  font-weight: 600;
}

.karmayogi-significance-quote {
  background: linear-gradient(135deg, #fff9e6 0%, #ffe3ab 100%);
  border-left: 5px solid #ffa500;
  border-radius: 12px;
  padding: 30px;
  position: relative;
}

.karmayogi-significance-quote i {
  position: absolute;
  top: 20px;
  left: 25px;
  font-size: 3rem;
  color: #ffa500;
  opacity: 0.3;
}

.karmayogi-significance-quote p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2d3748;
  margin: 0;
  padding-left: 20px;
  text-align: justify;
}

/* Timeline */
.karmayogi-timeline {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-left: 50px;
}

.karmayogi-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #0063ae 0%, #0099ff 100%);
}

.karmayogi-timeline-item {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  position: relative;
}

.karmayogi-timeline-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  position: absolute;
  left: -25px;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.3);
}

.karmayogi-timeline-content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-radius: 15px;
  padding: 25px;
  flex: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.karmayogi-timeline-content:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateX(5px);
}

.karmayogi-timeline-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 10px;
}

.karmayogi-timeline-date {
  font-size: 1rem;
  color: #0063ae;
  font-weight: 600;
  display: flex;
  align-items: center;
}

/* Milestones */
.karmayogi-milestone-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-radius: 20px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 99, 174, 0.15);
  transition: all 0.4s ease;
  height: 100%;
  backdrop-filter: blur(10px);
}

.karmayogi-milestone-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(0, 99, 174, 0.2);
}

.karmayogi-milestone-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  margin: 0 auto 20px;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.3);
}

.karmayogi-milestone-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 10px;
}

.karmayogi-milestone-label {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 15px;
}

.karmayogi-milestone-badge {
  display: inline-block;
  padding: 8px 18px;
  background: #28a745;
  color: #fff;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 600;
}

.karmayogi-milestone-badge-progress {
  background: #ffa500;
}

/* Metrics Table */
.karmayogi-metrics-table-wrapper {
  background: #ffffff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prevent double scrollbars inside karmayogi-metrics-table-wrapper */
.karmayogi-metrics-table-wrapper .table-responsive {
  overflow-x: visible;
}

/* Scrollbar styling for karmayogi-metrics-table-wrapper on mobile - almost transparent */
@media (max-width: 768px) {
  .karmayogi-metrics-table-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .karmayogi-metrics-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
  }

  .karmayogi-metrics-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }

  .karmayogi-metrics-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }
}

.karmayogi-metrics-table {
  width: 100%;
  border-collapse: collapse;
}

.karmayogi-metrics-table thead {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  color: #fff;
}

.karmayogi-metrics-table th {
  padding: 15px;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
}

.karmayogi-metrics-table td {
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
}

.karmayogi-metrics-table tbody tr:hover {
  background: #f8f9fa;
}

.karmayogi-achieved-value {
  font-weight: 700;
  color: #28a745;
}

.karmayogi-progress-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.karmayogi-progress-bar-wrapper {
  flex: 1;
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
}

.karmayogi-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.karmayogi-progress-partial {
  background: linear-gradient(90deg, #ffa500 0%, #ffc107 100%);
}

.karmayogi-progress-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0063ae;
  min-width: 45px;
}

/* Way Forward */
.karmayogi-wayforward-content {
  padding-right: 30px;
}

.karmayogi-wayforward-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 25px;
}

.karmayogi-wayforward-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  text-align: justify;
}

.karmayogi-nextsteps-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.karmayogi-nextsteps-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 25px;
}

.karmayogi-nextsteps-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.karmayogi-nextstep-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.karmayogi-nextstep-item:hover {
  background: #f0f6ff;
  transform: translateX(5px);
}

.karmayogi-nextstep-number {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.karmayogi-nextstep-text {
  font-size: 1rem;
  color: #2d3748;
  line-height: 1.6;
  padding-top: 5px;
}

/* Responsive Design */
@media (max-width: 992px) {
  .karmayogi-hero-title {
    font-size: 2.2rem;
  }

  .karmayogi-section-title {
    font-size: 1.8rem;
  }

  .karmayogi-concept-note-header {
    flex-direction: column;
    align-items: flex-start;
  }

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

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

@media (max-width: 768px) {
  .karmayogi-hero-fullwidth {
    min-height: 350px;
    padding: 60px 4%;
  }

  .karmayogi-hero-title {
    font-size: 1.8rem;
  }

  .karmayogi-hero-subtitle {
    font-size: 1rem;
  }

  .karmayogi-section-fullwidth {
    padding: 40px 0;
  }

  .karmayogi-section-title {
    font-size: 1.6rem;
  }

  .karmayogi-objective-block {
    padding: 25px;
  }

  .karmayogi-principles-grid {
    grid-template-columns: 1fr;
  }

  .karmayogi-gunas-grid {
    grid-template-columns: 1fr;
  }

  .karmayogi-timeline {
    padding-left: 40px;
  }

  .karmayogi-timeline-number {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    left: -20px;
  }

  .karmayogi-wayforward-content {
    padding-right: 0;
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .karmayogi-hero-title {
    font-size: 1.5rem;
  }

  .karmayogi-section-title {
    font-size: 1.4rem;
  }

  .karmayogi-toc-pills {
    flex-direction: column;
  }

  .karmayogi-toc-pill {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   EVENTS PAGE STYLES
   ============================================ */

.events-page-container {
  min-height: calc(100vh - 180px);
  background: #f8f9fa;
  /* padding-top: 40px; */
  padding-bottom: 60px;
}

.events-page-header {
  text-align: center;
  margin-bottom: 40px;
}

.events-page-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #002b5b;
  margin-bottom: 15px;
}

.events-page-title .title-accent {
  color: #f57c00;
}

.events-page-subtitle {
  font-size: 1.1rem;
  color: #4b5563;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Search Section */
.events-search-section {
  /* background: #fff; */
  /* padding: 25px; */
  border-radius: 12px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
  margin-bottom: 30px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 15px;
  color: #6b7280;
  font-size: 1.1rem;
  z-index: 2;
}

.event-search-input {
  padding-left: 45px;
  padding-right: 45px;
  height: 50px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.event-search-input:focus {
  border-color: #0063ae;
  box-shadow: 0 0 0 3px rgba(0, 99, 174, 0.1);
  outline: none;
}

.search-clear-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 2;
}

.search-clear-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.view-toggle-buttons {
  display: flex;
  gap: 10px;
  height: 50px;
}

.view-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-toggle-btn:hover {
  border-color: #0063ae;
  color: #0063ae;
}

.view-toggle-btn.active {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-color: #0063ae;
  color: #fff;
}

/* Hide custom search field when list view is active */
body.list-view-active .events-search-section .col-md-8:first-of-type,
body.list-view-active .events-search-section .search-input-wrapper {
  display: none !important;
}

/* Show custom search field when calendar view is active */
body.calendar-view-active .events-search-section .col-md-8:first-of-type,
body.calendar-view-active .events-search-section .search-input-wrapper {
  display: block !important;
}

/* Drupal Exposed Form Styling (List View Filter) */
.view-filters {
  margin-bottom: 30px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.view-filters .views-exposed-form {
  max-width: 100%;
}

.views-exposed-form {
  margin: 0;
  padding: 0;
}

.portfolio-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Changed from flex-end to accommodate visible labels */
  gap: 20px;
  background: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  margin-bottom: 30px;
}

.portfolio-exposed-form .form-item {
  margin: 0;
  flex: 1 1 calc(33.333% - 20px);
  /* 3 items per row on desktop */
  min-width: 280px;
  /* Increased width */
  display: flex;
  flex-direction: column;
}

.portfolio-exposed-form .form-item label {
  display: block;
  /* Show labels */
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Universal style for all input types and select */
.portfolio-exposed-form .form-item input[type="text"],
.portfolio-exposed-form .form-item input[type="date"],
.portfolio-exposed-form .form-item input.form-text,
.portfolio-exposed-form .form-item input.form-date,
.portfolio-exposed-form .form-item select,
.portfolio-exposed-form .form-item .form-select {
  width: 100%;
  height: 48px;
  /* Consistent height */
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #374151;
  background: #fdfdfd;
  transition: all 0.2s ease;
  box-sizing: border-box;
  appearance: none;
  /* Modern look for selects */
}

/* Specific styling for select to handle the arrow */
.portfolio-exposed-form .form-item select,
.portfolio-exposed-form .form-item .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
}

.portfolio-exposed-form .form-item input:focus,
.portfolio-exposed-form .form-item select:focus {
  outline: none;
  border-color: #0063ae;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 99, 174, 0.1);
}

.portfolio-exposed-form .form-actions {
  margin: 0;
  padding: 0;
  width: 100%;
  /* Full width to force new line */
  display: flex;
  justify-content: flex-end;
  /* Align to right */
}

/* Adjust button to match heights */
.portfolio-exposed-form .form-actions input[type="submit"],
.portfolio-exposed-form .form-actions .form-submit {
  height: 48px;
  padding: 0 32px;
  background: #0063ae;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 99, 174, 0.15);
  margin-top: 5px;
  /* Reduced since it's on a new line */
}

.portfolio-exposed-form .form-actions input[type="submit"]:hover,
.portfolio-exposed-form .form-actions .form-submit:hover {
  background: #005a9e;
  box-shadow: 0 6px 12px rgba(0, 99, 174, 0.25);
  transform: translateY(-1px);
}

/* Responsive adjustments for filter form */
@media (max-width: 768px) {
  .portfolio-exposed-form {
    padding: 20px;
    gap: 15px;
  }

  .portfolio-exposed-form .form-item {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .portfolio-exposed-form .form-actions {
    width: 100%;
    align-self: flex-start;
  }

  .portfolio-exposed-form .form-actions input[type="submit"] {
    width: 100%;
    margin-top: 10px;
  }
}

/* Calendar View */
.events-calendar-view {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 30px;
  margin-bottom: 30px;
}

.calendar-container {
  max-width: 100%;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e5e7eb;
}

.calendar-nav-btn {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border: none;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.2);
}

.calendar-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 99, 174, 0.3);
}

.calendar-month-year {
  font-size: 1.8rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day-header {
  text-align: center;
  font-weight: 700;
  color: #0063ae;
  padding: 12px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-day {
  min-height: 60px;
  height: 60px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: #fff;
}

.calendar-day:hover {
  border-color: #0063ae;
  background: #f0f6ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 99, 174, 0.15);
}

.calendar-day.empty {
  border: none;
  cursor: default;
  background: transparent;
}

.calendar-day.empty:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  border: none;
}

.calendar-day:not(.has-events):not(.empty) {
  cursor: default;
}

.calendar-day:not(.has-events):not(.empty):hover {
  background: #fff;
  border-color: #e5e7eb;
  transform: none;
  box-shadow: none;
}

.calendar-day.today {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-color: #0063ae;
  color: #fff;
}

.calendar-day.today .day-number {
  color: #fff;
  font-weight: 700;
}

.calendar-day.has-events {
  border-color: #f57c00;
  background: #fff8f0;
}

.calendar-day.has-events .day-number {
  color: #002b5b;
  font-weight: 600;
}

.day-number {
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
  line-height: 1.2;
}

.event-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #f57c00;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(245, 124, 0, 0.3);
}

/* List View */
.events-list-view {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 30px;
  margin-top: 20px;
}

.view-filters+.view-content {
  margin-top: 0;
}

.events-list-container {
  min-height: 400px;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6b7280;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e5e7eb;
  border-top-color: #0063ae;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Grid Layout for Events List */
.events-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .events-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Redesigned Event Card */
.event-list-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  height: 100%;
  cursor: default;
  /* Handle clicks via buttons/links */
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
}

.event-list-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.15);
  border-color: #0063ae;
}

.event-list-image {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  border-radius: 0;
  overflow: hidden;
}

.event-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.event-list-card:hover .event-list-image img {
  transform: scale(1.05);
}

.event-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  min-height: 0;
  overflow: hidden;
}

.event-list-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0063ae;
  /* Blue title as per image */
  margin-bottom: 15px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-list-title a {
  color: #0063ae;
  text-decoration: none;
  transition: color 0.2s ease;
}

.event-list-title a:hover {
  color: #004b88;
  text-decoration: underline;
}

.event-list-description {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 0 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.6em * 4);
  word-wrap: break-word;
  position: relative;
  height: auto;
}

.event-list-description *,
.event-list-description p,
.event-list-description div,
.event-list-description span {
  margin: 0;
  display: inline;
  max-width: 100%;
  line-height: inherit;
}

.event-list-description p {
  margin-bottom: 0;
  color: #555;
  display: inline;
}

.event-list-description p:not(:last-child)::after {
  content: ' ';
  white-space: normal;
}

.event-list-description br {
  display: none;
}

.event-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.event-list-date {
  color: #f57c00;
  /* Orange date */
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0;
}

.event-list-read-more {
  background: transparent;
  color: #0063ae;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.event-list-read-more:hover {
  color: #004b88;
  box-shadow: none;
  transform: none;
}

.event-list-read-more a {
  color: #0063ae;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.event-list-read-more a:hover {
  color: #004b88;
}

/* Pagination Styles */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: 50%;
  color: #555;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover {
  border-color: #0063ae;
  color: #0063ae;
  background: #f0f8ff;
}

.pagination-btn.active {
  background: #f57c00;
  /* Orange active state */
  color: #fff;
  border-color: #f57c00;
}

.pagination-btn.wide-btn {
  width: auto;
  padding: 0 15px;
  border-radius: 20px;
}

.no-events-message {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.no-events-message i {
  font-size: 4rem;
  color: #d1d5db;
  margin-bottom: 20px;
}

.no-events-message p {
  font-size: 1.1rem;
  margin: 0;
}

/* Event Modal */
.event-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.event-modal.active {
  display: flex !important;
  z-index: 99999 !important;
}

.event-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.event-modal-content {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 100000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.event-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 100001;
  transition: all 0.3s ease;
}

.event-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: rotate(90deg);
}

.event-modal-body {
  padding: 30px;
}

.event-modal-image {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
}

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

.event-modal-info {
  padding: 0 10px;
}

.event-modal-date {
  color: #f57c00;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-modal-venue {
  color: #0063ae;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 20px;
  line-height: 1.4;
}

.event-modal-description {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.7;
}

.event-modal-description p {
  margin: 0;
}

.day-events-header {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e5e7eb;
}

.day-events-count {
  color: #6b7280;
  font-size: 0.95rem;
  margin-top: 8px;
  margin-bottom: 0;
}

.day-events-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.day-event-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
}

.day-event-item:hover {
  border-color: #0063ae;
  background: #f0f6ff;
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.1);
  transform: translateY(-2px);
}

.day-event-image {
  flex-shrink: 0;
  width: 150px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

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

.day-event-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.day-event-date {
  color: #f57c00;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-event-venue {
  color: #0063ae;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-event-title {
  font-size: 1.3rem;
  color: #002b5b;
  margin-bottom: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.day-event-description {
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  flex: 1;
}

.day-event-view-btn {
  align-self: flex-start;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.day-event-view-btn:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .events-page-title {
    font-size: 2rem;
  }

  .events-search-section .row {
    flex-direction: column;
  }

  .view-toggle-buttons {
    width: 100%;
  }

  .calendar-grid {
    gap: 4px;
  }

  .calendar-day {
    min-height: 50px;
    height: 50px;
    padding: 3px;
  }

  .day-number {
    font-size: 0.8rem;
  }

  .event-indicator {
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
    top: 2px;
    right: 2px;
  }

  .day-event-item {
    flex-direction: column;
  }

  .day-event-image {
    width: 100%;
    height: 180px;
  }

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

  .event-list-image {
    width: 100%;
    height: 200px;
  }

  .event-modal-content {
    width: 95%;
    max-height: 95vh;
  }

  .event-modal-image {
    height: 200px;
  }

  .event-modal-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .events-page-title {
    font-size: 1.6rem;
  }

  .events-page-subtitle {
    font-size: 1rem;
  }

  .calendar-month-year {
    font-size: 1.3rem;
  }

  .calendar-nav-btn {
    width: 38px;
    height: 38px;
  }

  .calendar-day-header {
    padding: 8px 4px;
    font-size: 0.75rem;
  }

  .event-list-card {
    padding: 15px;
  }

  .event-list-title {
    font-size: 1.1rem;
  }
}

/* ============================================
   CONTACT PAGE - ENHANCED DESIGN
   ============================================ */

.contact-page-wrapper {
  background: #ffffff;
  font-family: 'Nunito', sans-serif;
  width: 100%;
  overflow-x: hidden;
}

/* ===========================================
   UNIFIED PAGE HERO SECTION (For all inner pages)
   Single CSS for all page headers
   =========================================== */

.page-hero-section,
.contact-hero-section {
  position: relative;
  background: linear-gradient(135deg, #0063ae 0%, #004b88 50%, #ffa500 100%);
  padding: 100px 0 80px;
  text-align: center;
  overflow: hidden;
  margin-top: -180px;
  padding-top: 280px;
}

.page-hero-overlay,
.contact-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent 70%);
  animation: rotateGlow 15s linear infinite;
}

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
  }

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

/* Unified Hero Title - Single CSS for all page titles */
.page-hero-title,
h1.page-hero-title {
  font-size: 3.5rem !important;
  font-weight: 900;
  color: #ffffff;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.page-hero-title span {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
}

.page-hero-title span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #ffc107, #ff8c00);
  border-radius: 4px;
}

/* Unified Hero Subtitle - Single CSS for all page subtitles */
.page-hero-subtitle,
.contact-hero-subtitle {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  position: relative;
  z-index: 1;
}

/* Page Breadcrumb Section */
.page-breadcrumb-section {
  background: #f8f9fa;
  padding: 15px 0;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  z-index: 1;
}

.page-breadcrumb-section .container {
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 576px) {
  .page-breadcrumb-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 768px) {
  .page-breadcrumb-section .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (min-width: 992px) {
  .page-breadcrumb-section .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1200px) {
  .page-breadcrumb-section .container {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (min-width: 1400px) {
  .page-breadcrumb-section .container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.page-breadcrumb-section .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
}

.page-breadcrumb-section .breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.page-breadcrumb-section .breadcrumb-item a {
  color: #0063ae;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-breadcrumb-section .breadcrumb-item a:hover {
  color: #ffa500;
  text-decoration: underline;
}

.page-breadcrumb-section .breadcrumb-item.active {
  color: #6c757d;
}

.page-breadcrumb-section .breadcrumb-item+.breadcrumb-item::before {
  content: "/";
  color: #adb5bd;
  padding: 0 10px;
  font-weight: 400;
}

/* Contact Info Section */
.contact-info-wrapper {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  width: 100%;
}

.contact-intro-section {
  text-align: center;
  padding: 50px 20px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.contact-intro-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 30px;
  background: linear-gradient(135deg, #0063ae, #ffa500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 99, 174, 0.3);
  position: relative;
  animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0, 99, 174, 0.3);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 99, 174, 0.4);
  }
}

.contact-intro-icon::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 3px solid rgba(0, 99, 174, 0.2);
  animation: ripple 2s ease-out infinite;
}

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

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.contact-intro-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #002b5b;
  margin-bottom: 20px;
  line-height: 1.2;
  position: relative;
}

.contact-intro-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0063ae, #ffa500);
  border-radius: 2px;
}

.contact-intro-text {
  font-size: 1.15rem;
  color: #555;
  font-weight: 400;
  line-height: 1.8;
  margin: 40px 0 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.contact-intro-divider {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0063ae, transparent);
  margin: 40px auto 0;
  position: relative;
}

.contact-intro-divider::before,
.contact-intro-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #ffa500;
  border-radius: 50%;
}

.contact-intro-divider::before {
  left: -15px;
}

.contact-intro-divider::after {
  right: -15px;
}

.contact-info-item {
  text-align: center;
  padding: 40px 30px;
  transition: all 0.3s ease;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 99, 174, 0.1);
  position: relative;
  overflow: hidden;
}

.contact-info-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0063ae, #ffa500);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-info-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 99, 174, 0.15);
  border-color: rgba(0, 99, 174, 0.2);
}

.contact-info-item:hover::before {
  opacity: 1;
}

.contact-info-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #0063ae, #ffa500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #ffffff;
  transition: all 0.3s ease;
}

.contact-info-item:hover .contact-info-icon {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 99, 174, 0.3);
}

.contact-info-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 15px;
}

.contact-info-value {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.contact-link {
  color: #0063ae;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: #ffa500;
  text-decoration: underline;
}

/* New Team Button Styling */
.contact-btn-wrapper {
  margin-top: 25px;
}

.contact-team-btn {
  display: inline-block;
  padding: 12px 32px;
  background: linear-gradient(135deg, #0063ae, #ffa500);
  color: #fff !important;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.2);
  border: none;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.contact-team-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 99, 174, 0.3);
  background: linear-gradient(135deg, #ffa500, #0063ae);
}

.contact-team-btn i {
  transition: transform 0.3s ease;
}

.contact-team-btn:hover i {
  transform: translateX(8px);
}

/* Document Section Header */
.document-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.document-section-header .section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  display: block;
  width: 100%;
}

.document-section-header .section-subtitle {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 1rem;
  font-weight: 400;
}

.document-section-header .title-underline {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #0063ae, #ffa500);
  margin: 0 auto;
  border-radius: 2px;
}

/* Contact Cards */
.contact-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 99, 174, 0.15);
  border-color: #0063ae;
}

.contact-card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #002b5b;
  margin-bottom: 0.75rem;
}

.contact-card .card-title i {
  margin-right: 8px;
}

/* Organogram Section */
.organogram-section-enhanced {
  background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
  width: 100%;
}

.organogram-container-full {
  position: relative;
  width: 100%;
  /* min-height: 600px; */
  /* padding: 40px 0; */
  overflow: visible;
  margin-bottom: 40px;
}

.org-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  display: block;
}

.org-chart-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
}

.org-level-1-container {
  position: relative;
  width: 100%;
}

.org-level-1-container .row {
  position: relative;
}

.org-level-1-container .row>div {
  position: relative;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.org-level-1-container .row>div:first-child {
  margin-left: 0;
}

.org-level-1-container .row>div:last-child {
  margin-right: 0;
}

/* Double-headed arrow between Member Administration and Chairperson */
.org-level-1-container .row>div:first-child::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5.5rem;
  width: calc(100% + 3rem);
  height: 3px;
  background: #0063ae;
  z-index: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* .org-level-1-container .row>div:first-child::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -5.5rem;
  width: 14px;
  height: 14px;
  background: #0063ae;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
} */

/* .org-level-1-container .row>div:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4.5rem;
  width: 14px;
  height: 14px;
  background: #0063ae;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
} */

/* Double-headed arrow between Chairperson and Member HR */
.org-level-1-container .row>div:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5.5rem;
  width: calc(100% + 3rem);
  height: 3px;
  background: #0063ae;
  z-index: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* .org-level-1-container .row>div:nth-child(2) .org-node-chairperson::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -7.2rem;
  width: 16px;
  height: 16px;
  background: #0063ae;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
} */

/* .org-level-1-container .row>div:nth-child(3) .org-node-member[data-position="right"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -7.2rem;
  width: 16px;
  height: 16px;
  background: #0063ae;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
} */

.org-level-2-container {
  position: relative;
}

.org-level-2-container .row {
  position: relative;
  margin-top: 30px;
}

.org-level-2-container .row::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 19.4%;
  right: 0;
  height: 2px;
  background: #0063ae;
  border-radius: 2px;
  z-index: 0;
  width: 58.5%;
}

.org-level-3-container {
  width: 100%;
  position: relative;
}

.org-level-3-container .row {
  position: relative;
  margin-top: 40px;
}

.org-level-3-container .row::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 8.3%;
  right: 0;
  height: 2px;
  background: #0063ae;
  border-radius: 2px;
  z-index: 0;
  width: 83.5%;
}

.org-node {
  background: #0063ae;
  border: 2px solid #ffa500;
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.15);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.org-node-secretary {
  background: #0063ae;
  border: 2px solid #0063ae;
}

.org-node::before,
.org-node::after {
  content: '';
  position: absolute;
  background: #0063ae;
  z-index: 1;
}

.org-node:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.25);
  border-color: #ffa500;
}

.org-node-chairperson {
  background: linear-gradient(135deg, #0063ae 0%, #004b88 100%);
  color: #ffffff;
  border-color: #ffa500;
  padding: 35px 30px;
  max-width: 320px;
  margin: 0 auto;
}

/* .org-node-chairperson::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 20px;
  background: #0063ae;
  border-radius: 2px;
} */

.org-node-chairperson h4 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
}

.org-node-se2retary {
  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
  color: #ffffff;
  border-color: #0063ae;
  padding: 30px 25px;
  position: relative;
}

.org-node-secretary::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 28px;
  background: #0062ae;
  border-radius: 2px;
  transition: height 0.3s ease, top 0.3s ease;
  transform-origin: bottom center;
}

.org-node-secretary:hover::before {
  height: 25px;
  top: -25px;
}

.org-node-secretary::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background: #0063ae;
  border-radius: 2px;
  transition: height 0.3s ease, bottom 0.3s ease;
  transform-origin: top center;
}

.org-node-secretary:hover::after {
  height: 25px;
  bottom: -25px;
}

.org-node-secretary h4 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
}

.org-node-me6ber {
  background: linear-gradient(135deg, #0063ae 0%, #004b88 100%);
  color: #ffffff;
  border-color: #ffa500;
  padding: 25px 20px;
  position: relative;
}

/* 
.org-node-member::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background: #0063ae;
  border-radius: 2px;
  transition: height 0.3s ease, top 0.3s ease;
  transform-origin: bottom center;
} */

.org-node-member:hover::before {
  height: 25px;
  top: -25px;
}

.org-node-member::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 22px;
  background: #0063ae;
  border-radius: 2px;
  transition: height 0.3s ease, bottom 0.3s ease;
}

.org-node-member:hover::after {
  height: 25px;
  bottom: -25px;
}

/* Horizontal connector from left member to center */
/* .org-node-member[data-position="left"]::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  width: calc(50% + 15px);
  height: 2px;
  background: #0063ae;
  z-index: 0;
} */

/* Horizontal connector from right member to center */
/* .org-node-member[data-position="right"]::after {
  content: '';
  position: absolute;
  top: -30px;
  right: 50%;
  width: calc(50% + 15px);
  height: 2px;
  background: #0063ae;
  z-index: 0;
} */

.org-node-member h4 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
}

.org-node-pillar {
  background: #f0f6ff;
  border-color: #0063ae;
  padding: 25px 15px;
  min-height: 140px;
  position: relative;
}

.org-node-pillar::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background: #0063ae;
  border-radius: 2px;
  transition: height 0.3s ease, top 0.3s ease;
  transform-origin: bottom center;
}

.org-node-pillar:hover::before {
  height: 25px;
  top: -25px;
}

.org-node-pillar h5 {
  color: #002b5b;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 10px 0;
}

.org-node-pillar p {
  color: #555;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

.org-node-content h4,
.org-node-content h5 {
  margin: 0;
}

/* Organogram Levels */
.org-level {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  position: relative;
  flex-wrap: wrap;
}

.org-level-1 {
  margin-bottom: 2rem;
  flex-direction: column;
}

.org-level-1::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 1.5rem;
  background: #0063ae;
  z-index: 0;
}

.org-level-2 {
  margin-bottom: 2rem;
  flex-wrap: nowrap;
  position: relative;
}

.org-level-2::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 1.5rem;
  background: #0063ae;
  z-index: 0;
}

.org-level-2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #0063ae;
  z-index: 0;
}

.org-level-3 {
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  position: relative;
}

.org-level-3::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  height: 3px;
  background: #0063ae;
  z-index: 0;
}

.org-level-3::after {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 1.5rem;
  background: #0063ae;
  z-index: 0;
}

/* Organogram Boxes */
.org-box {
  background: #ffffff;
  border: 2px solid #0063ae;
  border-radius: 12px;
  padding: 1.5rem;
  min-width: 200px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.org-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 99, 174, 0.2);
}

.org-box-chairperson {
  background: linear-gradient(135deg, #0063ae 0%, #004b88 100%);
  color: #ffffff;
  border-color: #ffa500;
  min-width: 250px;
  padding: 2rem;
}

.org-box-chairperson h4 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.3rem;
}

.org-box-secretary {
  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
  color: #ffffff;
  border-color: #0063ae;
  min-width: 220px;
  padding: 1.75rem;
}

.org-box-secretary h4 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.2rem;
}

.org-box-member {
  background: #ffffff;
  border-color: #0063ae;
  min-width: 180px;
}

.org-box-member h4 {
  color: #002b5b;
  font-weight: 600;
  font-size: 1rem;
}

.org-box-pillar {
  background: #f0f6ff;
  border-color: #0063ae;
  min-width: 180px;
  max-width: 200px;
  flex: 1 1 calc(33.333% - 1rem);
}

.org-box-pillar h5 {
  color: #002b5b;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.org-box-pillar p {
  color: #555;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0;
}

.org-box-content h4,
.org-box-content h5 {
  margin: 0 0 0.5rem 0;
}

.org-box-content p {
  margin: 0;
  font-size: 1.05rem;
  /* Increased from 0.9rem for better readability */
}

/* Meet Our Team Section */
.meet-team-section-enhanced {
  background: linear-gradient(180deg, #ffe3ab 0%, rgba(255, 227, 171, 0.95) 15%, rgba(255, 235, 200, 0.85) 30%, rgba(255, 240, 210, 0.7) 45%, rgba(255, 245, 230, 0.5) 60%, rgba(255, 248, 240, 0.3) 75%, rgba(255, 250, 245, 0.15) 85%, #ffffff 100%);
  width: 100%;
  position: relative;
}

.team-category {
  margin-bottom: 0;
}

.team-category-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #002b5b;
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 3px solid #0063ae;
  position: relative;
}

.team-category-title::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #0063ae, #ffa500);
}

/* Team Member Card */
.team-member-card {
  background: #f0f7ff;
  /* Light bluish shade */
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 99, 174, 0.1);
  transition: all 0.4s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.team-member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0063ae, #ffa500);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.team-member-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 50px rgba(0, 99, 174, 0.2);
  border-color: rgba(0, 99, 174, 0.3);
}

.team-member-card:hover::before {
  opacity: 1;
}

.team-member-image {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
}

/* Leadership specific refinements */
.meet-team-section-enhanced .team-member-card {
  border-radius: 28px;
  box-shadow: 0 20px 45px rgba(0, 43, 91, 0.08);
  border: 1px solid rgba(0, 99, 174, 0.12);
  background: linear-gradient(180deg, #f8fcff 0%, #e8f4ff 65%, #f8fcff 100%);
  gap: 0;
}

.meet-team-section-enhanced .team-member-card:hover {
  box-shadow: 0 30px 65px rgba(0, 43, 91, 0.18);
}

.meet-team-section-enhanced .team-member-image {
  padding-top: 0;
  height: clamp(240px, 35vw, 320px);
  border-radius: 24px 24px 0 0;
  background: #f4f6fb;
}

.meet-team-section-enhanced .team-member-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.meet-team-section-enhanced .team-member-card:hover .team-member-image img {
  transform: scale(1.05);
}

.meet-team-section-enhanced .team-member-info {
  padding: 20px;
  text-align: left;
  /* gap: 10px; */
}

.meet-team-section-enhanced .team-member-name {
  font-size: 1.18rem;
  margin-bottom: 6px;
}

.meet-team-section-enhanced .team-member-role {
  color: #0063ae;
  font-weight: 600;
  margin-bottom: 18px;
}

.meet-team-section-enhanced .team-member-contact {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.95rem;
  color: #4b5b75;
  margin-bottom: 8px;
}

.meet-team-section-enhanced .team-member-contact:last-child {
  margin-bottom: 0;
}

.meet-team-section-enhanced .team-member-contact i {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(0, 99, 174, 0.1);
  color: #0063ae;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

@media (max-width: 767px) {
  .meet-team-section-enhanced .team-member-card {
    border-radius: 20px;
  }

  .meet-team-section-enhanced .team-member-image {
    height: 220px;
  }

  .meet-team-section-enhanced .team-member-info {
    padding: 18px;
  }
}

.team-member-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0063ae;
  font-size: 2.5rem;
  transition: all 0.4s ease;
  z-index: 1;
}

.team-member-card:hover .team-member-placeholder {
  transform: scale(1.05);
  filter: brightness(0.7);
}

.team-member-placeholder::before {
  content: '\f2bd';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

/* Leadership contact style cards */
.team-contact-card {
  /* background: #ffffff; */
  border-radius: 24px;
  box-shadow: 0 15px 45px rgba(0, 99, 174, 0.1);
  border: 1px solid rgba(0, 99, 174, 0.08);
  padding: 30px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-contact-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 70%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #0063ae, #ffa500);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.team-contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 55px rgba(0, 99, 174, 0.18);
}

.team-contact-card:hover::after {
  opacity: 1;
}

.team-contact-header {
  text-align: left;
}

.team-contact-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0 0 6px 0;
}

.team-contact-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0063ae;
  margin: 0;
}

.team-contact-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.team-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 0.95rem;
  color: #002b5b;
  line-height: 1.6;
}

.team-contact-row--muted {
  color: #4b5b75;
}

.team-contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 99, 174, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0063ae;
  flex-shrink: 0;
  font-size: 0.95rem;
  margin-top: 2px;
}

.team-contact-row a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.team-contact-row a:hover,
.team-contact-row a:focus {
  text-decoration: underline;
}

.team-member-info {
  padding: 12px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-member-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0 0 6px 0;
  transition: color 0.3s ease;
}

.team-member-card:hover .team-member-name {
  color: #0063ae;
}

.team-member-role {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  font-weight: 500;
}

.team-member-description {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 34, 77, 0.9);
  color: #fff;
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: bottom 0.5s ease;
  overflow: hidden;
  z-index: 2;
}

.team-member-card:hover .team-member-description {
  bottom: 0;
}

.team-member-description p {
  font-size: 1.05rem;
  /* Increased from 0.9rem for better readability */
  margin: 0 0 15px 0;
  line-height: 1.6;
  color: #e0e0e0;
}

/* Contact Info Card Styling */
.contact-info-card {
  min-height: 200px;
}

.contact-info-card .team-member-info {
  padding: 5px 20px;
  text-align: left;
  align-items: flex-start;
}

.contact-info-card .team-member-name {
  font-size: 1.1rem;
  margin-bottom: 8px;
  text-align: left;
}

.contact-info-card .team-member-role {
  font-size: 0.85rem;
  margin-bottom: 15px;
  text-align: left;
  color: #0063ae;
  font-weight: 600;
}

.contact-details {
  margin-top: 10px;
  width: 100%;
}

.contact-item {
  font-size: 0.85rem;
  color: #555;
  margin: 8px 0;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.contact-item i {
  color: #0063ae;
  font-size: 0.9rem;
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
}

.contact-item:first-child {
  margin-top: 0;
}

.contact-info-card:hover {
  transform: translateY(-8px);
}

.contact-info-card:hover .team-member-name {
  color: #0063ae;
}

/* Disable overlay for Consultants and Karmayogi Saanthis */
.no-overlay-card .team-member-description {
  display: none !important;
}

.no-overlay-card:hover .team-member-placeholder {
  transform: none;
  filter: none;
}

/* Legacy styles for backward compatibility */
.team-member-box {
  border: 2px solid #000000;
  border-radius: 12px;
  background: #ffffff;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 180px;
}

.team-member-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 99, 174, 0.2);
  border-color: #0063ae;
}

.team-member-box-wide {
  aspect-ratio: 4 / 1;
  min-height: 120px;
}

/* Contact Form Section */
.contact-form-section-enhanced {
  background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 100%);
  width: 100%;
}

.form-section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #002b5b;
  text-align: center;
}

.contact-form {
  width: 100%;
}

.form-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #002b5b;
  margin-bottom: 10px;
}

.form-control-enhanced {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #ffffff;
}

.form-control-enhanced:focus {
  outline: none;
  border-color: #0063ae;
  box-shadow: 0 0 0 3px rgba(0, 99, 174, 0.1);
}

.btn-submit-enhanced {
  background: linear-gradient(135deg, #0063ae, #ffa500);
  color: #ffffff;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.btn-submit-enhanced:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 99, 174, 0.3);
}

/* Social Media Section */
.social-section-enhanced {
  background: linear-gradient(135deg, #0063ae 0%, #004b88 100%);
  width: 100%;
}

.social-section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.social-icons-enhanced {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.social-icon-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffa500;
  transform: translateY(-3px);
  color: #ffffff;
}

/* Responsive Design */
@media (max-width: 1400px) {

  .contact-info-content,
  .organogram-content,
  .team-section-content,
  .form-section-content,
  .social-section-content {
    padding: 0 40px;
  }
}

@media (max-width: 1200px) {
  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .org-level-3-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .org-level-2-container {
    flex-wrap: wrap;
    gap: 30px;
  }
}

@media (max-width: 992px) {

  .page-hero-title,
  .contact-hero-title,
  h1.page-hero-title,
  h1.contact-hero-title {
    font-size: 3.2rem !important;
  }

  .org-node-chairperson {
    max-width: 100%;
  }
}

@media (max-width: 992px) {
  .organogram-wrapper {
    gap: 1.5rem;
  }

  .org-level {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .org-box {
    min-width: 150px;
  }

  .org-box-chairperson {
    min-width: 200px;
  }

  .org-box-secretary {
    min-width: 180px;
  }

  .org-level-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .org-box-pillar {
    flex: 1 1 calc(50% - 1rem);
    max-width: none;
  }

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

  .team-member-box-wide {
    grid-column: span 3;
  }
}

@media (max-width: 768px) {

  .page-hero-section,
  .contact-hero-section {
    padding: 60px 0 50px;
    margin-top: -180px;
    padding-top: 240px;
  }

  .page-hero-title,
  .contact-hero-title,
  h1.page-hero-title,
  h1.contact-hero-title {
    font-size: 2.8rem !important;
  }

  .page-hero-subtitle,
  .contact-hero-subtitle {
    font-size: 1.3rem;
  }

  .contact-intro-section {
    padding: 40px 15px;
  }

  .contact-intro-icon {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    margin-bottom: 25px;
  }

  .contact-intro-title {
    font-size: 2rem;
  }

  .contact-intro-text {
    font-size: 1rem;
    margin: 30px 0 25px;
  }

  .org-node-pillar {
    min-height: 120px;
  }

  .team-member-box {
    min-height: 150px;
  }

  .team-member-box-wide {
    min-height: 100px;
  }

  .form-section-title,
  .social-section-title {
    font-size: 2rem;
  }

  .document-section-header .section-title {
    font-size: 1.8rem;
  }

  .team-category-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {

  .page-hero-section,
  .contact-hero-section {
    padding: 50px 0 40px;
    margin-top: -180px;
    padding-top: 230px;
  }

  .page-hero-title,
  .contact-hero-title,
  h1.page-hero-title,
  h1.contact-hero-title {
    font-size: 2.2rem !important;
  }

  .page-hero-subtitle,
  .contact-hero-subtitle {
    font-size: 1.1rem;
  }

  .contact-intro-icon {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .contact-intro-title {
    font-size: 1.6rem;
  }

  .contact-intro-text {
    font-size: 0.95rem;
    margin: 25px 0 20px;
  }

  .contact-intro-divider {
    width: 150px;
  }

  .social-icons-enhanced {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .social-icon-btn {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }

  .org-node {
    padding: 20px 15px;
  }

  .org-node-chairperson h4 {
    font-size: 1.3rem;
  }

  .org-node-secretary h4 {
    font-size: 1.1rem;
  }

  .org-node-pillar {
    min-height: 110px;
    padding: 20px 12px;
  }

  .org-node-pillar h5 {
    font-size: 0.95rem;
  }

  .org-node-pillar p {
    font-size: 0.8rem;
  }
}

/* ===========================================
   MoU STATUS TABLE STYLES
   =========================================== */

/* MDOS Navigation Buttons */
.mdos-nav-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin-bottom: 30px;
  width: 100%;
}

.mdos-nav-btn {
  position: relative;
  flex: 1;
  padding: 48px 32px;
  background: linear-gradient(135deg, #ffb84d 0%, #ffcc80 50%, #ffb347 100%);
  color: #ffffff;
  text-decoration: none;
  border-radius: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(255, 184, 77, 0.25), 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  overflow: hidden;
  min-height: 220px;
  min-width: 0;
}

.mdos-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.mdos-nav-btn:hover::before {
  left: 100%;
}

.mdos-nav-btn:hover {
  background: linear-gradient(135deg, #ffb347 0%, #ffb84d 50%, #ffcc80 100%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(255, 184, 77, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12);
  color: #ffffff;
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.mdos-nav-btn:active {
  transform: translateY(-2px) scale(1);
  box-shadow: 0 4px 15px rgba(255, 184, 77, 0.3);
}

.mdos-btn-icon {
  font-size: 56px;
  color: #ffffff;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.mdos-nav-btn:hover .mdos-btn-icon {
  transform: scale(1.15) rotate(5deg);
}

.mdos-btn-text {
  display: block;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mdos-btn-arrow {
  font-size: 28px;
  opacity: 0.9;
  transition: all 0.3s ease;
  margin-top: 8px;
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.mdos-nav-btn:hover .mdos-btn-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* All buttons use the same color */
.mdos-btn-1,
.mdos-btn-2,
.mdos-btn-3,
.mdos-btn-4 {
  background: linear-gradient(135deg, #ffb84d 0%, #ffcc80 50%, #ffb347 100%);
}

.mdos-btn-1:hover,
.mdos-btn-2:hover,
.mdos-btn-3:hover,
.mdos-btn-4:hover {
  background: linear-gradient(135deg, #ffb347 0%, #ffb84d 50%, #ffcc80 100%);
}

/* CBP Description Box */
.cbp-description-box {
  background: linear-gradient(135deg, #fff9f0 0%, #fff5e8 50%, #fffaf0 100%);
  border-radius: 16px;
  padding: 45px 55px;
  box-shadow: 0 4px 20px rgba(255, 184, 77, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 184, 77, 0.15);
  margin-top: 30px;
}

.cbp-description-text {
  font-size: 20px;
  line-height: 2;
  color: #333;
  margin: 0;
  text-align: left;
  font-weight: 400;
}

@media (max-width: 1200px) {
  .mdos-nav-btn {
    padding: 44px 28px;
    min-height: 200px;
    gap: 18px;
  }

  .mdos-btn-icon {
    font-size: 52px;
  }

  .mdos-btn-text {
    font-size: 19px;
  }

  .mdos-btn-arrow {
    font-size: 26px;
  }
}

@media (max-width: 992px) {
  .mdos-nav-buttons {
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .mdos-nav-btn {
    flex: 1 1 calc(50% - 10px);
    min-width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .mdos-nav-buttons {
    flex-direction: column;
    gap: 20px;
  }

  .mdos-nav-btn {
    flex: 1 1 100%;
    min-width: 100%;
    min-height: 180px;
    padding: 40px 28px;
    gap: 16px;
  }

  .mdos-btn-icon {
    font-size: 48px;
  }

  .mdos-btn-text {
    font-size: 18px;
  }

  .mdos-btn-arrow {
    font-size: 24px;
  }

  .cbp-description-box {
    padding: 35px 40px;
  }

  .cbp-description-text {
    font-size: 18px;
    line-height: 1.9;
  }
}

@media (max-width: 576px) {
  .cbp-description-box {
    padding: 30px 35px;
  }

  .cbp-description-text {
    font-size: 17px;
  }
}

.mou-status-table-wrapper {
  background: #ffffff;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 40px;
  margin-left: 0;
  margin-right: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.mou-status-table-wrapper .table-responsive {
  overflow-x: visible;
}

@media (max-width: 1200px) {
  .mou-status-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep .table-responsive inside wrapper as visible to avoid double scrollbars */
  .mou-status-table-wrapper .table-responsive {
    overflow-x: visible;
  }

  /* Style scrollbar to be almost transparent on tablets and mobiles */
  .mou-status-table-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .mou-status-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
  }

  .mou-status-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }

  .mou-status-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }
}

.mou-status-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #d0d0d0;
  table-layout: auto;
  font-size: 0.85rem;
}

/* Equal width columns for collaboration tables (4 columns) */
.mou-status-table.collaboration-table {
  table-layout: fixed;
  border: 2px solid #d0d0d0;
}

.mou-status-table.collaboration-table thead th,
.mou-status-table.collaboration-table tbody td {
  border: 1px solid #e0e0e0;
}

.mou-status-table.collaboration-table thead th:nth-child(1),
.mou-status-table.collaboration-table tbody td:nth-child(1) {
  width: 8%;
  text-align: center;
  /* border-right: none; */
  padding: 8px 5px;
}

.mou-status-table.collaboration-table thead th:nth-child(2),
.mou-status-table.collaboration-table tbody td:nth-child(2) {
  width: 37%;
  border-left: none;
}

.mou-status-table.collaboration-table thead th:nth-child(3),
.mou-status-table.collaboration-table tbody td:nth-child(3) {
  width: 40%;
}

.mou-status-table.collaboration-table thead th:nth-child(4),
.mou-status-table.collaboration-table tbody td:nth-child(4) {
  width: 15%;
  text-align: center;
}

.mou-status-table.collaboration-table .collab-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
}

.mou-status-table.collaboration-table .collab-logo img {
  width: 25px;
  height: 25px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.table-logo {
  max-width: 50px;
  max-height: 40px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.mou-status-table.collaboration-table thead th {
  border-bottom: 2px solid #00569A;
}

.mou-status-table.collaboration-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
  /* Background will be set by nth-child rules below */
}

/* Alternating row colors for collaboration-table */
.mou-status-table.collaboration-table tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

.mou-status-table.collaboration-table tbody tr:nth-child(even) {
  background: #f8f9fa !important;
}

.mou-status-table.collaboration-table tbody tr:last-child {
  border-bottom: none !important;
}

.mou-status-table.collaboration-table tbody tr:last-child td {
  border-bottom: none !important;
}

.mou-status-table.collaboration-table .action-link {
  color: #00569A;
  text-decoration: none;
  font-weight: 500;
}

.mou-status-table.collaboration-table .action-link:hover {
  color: #0063ae;
  text-decoration: underline;
}

/* Optimized column widths to reduce scrolling - only for MDOS table (9 columns) */
.mou-status-table:not(.states-ut-table) thead th:nth-child(1),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(1) {
  /* width: 50px; */
  /* min-width: 50px; */
  text-align: center;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(2),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(2) {
  width: 12%;
  min-width: 100px;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(3),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(3) {
  width: 15%;
  min-width: 120px;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(4),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(4) {
  width: 10%;
  min-width: 90px;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(5),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(5) {
  width: 13%;
  min-width: 110px;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(6),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(6) {
  width: 10%;
  min-width: 90px;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(7),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(7) {
  width: 12%;
  min-width: 100px;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(8),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(8) {
  width: 15%;
  min-width: 120px;
}

.mou-status-table:not(.states-ut-table) thead th:nth-child(9),
.mou-status-table:not(.states-ut-table) tbody td:nth-child(9) {
  width: 13%;
  min-width: 110px;
}

.mou-status-table thead {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
}

.mou-status-table thead th {
  padding: 10px 6px;
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  white-space: normal;
  position: relative;
  background: transparent;
  word-wrap: break-word;
}

.mou-status-table thead th:last-child {
  border-right: none;
}

.mou-status-table tbody tr {
  border-bottom: 1px solid #d0d0d0;
  transition: all 0.2s ease;
  /* Background will be set by nth-child rules below */
}

.mou-status-table tbody tr:not(:last-child) {
  border-bottom: 1px solid #d0d0d0;
}

.mou-status-table tbody tr:last-child {
  border-bottom: none !important;
}

.mou-status-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Alternating row colors - ensure odd rows are white, even rows are light gray */
.mou-status-table tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

.mou-status-table tbody tr:nth-child(even) {
  background: #f8f9fa !important;
}

.mou-status-table tbody tr:hover {
  background: #f0f4ff;
  box-shadow: inset 0 0 0 1px rgba(0, 86, 154, 0.1);
}

.mou-status-table tbody td {
  padding: 8px 6px;
  vertical-align: top;
  font-size: 0.85rem;
  color: #1a1a1a;
  border-right: 1px solid #b0b0b0;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-weight: 400;
}

.mou-status-table tbody td:last-child {
  border-right: none;
}

.mou-status-table tbody td:first-child {
  font-weight: 600;
  color: #1a1a1a;
}

.mou-status-table tbody td:last-child {
  color: #6c757d;
}

/* States/UTs table - equal column widths (3 columns) */
.states-ut-table {
  table-layout: fixed;
}

.states-ut-table thead th,
.states-ut-table tbody td {
  width: 33.33%;
}

.states-ut-table thead th:nth-child(1) {
  width: 33.33%;
  text-align: left;
  padding: 10px 12px 10px 16px !important;
}

.states-ut-table tbody td:nth-child(1) {
  width: 33.33%;
  text-align: left;
  padding: 8px 12px 8px 16px !important;
}

.states-ut-table thead th:nth-child(2),
.states-ut-table tbody td:nth-child(2) {
  width: 33.33%;
  padding-left: 12px;
}

.states-ut-table thead th:nth-child(3),
.states-ut-table tbody td:nth-child(3) {
  width: 33.33%;
  padding-left: 12px;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.status-signed {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.status-discussions {
  background: linear-gradient(135deg, #ffa500 0%, #ffc107 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
}

.status-pending {
  background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

/* Table Pagination Styles */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
  margin-top: 0;
}

.pagination-info {
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #00569A;
  color: #00569A;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-number {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-number:hover {
  background: #f8f9fa;
  border-color: #00569A;
  color: #00569A;
}

.pagination-number.active {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  border-color: #00569A;
  color: #ffffff;
  font-weight: 600;
}

.pagination-ellipsis {
  padding: 0 8px;
  color: #6c757d;
  font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mou-status-table-wrapper {
    padding: 20px 15px;
    border-radius: 8px;
  }

  /* Change collaboration table to auto layout on mobile to prevent content overlap */
  .mou-status-table.collaboration-table {
    table-layout: auto;
    min-width: 700px;
  }

  /* Ensure columns have proper minimum widths on mobile */
  .mou-status-table.collaboration-table thead th:nth-child(1),
  .mou-status-table.collaboration-table tbody td:nth-child(1) {
    width: auto;
    min-width: 60px;
  }

  .mou-status-table.collaboration-table thead th:nth-child(2),
  .mou-status-table.collaboration-table tbody td:nth-child(2) {
    width: auto;
    min-width: 200px;
  }

  .mou-status-table.collaboration-table thead th:nth-child(3),
  .mou-status-table.collaboration-table tbody td:nth-child(3) {
    width: auto;
    min-width: 200px;
  }

  .mou-status-table.collaboration-table thead th:nth-child(4),
  .mou-status-table.collaboration-table tbody td:nth-child(4) {
    width: auto;
    min-width: 100px;
  }

  .mou-status-table thead th {
    padding: 10px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .mou-status-table tbody td {
    padding: 8px 12px;
    font-size: 0.8rem;
    white-space: normal;
    word-wrap: break-word;
  }

  .status-badge {
    padding: 5px 12px;
    font-size: 0.75rem;
  }

  .table-pagination {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .pagination-controls {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .pagination-number {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* ===========================================
   ABOUT CBC PAGE STYLES
   =========================================== */

/* Mission Karmayogi Highlight */
.mission-karmayogi-highlight {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  border-left: 5px solid #ffc107;
  box-shadow: 0 4px 15px rgba(0, 75, 136, 0.1);
  transition: all 0.3s ease;
}

.mission-karmayogi-highlight:hover {
  box-shadow: 0 6px 20px rgba(0, 75, 136, 0.15);
  transform: translateY(-2px);
}

/* Mission Karmayogi Header */
.mission-karmayogi-header {
  /* background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%); */
  background: linear-gradient(135deg, #004c8a 0%, #0061aa 100%);
  /* border-left: 5px solid #ffc107; */
  box-shadow: 0 4px 15px rgba(0, 75, 136, 0.1);
  width: 100%;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mission-karmayogi-header:hover {
  background: linear-gradient(135deg, #0061aa 0%, #0078c8 100%);
  box-shadow: 0 6px 20px rgba(0, 75, 136, 0.2);
  transform: translateY(-2px);
  text-decoration: none;
}

.mission-karmayogi-header h2 {
  color: #ffffff;
  font-size: 2rem;
  text-decoration: none;
}

.mission-icon-wrapper {
  display: inline-block;
  padding: 20px;
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.text-gradient {
  background: linear-gradient(135deg, #004b88 0%, #0063ae 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Institutional Framework Flowchart */
.institutional-framework-flowchart {
  margin-top: 0;
}

.framework-header {
  background: linear-gradient(135deg, #004b88 0%, #0063ae 100%);
  padding: 10px 15px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.framework-title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
  line-height: 1.3;
}

.framework-content {
  background: #ffffff;
  padding: 18px 12px;
  border-radius: 0 0 8px 8px;
  border: 2px solid #e9ecef;
  border-top: none;
}

.framework-box {
  background: #ffffff;
  border-radius: 8px;
  padding: 18px 12px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid #e9ecef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.framework-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.framework-box-link {
  display: block;
  text-decoration: none;
  height: 100%;
}

.framework-box-link:hover {
  text-decoration: none;
}

.cbc-box {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe0b2 100%);
  border-color: #ff9800;
}

.karmayogi-box {
  background: linear-gradient(135deg, #fffef0 0%, #fff9c4 100%);
  border-color: #fbc02d;
}

.framework-logo {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.framework-logo-img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.framework-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1b1f23;
  margin-bottom: 8px;
  line-height: 1.4;
}

.framework-box-subtitle {
  font-size: 0.8rem;
  color: #6c757d;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .institutional-framework-flowchart {
    margin-top: 1.5rem;
  }

  .framework-content {
    padding: 15px 10px;
  }

  .framework-content .row .col-6 {
    margin-bottom: 10px;
  }

  .framework-header {
    padding: 8px 12px;
  }

  .framework-title {
    font-size: 0.9rem;
  }

  .framework-box {
    padding: 15px 10px;
  }

  .framework-box-title {
    font-size: 0.95rem;
  }

  .framework-box-subtitle {
    font-size: 0.75rem;
  }

  .framework-logo-img {
    max-width: 70px;
    max-height: 70px;
  }
}

/* CBC Intro Card */
.cbc-intro-card {
  background: #ffffff;
  border: 2px solid #e9ecef;
  box-shadow: 0 4px 15px rgba(0, 75, 136, 0.1);
  transition: all 0.3s ease;
}

.cbc-intro-card:hover {
  box-shadow: 0 6px 25px rgba(0, 75, 136, 0.15);
  border-color: #0063ae;
}

.cbc-badge {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  border: 2px solid #0063ae;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.2);
}

/* Mandate Section */
.mandate-section {
  background: #f8f9fa;
  padding: 3rem 2rem;
  border-radius: 15px;
  margin: 2rem 0;
}

.title-underline {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0063ae 0%, #ffc107 50%, #0063ae 100%);
  border-radius: 2px;
}

.mandate-card {
  background: #ffffff;
  border: 2px solid #e9ecef;
  box-shadow: 0 3px 12px rgba(0, 75, 136, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.mandate-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0063ae 0%, #ffc107 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.mandate-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 75, 136, 0.15);
  border-color: #0063ae;
}

.mandate-card:hover::before {
  transform: scaleY(1);
}

.mandate-icon {
  display: inline-block;
  padding: 15px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.mandate-card:hover .mandate-icon {
  background: linear-gradient(135deg, #0063ae 0%, #ffc107 100%);
  transform: scale(1.1);
}

.mandate-card:hover .mandate-icon i {
  color: #ffffff !important;
}

.mandate-card h5 {
  color: #004b88;
  font-size: 1.1rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
}

/* Vision & Mission Cards */
.vision-mission-card {
  background: #ffffff;
  border: 3px solid #e9ecef;
  box-shadow: 0 5px 20px rgba(0, 75, 136, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vision-mission-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #0063ae 0%, #ffc107 50%, #0063ae 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.vision-mission-card:hover::after {
  transform: scaleX(1);
}

.vision-card {
  border-top: 5px solid #0063ae;
}

.mission-card {
  border-top: 5px solid #ffc107;
}

.vision-mission-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 75, 136, 0.2);
  border-color: #0063ae;
}

.vision-icon-wrapper,
.mission-icon-wrapper {
  display: inline-block;
  padding: 20px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.2);
  transition: all 0.3s ease;
}

.mission-icon-wrapper {
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.vision-card:hover .vision-icon-wrapper {
  background: linear-gradient(135deg, #0063ae 0%, #0088cc 100%);
  transform: rotate(5deg) scale(1.1);
}

.mission-card:hover .mission-icon-wrapper {
  background: linear-gradient(135deg, #ffc107 0%, #ffa500 100%);
  transform: rotate(-5deg) scale(1.1);
}

.vision-card:hover .vision-icon-wrapper i {
  color: #ffffff !important;
}

.mission-card:hover .mission-icon-wrapper i {
  color: #ffffff !important;
}

.vision-mission-card h3 {
  color: #004b88;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.vision-mission-card .vision-content,
.vision-mission-card .mission-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: auto;
  padding: 10px 0;
}

.vision-mission-card h4 {
  color: #0063ae;
  font-size: 1.2rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  margin: 0;
  text-align: center;
}

.mission-card h4 {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Statistics Section */
.stats-section {
  background: linear-gradient(135deg, #003b73 0%, #0063ae 100%);
  border-top: 2px solid #e9ecef;
}

.stat-item {
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-item h2 {
  font-size: 2.5rem;
  font-weight: 800;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .mission-karmayogi-highlight .row {
    text-align: center;
  }

  .mandate-section {
    padding: 2rem 1rem;
  }

  .vision-mission-card {
    margin-bottom: 1.5rem;
  }

  .stat-item h2 {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .cbc-intro-card .row {
    text-align: center;
  }

  .vision-mission-card h3 {
    font-size: 1.25rem;
  }

  .vision-mission-card h4 {
    font-size: 1rem;
  }

  .mission-card h4 {
    font-size: 0.95rem;
  }
}

/* ===========================================
   JOIN THE MISSION PAGE - THEME CONSISTENT DESIGN
   =========================================== */

.join-mission-section {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding: 40px 0 50px;
  min-height: calc(100vh - 180px);
}

.join-mission-intro {
  padding: 20px 0 25px;
}

.join-mission-intro .intro-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Opportunity Cards Row */
.join-opportunity-cards-row {
  margin-bottom: 25px !important;
}

.join-opportunity-cards-row>[class*="col-"] {
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
}

/* Opportunity Cards */
.join-opportunity-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 99, 174, 0.1);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  margin-bottom: 0;
  width: 100%;
}

.join-opportunity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #0063ae 0%, #0084d4 50%, #0063ae 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.join-opportunity-card:hover::before {
  transform: scaleX(1);
}

.join-opportunity-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 35px rgba(0, 99, 174, 0.2);
  border-color: #0063ae;
}

.opportunity-card-header {
  padding: 30px 25px 18px;
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
}

.opportunity-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  border-radius: 50%;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.2);
  transition: all 0.4s ease;
}

.join-opportunity-card:hover .opportunity-icon-wrapper {
  background: linear-gradient(135deg, #0063ae 0%, #0084d4 100%);
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0, 99, 174, 0.3);
}

.opportunity-icon-wrapper i {
  font-size: 1.4rem;
  color: #0063ae;
  transition: all 0.4s ease;
}

.join-opportunity-card:hover .opportunity-icon-wrapper i {
  color: #ffffff;
  transform: scale(1.1);
}

.opportunity-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #004b88;
  margin: 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.join-opportunity-card:hover .opportunity-title {
  color: #0063ae;
}

.opportunity-card-body {
  padding: 20px 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.opportunity-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
  text-align: justify;
}

.opportunity-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: auto;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  transform: translateX(5px);
}

.feature-item i {
  color: #0063ae;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.feature-item span {
  font-size: 0.8rem;
  color: #333;
  font-weight: 500;
}

.opportunity-card-footer {
  padding: 15px;
  border-top: 1px solid #e9ecef;
  background: #fafbfc;
}

.opportunity-card-footer .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 30px;
  background: linear-gradient(135deg, #0063ae 0%, #004b88 100%);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.3);
  border: none;
}

.opportunity-card-footer .button :hover {
  background: linear-gradient(135deg, #0084d4 0%, #0063ae 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 99, 174, 0.4);
  color: #ffffff;
}

.opportunity-card-footer .button i {
  transition: transform 0.3s ease;
}

.opportunity-card-footer .button :hover i {
  transform: translateX(5px);
}

/* Career Opportunities Card - Orange Theme */
.career-opportunity-card {
  border-color: rgba(255, 140, 0, 0.2);
}

.career-opportunity-card::before {
  background: linear-gradient(90deg, #ff8c00 0%, #ffa500 50%, #ff8c00 100%);
}

.career-opportunity-card:hover {
  box-shadow: 0 12px 35px rgba(255, 140, 0, 0.25);
  border-color: #ff8c00;
}

.career-opportunity-card .opportunity-card-header {
  background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%);
}

.career-opportunity-card .opportunity-icon-wrapper {
  background: linear-gradient(135deg, #ffe4cc 0%, #fff0e0 100%);
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.career-opportunity-card:hover .opportunity-icon-wrapper {
  background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3);
}

.career-opportunity-card .opportunity-icon-wrapper i {
  color: #ff8c00;
}

.career-opportunity-card:hover .opportunity-icon-wrapper i {
  color: #ffffff;
}

.career-opportunity-card .opportunity-title {
  color: #cc7000;
}

.career-opportunity-card:hover .opportunity-title {
  color: #ff8c00;
}

.career-opportunity-card .feature-item:hover {
  background: linear-gradient(135deg, #ffe4cc 0%, #fff0e0 100%);
}

.career-opportunity-card .feature-item i {
  color: #ff8c00;
}

.career-opportunity-card .opportunity-card-footer {
  background: #fffaf5;
  border-top-color: #ffe4cc;
}

.career-opportunity-card .button {
  background: linear-gradient(135deg, #ff8c00 0%, #cc7000 100%);
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
}

.career-opportunity-card .button:hover {
  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.5);
}

/* Call to Action Section */
.join-cta-section {
  background: linear-gradient(135deg, #0063ae 0%, #004b88 50%, #0063ae 100%);
  border-radius: 20px;
  padding: 30px 30px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 99, 174, 0.2);
  position: relative;
  overflow: hidden;
}

.join-cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: rotateGlow 20s linear infinite;
}

.cta-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cta-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #ffa500 0%, #ffb84d 100%);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.4);
  border: 2px solid transparent;
}

.cta-btn-primary:hover {
  background: linear-gradient(135deg, #ff9900 0%, #ffa500 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 165, 0, 0.5);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* Join Mission Forms Modal */
.join-form-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  overflow: hidden;
}

body.modal-open {
  overflow: hidden;
  padding-right: 0;
}

.join-form-modal.show {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.modal-dialog {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.modal-dialog::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.modal-content {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 3px solid #0063ae;
}

.modal-header {
  background: linear-gradient(135deg, #0063ae 0%, #0084d4 100%);
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #ffa500;
}

.modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: #ffa500;
  transform: rotate(90deg);
}

.modal-body {
  padding: 30px;
}

.modal-body .form-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #002b5b;
  margin-bottom: 10px;
}

.modal-body .form-control-enhanced {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #ffffff;
  font-family: inherit;
}

.modal-body .form-control-enhanced:focus {
  outline: none;
  border-color: #0063ae;
  box-shadow: 0 0 0 3px rgba(0, 99, 174, 0.1);
}

.modal-body .form-control-enhanced[type="file"] {
  padding: 12px 20px;
  cursor: pointer;
}

.modal-body .form-text {
  display: block;
  margin-top: 5px;
  font-size: 0.875rem;
  color: #6c757d;
}

.modal-body .text-danger {
  color: #dc3545;
}

/* Join Mission - Drupal dialog (jQuery UI) overrides */
.ui-dialog.cbc-join-form-dialog {
  width: min(92vw, 720px) !important;
  height: 80vh !important;
  max-height: 80vh !important;
  min-height: 80vh !important;
  top: 100px !important;
  left: 50% !important;
  transform: translateX(-50%);
  border: none;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-titlebar {
  background: linear-gradient(135deg, #004c8a 0%, #006ebf 60%, #0091dc 100%);
  color: #ffffff;
  padding: 1.25rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  border-bottom: 3px solid #ffa500;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  color: #ffffff;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-titlebar-close {
  position: static !important;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 0;
  opacity: 1;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-titlebar-close::before {
  content: '\00d7';
  font-size: 1.35rem;
  line-height: 1;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-titlebar-close:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  height: 100% !important;
  max-height: 100% !important;
  background: #ffffff;
}

.ui-dialog.cbc-join-form-dialog .modal-body {
  padding: 30px;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-buttonpane {
  /* padding: 1.25rem 2.5rem; */
  background: #f6f8fb;
  border: none;
  border-top: 1px solid #dde5ef;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-buttonpane .button,
.ui-dialog.cbc-join-form-dialog .ui-dialog-buttonpane button {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ui-dialog.cbc-join-form-dialog .ui-dialog-buttonpane .button:hover,
.ui-dialog.cbc-join-form-dialog .ui-dialog-buttonpane button:hover {
  box-shadow: 0 8px 20px rgba(255, 140, 0, 0.35);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .ui-dialog.cbc-join-form-dialog {
    width: 95vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
    min-height: 90vh !important;
    top: 5vh !important;
  }

  .ui-dialog.cbc-join-form-dialog .ui-dialog-titlebar {
    padding: 1rem 1.5rem;
  }

  .ui-dialog.cbc-join-form-dialog .modal-body {
    padding: 20px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

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

/* Responsive styles for modal */
@media (max-width: 768px) {
  .modal-dialog {
    width: 95%;
    max-height: 95vh;
  }

  .modal-header {
    padding: 20px;
  }

  .modal-title {
    font-size: 1.5rem;
  }

  .modal-body {
    padding: 20px;
  }
}

.cta-btn-primary i,
.cta-btn-secondary i {
  font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 992px) {
  .join-mission-section {
    padding: 50px 0 60px;
  }

  .opportunity-features {
    grid-template-columns: 1fr;
  }

  .cta-title {
    font-size: 1.8rem;
  }

  .cta-text {
    font-size: 1rem;
  }
}

/* Document Pages Carousel Styles */
.document-carousel-section {
  margin: 3rem 0;
}

.document-carousel-wrapper {
  position: relative;
  padding: 0 60px 50px;
}

.document-carousel-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 2rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.document-carousel-track::-webkit-scrollbar {
  display: none;
}

.document-page {
  flex: 0 0 100%;
  min-width: 100%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  padding: 3rem;
  transition: all 0.3s ease;
  scroll-snap-align: start;
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
}

.document-page:hover {
  box-shadow: 0 6px 25px rgba(0, 99, 174, 0.15);
  border-color: #0063ae;
}

.document-page-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.page-number {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 0.9rem;
  color: #999;
  font-weight: 500;
}

.page-content h3 {
  font-size: 2rem;
  color: #003b73;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.page-content p {
  font-size: 1.15rem;
  /* Increased for better readability */
  color: #555;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.page-content ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.page-content ul li {
  padding: 0.75rem 0;
  padding-left: 2rem;
  position: relative;
  font-size: 1.05rem;
  color: #444;
}

.page-content ul li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #0063ae;
  font-weight: bold;
  font-size: 1.2rem;
}

/* Karmayogi Cards Section */
.karmayogi-cards-section {
  /* margin: 4rem 0; */
  background: #f8faff;
  padding: 3rem 1.5rem;
  border-radius: 20px;
}

.karmayogi-card-wrapper {
  margin-bottom: 2rem;
}

.karmayogi-card {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.karmayogi-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 99, 174, 0.15);
  border-color: rgba(0, 99, 174, 0.2);
}

.karmayogi-card-img-container {
  position: relative;
  width: 100%;
  padding-top: 80%;
  /* Maintain aspect ratio */
  overflow: hidden;
}

.karmayogi-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.5s ease;
}

.karmayogi-card:hover .karmayogi-card-img {
  transform: scale(1.02);
}

.karmayogi-card-body {
  padding: 1.5rem;
  text-align: center;
  background: #fcfcfc;
  border-top: 1px solid #f0f0f0;
}

.karmayogi-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #003b73;
  margin-bottom: 0.5rem;
}

.karmayogi-card-subtitle {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1.5rem;
}

.karmayogi-card-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: #0063ae;
  color: #fff;
  border-radius: 50px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.karmayogi-card-btn:hover {
  background: #004b88;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.3);
}

@media (max-width: 991px) {
  .karmayogi-cards-section {
    padding: 2rem 1rem;
  }
}

.highlight-box {
  background: #f0f7ff;
  border-left: 4px solid #0063ae;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

.highlight-box strong {
  color: #003b73;
  font-size: 1.1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.stat-item {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  border: 2px solid #e0e0e0;
}

.stat-item strong {
  display: block;
  font-size: 2rem;
  color: #0063ae;
  margin-bottom: 0.5rem;
}

.cta-section {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.document-carousel-wrapper .carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 100;
}

.document-carousel-wrapper .carousel-controls button {
  pointer-events: all;
  position: absolute;
  background: #ffffff;
  border: 2px solid #0063ae;
  color: #0063ae;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 99, 174, 0.2);
}

.document-carousel-wrapper .carousel-controls button:hover {
  background: #0063ae;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.3);
}

.document-carousel-wrapper .carousel-controls #documentPrevBtn {
  left: 0;
}

.document-carousel-wrapper .carousel-controls #documentNextBtn {
  right: 0;
}

.carousel-indicators {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1rem;
  color: #666;
  font-weight: 500;
}

.carousel-indicators span {
  color: #0063ae;
  font-weight: 600;
}

/* PDF Page Styles */
.pdf-page-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
  border-radius: 0;
  min-height: auto;
  overflow: hidden;
}

.pdf-page-canvas {
  max-width: 100%;
  width: auto;
  height: auto;
  box-shadow: none;
  background: transparent;
  display: block;
  margin: 0;
  padding: 0;
}

/* Ensure images display properly */
.pdf-page-container img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0;
}

.pdf-loading-message {
  text-align: center;
  padding: 3rem;
  color: #6c757d;
  width: 100%;
}

.pdf-loading-message i {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

/* Video Section Styles */
.video-section {
  margin: 3rem 0;
}

.video-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.video-wrapper video {
  border-radius: 12px;
}

@media (max-width: 992px) {
  .document-carousel-wrapper {
    padding: 0 50px 50px;
  }

  .document-page {
    padding: 2rem;
    min-height: 400px;
  }

  .pdf-page-container {
    min-height: auto;
    padding: 0;
  }

  .page-content h3 {
    font-size: 1.6rem;
  }

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

@media (max-width: 768px) {
  .join-mission-section {
    padding: 40px 0 50px;
  }

  .join-mission-intro .intro-text {
    font-size: 1rem;
    padding: 0 15px;
  }

  .opportunity-card-header {
    padding: 30px 25px 20px;
  }

  .opportunity-icon-wrapper {
    width: 70px;
    height: 70px;
  }

  .opportunity-icon-wrapper i {
    font-size: 1.7rem;
  }

  .document-carousel-wrapper {
    padding: 0 40px 40px;
  }

  .document-page {
    padding: 1.5rem;
    min-height: 350px;
  }

  .pdf-page-container {
    min-height: auto;
    padding: 0;
  }

  .page-content h3 {
    font-size: 1.4rem;
  }

  .page-content p {
    font-size: 1rem;
  }

  .document-carousel-wrapper .carousel-controls button {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .opportunity-title {
    font-size: 1.3rem;
  }

  .opportunity-card-body {
    padding: 20px 25px;
  }

  .opportunity-description {
    font-size: 0.95rem;
  }

  .opportunity-card-footer {
    padding: 20px 25px 25px;
  }

  .join-cta-section {
    padding: 40px 25px;
    border-radius: 15px;
  }

  .cta-title {
    font-size: 1.6rem;
  }

  .cta-text {
    font-size: 0.95rem;
    margin-bottom: 25px;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .cta-btn-primary,
  .cta-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .join-mission-section {
    padding: 30px 0 40px;
  }

  .opportunity-card-header {
    padding: 25px 20px 15px;
  }

  .opportunity-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .opportunity-icon-wrapper i {
    font-size: 1.5rem;
  }

  .opportunity-title {
    font-size: 1.15rem;
  }

  .opportunity-card-body {
    padding: 15px 20px;
  }

  .opportunity-card-footer {
    padding: 15px 20px 20px;
  }

  .join-cta-section {
    padding: 30px 20px;
  }

  .cta-title {
    font-size: 1.4rem;
  }

  .cta-text {
    font-size: 0.9rem;
  }
}

/* ===========================================
   FINAL OVERRIDE FOR ALTERNATING TABLE ROW COLORS
   This must be at the end to override all other rules
   =========================================== */
table tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd),
table:not(.table-borderless) tbody tr:nth-child(odd),
tbody tr:nth-child(odd),
.mou-status-table tbody tr:nth-child(odd),
.circulars-table tbody tr:nth-child(odd),
.tenders-table tbody tr:nth-child(odd),
.table-bordered tbody tr:nth-child(odd),
.Karmayogi-section .impact-metrics-table-enhanced tbody tr:nth-child(odd),
.mou-status-table.collaboration-table tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

table tbody tr:nth-child(even),
.table tbody tr:nth-child(even),
table:not(.table-borderless) tbody tr:nth-child(even),
tbody tr:nth-child(even),
.mou-status-table tbody tr:nth-child(even),
.circulars-table tbody tr:nth-child(even),
.tenders-table tbody tr:nth-child(even),
.table-bordered tbody tr:nth-child(even),
.Karmayogi-section .impact-metrics-table-enhanced tbody tr:nth-child(even),
.mou-status-table.collaboration-table tbody tr:nth-child(even) {
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
}

/* ===========================================
   INLINE STYLES CONVERSION - Drupal Ready
   All inline styles moved to CSS with child selectors
   =========================================== */

/* Contact Hero Title - Program Span */
.contact-hero-title span {
  color: #ff6600;
  border-bottom: 3px solid #ffa500;
  padding-bottom: 5px;
  font-weight: 700;
}

/* Karmayogi Document Sections */
.karmayogi-content-wrapper>div {
  margin-top: 40px;
  /* margin-bottom: 50px; */
}

.karmayogi-content-wrapper>div:last-child {
  padding-bottom: 40px;
}

.karmayogi-content-wrapper>div .karmayogi-section-title {
  text-align: left;
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: #002b5b;
}

/* Karmayogi Metrics Table */
.karmayogi-metrics-table th:last-child {
  width: 150px;
  text-align: center;
}

.karmayogi-metrics-table td {
  color: #002b5b;
}

.karmayogi-metrics-table td:last-child {
  text-align: center;
}

.karmayogi-metrics-table td:last-child a {
  color: #0063ae;
  text-decoration: none;
  font-weight: 600;
}

.karmayogi-metrics-table td:last-child a:hover {
  text-decoration: underline;
}

/* Gallery Carousel Styles */
.karmayogi-section-title .bi {
  color: #0063ae;
}

.gallery-carousel-wrapper {
  margin: 30px 0;
  padding: 0 50px;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #00569A;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gallery-nav-btn:hover {
  background: #0063ae;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gallery-nav-prev {
  left: 0;
}

.gallery-nav-next {
  right: 0;
}

.gallery-carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 10px 0;
}

.gallery-carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 20px;
  will-change: transform;
}

.gallery-carousel-item {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
  width: calc(33.333% - 14px);
  padding-top: 10px;
}

.gallery-carousel-item .card {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
}

.gallery-carousel-item .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gallery-carousel-item .card-img-top {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 10px 10px 0 0;
}

.gallery-carousel-item .card:hover .card-img-top {
  transform: scale(1.05);
}

.gallery-carousel-item .card-body {
  padding: 15px;
}

.gallery-carousel-item .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #002b5b;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gallery-carousel-item .card-text {
  font-size: 1.05rem;
  /* Increased from 0.9rem for better readability */
  color: #6c757d;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gallery Carousel Responsive */
@media (max-width: 992px) {
  .gallery-carousel-item {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .gallery-carousel-wrapper {
    padding: 0 40px;
  }

  .gallery-carousel-item {
    flex: 0 0 100%;
    width: 100%;
  }

  .gallery-nav-btn {
    width: 35px;
    height: 35px;
  }
}

/* Tender Table Styles */
.tenders-table thead th {
  background-color: #0063ae;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-bottom: none;
  vertical-align: middle;
  padding: 15px;
  font-size: 0.95rem;
}

.tenders-table thead th:first-child {
  width: 80px;
  border-top-left-radius: 8px;
}

.tenders-table thead th:last-child {
  width: 200px;
  border-top-right-radius: 8px;
  border-right: none !important;
}

.tenders-table th:nth-child(2) {
  width: 200px;
}

.tenders-table th:nth-child(4),
.tenders-table th:nth-child(5) {
  width: 120px;
}

.tenders-table td {
  border-right: 1px solid #dee2e6;
}

.tenders-table td:last-child {
  border-right: none;
}

.archived-tenders-section {
  display: none;
}

.archived-tenders-section.show {
  display: block;
}

/* Karmayogi Section Title with Icon */
.karmayogi-section-title .bi {
  color: #0063ae;
}

.karmayogi-section-title.left-aligned {
  text-align: left;
  font-size: 1.8rem;
  margin-bottom: 25px;
}

/* Karmayogi Quote Block */
.karmayogi-quote-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
  border-left: 5px solid #0063ae;
}

.karmayogi-quote-text {
  font-style: normal;
  color: #002b5b;
}

.karmayogi-quote-text strong {
  color: #0063ae;
}

/* Important Information Card */
.important-info-card {
  background: #ffffff;
  border: 3px solid #dc3545;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  height: 100%;
}

.important-info-card .card-header {
  background: #dc3545;
  padding: 15px 20px;
}

.important-info-card .card-header h4 {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.important-info-card .card-header .bi {
  color: #ffffff;
  font-size: 1.2rem;
}

.important-info-card .card-body {
  padding: 20px;
  background: #ffffff;
}

.important-info-link {
  display: block;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.important-info-link:hover {
  background-color: #fff5f5;
  border-color: #dc3545;
}

.important-info-link h5 {
  color: #002b5b;
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.important-info-link .bi {
  font-size: 1rem;
  color: #dc3545;
}

.important-info-links-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Karmayogi Milestone Icon Gradients */
.karmayogi-milestone-icon.gradient-green {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.karmayogi-milestone-icon.gradient-blue {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
}

.karmayogi-milestone-icon.gradient-orange {
  background: linear-gradient(135deg, #ffa500 0%, #ffc107 100%);
}

/* Karmayogi Feature Block */
.karmayogi-feature-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
}

.karmayogi-feature-block.blue-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.95) 100%);
  border-top: 4px solid #0063ae;
}

.karmayogi-feature-block.green-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.95) 100%);
  border-top: 4px solid #28a745;
}

.karmayogi-feature-block.orange-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.95) 100%);
  border-top: 4px solid #ffa500;
}

.karmayogi-feature-block.purple-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.95) 100%);
  border-top: 4px solid #6f42c1;
}

.karmayogi-feature-desc strong {
  color: #0063ae;
}

/* Module Number Badge */
.module-number-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 15px;
}

.module-number-badge.blue {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
}

.module-number-badge.green {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.module-number-badge.orange {
  background: linear-gradient(135deg, #ffa500 0%, #ffc107 100%);
}

.module-number-badge.purple {
  background: linear-gradient(135deg, #6f42c1 0%, #9d4edd 100%);
}

.module-number-badge.red {
  background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
}

.karmayogi-feature-block.red-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.95) 100%);
  border-top: 4px solid #dc3545;
}

/* Icon Color Utilities */
.icon-blue {
  color: #ffffff;
}

.icon-dark-blue {
  color: #ffffff;
}

.icon-red {
  color: #ffffff;
}

.icon-white {
  color: #ffffff;
}

/* Video Card Styles */
.video-card {
  background: #ffffff;
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.video-card-header {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  padding: 20px;
  text-align: center;
}

.video-card-header h4 {
  color: #ffffff;
  font-weight: 600;
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.video-card-title {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  padding: 40px 20px;
  text-align: center;
  color: #ffffff;
}

.video-card-title h3 {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.4;
}

.video-card-body {
  padding: 20px;
  background: #f8f9fa;
  text-align: center;
}

.video-placeholder {
  background: #ffffff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}

.video-placeholder p {
  color: #6c757d;
  margin: 0;
  font-size: 0.9rem;
}

.video-placeholder p:last-child {
  margin: 5px 0 0 0;
  font-size: 0.85rem;
}

.video-watch-btn {
  display: inline-block;
  background: #0063ae;
  color: #ffffff;
  padding: 10px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.video-watch-btn:hover {
  background: #0099ff;
  color: #ffffff;
}

/* Video Gallery Page Styles */
.video-gallery-grid-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.video-gallery-card-page {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.video-gallery-card-page:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.video-container-page {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  margin-bottom: 0;
}

.video-container-page video {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.video-caption-page {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-title-page {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c53a2;
  margin-bottom: 12px;
  line-height: 1.4;
}

.video-description-page {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 0;
  flex: 1;
}

/* Responsive Video Gallery */
@media (max-width: 992px) {
  .video-gallery-grid-page {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .video-gallery-grid-page {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .video-container-page video {
    height: 250px;
  }

  .video-title-page {
    font-size: 1.1rem;
  }

  .video-description-page {
    font-size: 0.9rem;
  }
}

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

video {
  max-width: 100%;
  height: auto;
}


@media (max-width: 768px) {

  /* Make all tables scrollable horizontally on mobile */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
  }

  /* Remove scrolling from tables inside .table-responsive to avoid double scrollbars */
  .table-responsive table {
    display: table;
    overflow-x: visible;
  }

  /* Only add scrolling to tables that aren't wrapped in .table-responsive */
  table:not(.no-scroll) {
    width: 100%;
  }

  /* Prevent table from shrinking below minimum width */
  table {
    font-size: 0.9rem;
    min-width: 650px;
    /* Ensures table maintains readable width */
    table-layout: auto;
    /* Allow flexible column widths on mobile */
  }

  table th,
  table td {
    padding: 10px 8px;
    white-space: normal;
    /* Allow text wrapping within scrollable area */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Keep headers on single line if possible */
  table th {
    white-space: nowrap;
    font-size: 0.85rem;
  }

  /* Ensure adequate minimum widths for columns */
  table td {
    min-width: 80px;
    font-size: 0.85rem;
  }

  /* Style scrollbar to be almost transparent on mobile - only for wrappers */
  .table-responsive::-webkit-scrollbar {
    height: 6px;
  }

  .table-responsive::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }

  .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }

  .row>[class*="col-"] {
    margin-bottom: 1rem;
  }

  .form-control,
  .form-select {
    font-size: 16px;
  }

  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .btn-group .btn {
    width: auto;
  }

  .breadcrumb {
    font-size: 0.85rem;
    flex-wrap: wrap;
  }

  .breadcrumb-item {
    white-space: nowrap;
  }
}

@media (max-width: 480px) {

  /* Enhanced table scrolling for very small screens */
  table {
    font-size: 0.85rem;
    min-width: 600px;
    /* Maintain adequate width for very small screens */
    table-layout: auto;
  }

  table th,
  table td {
    padding: 8px 6px;
    font-size: 0.8rem;
    white-space: normal;
    word-wrap: break-word;
  }

  table th {
    white-space: nowrap;
    font-size: 0.75rem;
  }

  /* Collaboration table on very small screens */
  .mou-status-table.collaboration-table {
    min-width: 650px;
  }

  body {
    font-size: 14px;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.1rem;
  }

  h5 {
    font-size: 1rem;
  }

  /* Container spacing is handled by centralized rules above */
  /* Override only for very small screens if needed */
  #app-content .container,
  #app-content .container-fluid,
  #app-content section.container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .row>[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  table {
    font-size: 0.8rem;
  }

  table th,
  table td {
    padding: 6px 4px;
  }
}

@media (max-width: 768px) {
  .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
  }

  .modal-content {
    border-radius: 8px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 15px;
  }
}

iframe {
  max-width: 100%;
}

@media (max-width: 768px) {
  .carousel-item img {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

* {
  box-sizing: border-box;
}

p,
span,
div,
a,
li {
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* max-width: 100%; */
}

body,
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .show-mobile {
    display: none !important;
  }
}

.container,
.container-fluid,
section,
.content-section {
  font-size: 0.9rem;
}

p,
.text-muted,
.lead {
  font-size: 0.9rem;
}


.btn {
  font-size: 0.9rem !important;
}

.card-body,
.card-title,
.card-text {
  font-size: 1.05rem !important;
  /* Increased from 0.9rem for better readability */
}

.card-title {
  font-size: 1.1rem !important;
}

table,
.table,
.table th,
.table td {
  font-size: 0.85rem !important;
}

.form-control,
.form-select,
.form-label {
  font-size: 0.9rem !important;
}

ul,
ol,
li {
  font-size: 0.9rem !important;
}

.footer-wrapper,
.footer-about,
.footer-links,
.footer-contact {
  font-size: 0.9rem !important;
}

.footer-about h2,
.footer-links h3,
.footer-contact h3 {
  font-size: 1.1rem !important;
}

/* Gallery Page Styles */
.gallery-section {
  margin-bottom: 50px;
}

.gallery-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0063ae;
  padding-bottom: 15px;
  border-bottom: 3px solid #0063ae;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gallery-section-title i {
  font-size: 1.3rem;
}

.gallery-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 99, 174, 0.15);
  border-color: #0063ae;
}

.gallery-card .card-img-top {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-card:hover .card-img-top {
  transform: scale(1.05);
}

.gallery-card .card-body {
  padding: 20px;
}

.gallery-card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0063ae;
  margin-bottom: 10px;
}

.gallery-card .card-text {
  font-size: 1.05rem;
  /* Increased from 0.9rem for better readability */
  color: #6c757d;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .gallery-section-title {
    font-size: 1.3rem;
  }

  .gallery-card .card-img-top {
    height: 200px;
  }
}

/* FullCalendar Styling for #calendarView */
#calendarView {
  background: #f5f5f5;
  /* padding: 20px; */
  border-radius: 8px;
}

#calendarView .js-drupal-fullcalendar {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 25px;
  margin: 0;
}

#calendarView .fc-view-container {
  background: transparent !important;
}

/* Today button styling */
#calendarView .fc-today-button {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

#calendarView .fc-today-button:hover {
  background: #f3f4f6 !important;
  border-color: #0063ae !important;
  color: #0063ae !important;
}

#calendarView .fc-today-button:disabled {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* Header toolbar styling */
#calendarView .fc-toolbar {
  margin-bottom: 20px;
  padding-bottom: 15px;
}

#calendarView .fc-toolbar.fc-header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigation buttons - circular blue with white chevrons */
#calendarView .fc-prev-button,
#calendarView .fc-next-button {
  background: #0063ae !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 99, 174, 0.2) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

#calendarView .fc-prev-button:hover,
#calendarView .fc-next-button:hover {
  background: #005a9e !important;
  box-shadow: 0 3px 6px rgba(0, 99, 174, 0.3) !important;
  transform: translateY(-1px);
}

#calendarView .fc-prev-button:active,
#calendarView .fc-next-button:active {
  transform: translateY(0);
}

/* Icon container styling */
#calendarView .fc-prev-button .fc-icon,
#calendarView .fc-next-button .fc-icon {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Chevron icon specific styling */
#calendarView .fc-prev-button .fc-icon-chevron-left,
#calendarView .fc-next-button .fc-icon-chevron-right {
  color: #ffffff !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

/* Ensure span elements inside buttons are visible */
#calendarView .fc-prev-button span,
#calendarView .fc-next-button span {
  color: #ffffff !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure icon content is visible */
#calendarView .fc-prev-button .fc-icon::before,
#calendarView .fc-next-button .fc-icon::before {
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#calendarView .fc-prev-button .fc-icon-chevron-left::before {
  content: '\2039' !important;
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  display: inline-block !important;
}

#calendarView .fc-next-button .fc-icon-chevron-right::before {
  content: '\203A' !important;
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  display: inline-block !important;
}

/* Left button group styling */
#calendarView .fc-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#calendarView .fc-left .fc-button-group {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Ensure button content is visible */
#calendarView .fc-prev-button>*,
#calendarView .fc-next-button>* {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Month and year text styling */
#calendarView .fc-center h2 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #002b5b !important;
  margin: 0 !important;
  text-align: center;
}

/* View selector buttons styling (month, week, day, list) */
#calendarView .fc-right .fc-button-group {
  display: flex !important;
  gap: 5px !important;
}

#calendarView .fc-right .fc-button {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

#calendarView .fc-right .fc-button:hover {
  background: #f3f4f6 !important;
  border-color: #0063ae !important;
  color: #0063ae !important;
}

#calendarView .fc-right .fc-button.fc-button-active {
  background: #0063ae !important;
  border-color: #0063ae !important;
  color: #ffffff !important;
}

/* Hide list view button in calendar (extra option) */
#calendarView .fc-listYear-button {
  display: none !important;
}

/* Day of week headers - uppercase, blue, centered */
#calendarView .fc-day-header {
  text-align: center !important;
  padding: 10px 0 !important;
}

#calendarView .fc-day-header span {
  color: #0063ae !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
}

/* Month view day cells - white background, rounded corners, thin border */
#calendarView .fc-dayGridMonth-view .fc-day,
#calendarView .fc-dayGrid-view .fc-day {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  /* Let FullCalendar control height; avoid split boxes */
  min-height: 0 !important;
  padding: 0 !important;
}

/* Month view: remove special styling for past, future, other-month */
#calendarView .fc-dayGridMonth-view .fc-day.fc-past,
#calendarView .fc-dayGridMonth-view .fc-day.fc-future,
#calendarView .fc-dayGridMonth-view .fc-day.fc-other-month,
#calendarView .fc-dayGrid-view .fc-day.fc-past,
#calendarView .fc-dayGrid-view .fc-day.fc-future,
#calendarView .fc-dayGrid-view .fc-day.fc-other-month {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

/* Month view: highlight today */
#calendarView .fc-dayGridMonth-view .fc-day.fc-today,
#calendarView .fc-dayGrid-view .fc-day.fc-today {
  background: #f0f6ff !important;
  border: 2px solid #0063ae !important;
  border-radius: 6px !important;
}

#calendarView .fc-dayGridMonth-view .fc-day.fc-today .fc-day-number,
#calendarView .fc-dayGrid-view .fc-day.fc-today .fc-day-number {
  color: #0063ae !important;
  font-weight: 700 !important;
}

/* Month view: day number styling - centered */
#calendarView .fc-dayGridMonth-view .fc-day-number,
#calendarView .fc-dayGrid-view .fc-day-number {
  text-align: center !important;
  color: #374151 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

#calendarView .fc-dayGridMonth-view .fc-day-top,
#calendarView .fc-dayGrid-view .fc-day-top {
  text-align: center !important;
}

#calendarView .fc-dayGridMonth-view .fc-day-top a.fc-day-number,
#calendarView .fc-dayGrid-view .fc-day-top a.fc-day-number {
  text-align: center !important;
  display: inline-block !important;
}

/* Month view: remove any background colors from day cells */
#calendarView .fc-dayGridMonth-view .fc-day.fc-widget-content,
#calendarView .fc-dayGrid-view .fc-day.fc-widget-content {
  /* background: #ffffff !important; */
}

/* Month view: ensure consistent spacing between day cells */
#calendarView .fc-dayGridMonth-view .fc-bg table,
#calendarView .fc-dayGrid-view .fc-bg table {
  /* Use default spacing so background and content align */
  border-spacing: 0 !important;
}

#calendarView .fc-dayGridMonth-view .fc-content-skeleton table,
#calendarView .fc-dayGrid-view .fc-content-skeleton table {
  border-spacing: 0 !important;
}

/* Make top and bottom borders transparent, keep left and right borders visible */
#calendarView .fc-dayGridMonth-view .fc-row .fc-content-skeleton table,
#calendarView .fc-dayGrid-view .fc-row .fc-content-skeleton table {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

#calendarView .fc-dayGridMonth-view .fc-row .fc-content-skeleton td,
#calendarView .fc-dayGrid-view .fc-row .fc-content-skeleton td {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: #e5e7eb !important;
  border-right-color: #e5e7eb !important;
}

#calendarView .fc-dayGridMonth-view .fc-row .fc-mirror-skeleton td,
#calendarView .fc-dayGrid-view .fc-row .fc-mirror-skeleton td {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: #e5e7eb !important;
  border-right-color: #e5e7eb !important;
}

/* Month view: add gap around each day box using padding on rows instead of table spacing */
#calendarView .fc-dayGridMonth-view .fc-day-grid .fc-row,
#calendarView .fc-dayGrid-view .fc-day-grid .fc-row {
  padding: 4px 2px !important;
}

/* Month view: slight inner padding inside each day cell for content */
#calendarView .fc-dayGridMonth-view .fc-day-grid .fc-row .fc-content-skeleton td,
#calendarView .fc-dayGrid-view .fc-day-grid .fc-row .fc-content-skeleton td {
  /* padding: 8px 6px 10px 6px !important; */
  overflow: visible !important;
}

/* Ensure event cells don't clip content */
#calendarView .fc-dayGridMonth-view .fc-day-grid .fc-row .fc-content-skeleton td .fc-event-container,
#calendarView .fc-dayGrid-view .fc-day-grid .fc-row .fc-content-skeleton td .fc-event-container {
  overflow: visible !important;
  position: relative !important;
}

/* Event styling - keep events visible but styled */
#calendarView .fc-event {
  border-radius: 4px !important;
  padding: 4px 6px !important;
  margin: 2px 0 !important;
  font-size: 0.8rem !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
}

/* Event title/text should be fully visible */
#calendarView .fc-event .fc-title,
#calendarView .fc-event .fc-content {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Event container should not hide content */
#calendarView .fc-event-container {
  overflow: visible !important;
  position: relative !important;
}

/* Day cells should allow events to be visible */
#calendarView .fc-dayGridMonth-view .fc-day,
#calendarView .fc-dayGrid-view .fc-day {
  overflow: visible !important;
}

/* Event content wrapper */
#calendarView .fc-day-grid-event {
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Remove any hover effects on day cells */
#calendarView .fc-day:hover {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}


/* Ensure proper calendar grid layout - allow events to be visible */
#calendarView .fc-day-grid-container {
  overflow: visible !important;
}

/* Scroller should allow vertical scrolling but not hide content */
#calendarView .fc-scroller {
  overflow-y: auto !important;
  overflow-x: visible !important;
}

/* Week View Styling (timeGridWeek) */
#calendarView .fc-timeGridWeek-view,
#calendarView .fc-timeGrid-view {
  background: #ffffff !important;
}

#calendarView .fc-timeGridWeek-view .fc-time-grid,
#calendarView .fc-timeGrid-view .fc-time-grid {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
}

#calendarView .fc-timeGridWeek-view .fc-time-slot,
#calendarView .fc-timeGrid-view .fc-time-slot {
  border-top: 1px solid #f0f0f0 !important;
  height: 60px !important;
}

#calendarView .fc-timeGridWeek-view .fc-day,
#calendarView .fc-timeGrid-view .fc-day {
  border-right: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

#calendarView .fc-timeGridWeek-view .fc-day-header,
#calendarView .fc-timeGrid-view .fc-day-header {
  background: #f9fafb !important;
  border-bottom: 2px solid #e5e7eb !important;
  padding: 12px !important;
  font-weight: 600 !important;
  color: #0063ae !important;
  text-transform: uppercase !important;
}

#calendarView .fc-timeGridWeek-view .fc-col-header-cell,
#calendarView .fc-timeGrid-view .fc-col-header-cell {
  border-right: 1px solid #e5e7eb !important;
}

#calendarView .fc-timeGridWeek-view .fc-event,
#calendarView .fc-timeGrid-view .fc-event {
  border-radius: 4px !important;
  padding: 4px 8px !important;
  margin: 2px 4px !important;
  font-size: 0.85rem !important;
  border-left-width: 4px !important;
}

#calendarView .fc-timeGridWeek-view .fc-timegrid-col,
#calendarView .fc-timeGrid-view .fc-timegrid-col {
  border-right: 1px solid #e5e7eb !important;
}

#calendarView .fc-timeGridWeek-view .fc-timegrid-slot,
#calendarView .fc-timeGrid-view .fc-timegrid-slot {
  border-top: 1px solid #f0f0f0 !important;
}

#calendarView .fc-timeGridWeek-view .fc-timegrid-slot-label,
#calendarView .fc-timeGrid-view .fc-timegrid-slot-label {
  color: #6b7280 !important;
  font-size: 0.75rem !important;
  padding: 4px 8px !important;
}

/* Day View Styling (timeGridDay) */
#calendarView .fc-timeGridDay-view {
  background: #ffffff !important;
}

#calendarView .fc-timeGridDay-view .fc-time-grid {
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
}

#calendarView .fc-timeGridDay-view .fc-day-header {
  background: #f9fafb !important;
  border-bottom: 2px solid #e5e7eb !important;
  padding: 12px !important;
  font-weight: 600 !important;
  color: #0063ae !important;
  text-transform: uppercase !important;
}

/* Ensure week view time slots are visible */
#calendarView .fc-timeGridWeek-view .fc-scroller,
#calendarView .fc-timeGrid-view .fc-scroller {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 600px !important;
}

#calendarView .fc-timeGridWeek-view .fc-timegrid-body,
#calendarView .fc-timeGrid-view .fc-timegrid-body {
  min-height: 400px !important;
}

/* Week view column headers */
#calendarView .fc-timeGridWeek-view .fc-col-header-cell,
#calendarView .fc-timeGrid-view .fc-col-header-cell {
  padding: 10px 8px !important;
}

/* Week view now indicator */
#calendarView .fc-timeGridWeek-view .fc-timegrid-now-indicator-line,
#calendarView .fc-timeGrid-view .fc-timegrid-now-indicator-line {
  border-color: #0063ae !important;
  border-width: 2px !important;
}

/* Week view event styling */
#calendarView .fc-timeGridWeek-view .fc-event-time,
#calendarView .fc-timeGrid-view .fc-event-time {
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

#calendarView .fc-timeGridWeek-view .fc-event-title,
#calendarView .fc-timeGrid-view .fc-event-title {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* ============================================
   Event Details Page Styles
   ============================================ */

.event-details-section {
  padding: 60px 0;
  background: #fff;
  min-height: calc(100vh - 180px);
}

.event-details-section .container {
  max-width: 1200px;
}

/* Event Images Gallery - Flexbox Layout - Max 3 Columns */
.event-images-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  width: 100%;
}

.event-image-item {
  flex: 0 1 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.event-image-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 99, 174, 0.2);
}

.event-image-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.event-image-item:hover img {
  transform: scale(1.05);
}

/* Single image takes full width */
.event-images-gallery:has(.event-image-item:only-child) .event-image-item {
  flex: 0 1 100%;
  max-width: 100%;
}

.event-images-gallery:has(.event-image-item:only-child) .event-image-item img {
  height: 400px;
}

/* Two images layout - each takes 50% */
.event-images-gallery:has(.event-image-item:nth-child(2):last-child) .event-image-item {
  flex: 0 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
}

/* Style for rendered field content (fallback) - Max 3 Columns */
.event-images-gallery-rendered .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.event-images-gallery-rendered .field__item {
  flex: 0 1 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.event-images-gallery-rendered .field__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 99, 174, 0.2);
}

.event-images-gallery-rendered .field__item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.event-images-gallery-rendered .field__item:hover img {
  transform: scale(1.05);
}

/* Single image in rendered content */
.event-images-gallery-rendered .field__items:has(.field__item:only-child) .field__item {
  flex: 0 1 100%;
  max-width: 100%;
}

.event-images-gallery-rendered .field__items:has(.field__item:only-child) .field__item img {
  height: 400px;
}

/* Two images in rendered content */
.event-images-gallery-rendered .field__items:has(.field__item:nth-child(2):last-child) .field__item {
  flex: 0 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
}

/* Event Meta Information */
.event-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 0;
  border-bottom: none;
}

.event-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  font-size: 0.95rem;
  font-weight: 400;
  padding-right: 20px;
  position: relative;
}

.event-meta-item:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: 8px;
  color: #0063ae;
  font-size: 1rem;
  font-weight: bold;
}

.event-meta-item i {
  color: #0063ae;
  font-size: 1rem;
  width: 18px;
  text-align: center;
}

.event-meta-item span {
  color: #6c757d;
}

/* Event Title */
.event-article-title {
  font-size: 2rem;
  font-weight: 700;
  color: #004085;
  margin-bottom: 20px;
  margin-top: 0;
  line-height: 1.4;
  padding-bottom: 0;
  border-bottom: none;
}

/* Event Content */
.event-article-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  line-height: 1.6;
  color: #212529;
}

.event-article-content p {
  margin-bottom: 0;
  font-size: 1rem;
  color: #212529;
}

.event-article-content p:last-child {
  margin-bottom: 0;
}

.event-article-content h2,
.event-article-content h3,
.event-article-content h4 {
  color: #0063ae;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 600;
}

.event-article-content h2 {
  font-size: 1.6rem;
}

.event-article-content h3 {
  font-size: 1.4rem;
}

.event-article-content h4 {
  font-size: 1.2rem;
}

.event-article-content ul,
.event-article-content ol {
  margin: 20px 0;
  padding-left: 30px;
}

.event-article-content li {
  margin-bottom: 10px;
  color: #444;
}

.event-article-content a {
  color: #0063ae;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.event-article-content a:hover {
  color: #004b88;
}

.event-article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}

.event-article-content blockquote {
  border-left: 4px solid #0063ae;
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  color: #666;
}

/* Responsive Design */
@media (min-width: 993px) {

  /* Ensure max 3 columns on desktop */
  .event-image-item {
    flex: 0 1 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
  }

  .event-images-gallery-rendered .field__item {
    flex: 0 1 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
  }
}

@media (max-width: 992px) {
  .event-images-gallery {
    gap: 15px;
  }

  .event-image-item {
    flex: 0 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-width: 0;
  }

  .event-image-item img {
    height: 250px;
  }

  .event-images-gallery-rendered .field__item {
    flex: 0 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-width: 0;
  }

  .event-article-title {
    font-size: 1.8rem;
  }

  .event-article-content {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .event-details-section {
    padding: 40px 0;
  }

  .event-images-gallery {
    gap: 15px;
  }

  .event-image-item {
    flex: 0 1 100%;
    max-width: 100%;
    min-width: 0;
  }

  .event-image-item img {
    height: 250px;
  }

  .event-images-gallery:has(.event-image-item:only-child) .event-image-item img {
    height: 300px;
  }

  .event-images-gallery-rendered .field__item {
    flex: 0 1 100%;
    max-width: 100%;
    min-width: 0;
  }

  .event-article-meta {
    flex-direction: column;
    gap: 15px;
    padding: 15px 0;
  }

  .event-article-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    padding-bottom: 0;
  }

  .event-article-content {
    padding: 0;
    margin-top: 0;
  }

  .event-article-content h2 {
    font-size: 1.3rem;
  }

  .event-article-content h3 {
    font-size: 1.2rem;
  }

  .event-article-content h4 {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .event-details-section {
    padding: 30px 0;
  }

  .event-images-gallery {
    margin-bottom: 30px;
    gap: 12px;
  }

  .event-image-item {
    flex: 0 1 100%;
    max-width: 100%;
  }

  .event-image-item img {
    height: 200px;
  }

  .event-images-gallery:has(.event-image-item:only-child) .event-image-item img {
    height: 250px;
  }

  .event-images-gallery-rendered .field__item {
    flex: 0 1 100%;
    max-width: 100%;
  }

  .event-article-title {
    font-size: 1.3rem;
  }

  .event-article-content {
    padding: 0;
  }

  .event-meta-item {
    font-size: 0.9rem;
  }
}

.page-hero-section .text-formatted {
  color: #ffffff;
}

/* ===========================================
   WHAT'S NEW LIST STYLES
   =========================================== */

.karmayogi-section-fullwidth:has(.whats-new-list) {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.karmayogi-section-fullwidth .whats-new-list {
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
}

.karmayogi-section-fullwidth .whats-new-item {
  position: relative;
  margin-bottom: 24px;
  padding: 0;
  width: 100%;
  display: block;
  background: #ffffff;
  border-left: 4px solid #0063ae;
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(0, 99, 174, 0.08);
  transition: all 0.3s ease;
}

.karmayogi-section-fullwidth .whats-new-item:hover {
  box-shadow: 0 4px 16px rgba(0, 99, 174, 0.15);
  transform: translateY(-2px);
  border-left-color: #004b88;
}

.karmayogi-section-fullwidth .whats-new-item:last-child {
  margin-bottom: 0;
}

.karmayogi-section-fullwidth .whats-new-content {
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  position: relative;
  padding-right: 60px;
}

.karmayogi-section-fullwidth .whats-new-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #002b5b !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  border: none !important;
  background: none !important;
}

.karmayogi-section-fullwidth .whats-new-date {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: #6c757d !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.karmayogi-section-fullwidth .whats-new-date::before {
  content: '\f073';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #0063ae;
  font-size: 0.85rem;
}

.karmayogi-section-fullwidth .new-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

.karmayogi-section-fullwidth .badge-text {
  display: inline-block;
  background: linear-gradient(135deg, #0063ae 0%, #004b88 100%);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.25);
  animation: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.karmayogi-section-fullwidth .badge-text:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 99, 174, 0.35);
}

@media (max-width: 768px) {
  .karmayogi-section-fullwidth .whats-new-item {
    margin-bottom: 20px !important;
    padding: 20px !important;
  }

  .karmayogi-section-fullwidth .whats-new-content {
    padding-right: 0 !important;
  }

  .karmayogi-section-fullwidth .whats-new-title {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  .karmayogi-section-fullwidth .whats-new-date {
    font-size: 0.85rem !important;
  }

  .karmayogi-section-fullwidth .new-badge {
    position: relative;
    display: inline-block;
    top: 0;
    right: 0;
    margin-bottom: 12px;
  }
}

/* ===========================================
   MEDIA CORNER PAGE STYLES
   =========================================== */

.media-corner-page-section {
  background: #ffffff;
  padding: 60px 0;
  min-height: 60vh;
}

.media-corner-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.media-corner-intro {
  font-size: 1rem;
  color: #333333;
  line-height: 1.6;
  margin: 0 0 40px 0;
  padding: 0;
  text-align: left;
}

.media-releases-list {
  margin: 0;
  padding: 0;
}

.media-release-item {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #0063ae;
  border-radius: 8px;
  padding: 28px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.media-release-item:last-child {
  margin-bottom: 0;
}

.media-release-item:hover {
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.15);
  border-left-color: #004b88;
  transform: translateY(-2px);
}

.media-release-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0063ae;
  margin: 0 0 16px 0;
  padding: 0;
  line-height: 1.5;
}

.media-release-link {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.media-release-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0063ae;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(0, 99, 174, 0.05);
}

.media-release-link a i {
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}

.media-release-link a:hover {
  color: #ffffff;
  background: #0063ae;
  text-decoration: none;
  transform: translateX(2px);
}

.media-release-link a:hover i {
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .media-corner-page-section {
    padding: 40px 0;
  }

  .media-corner-content {
    padding: 0 15px;
  }

  .media-corner-intro {
    font-size: 0.95rem;
    margin-bottom: 30px;
  }

  .media-release-item {
    padding: 20px;
    margin-bottom: 18px;
  }

  .media-release-title {
    font-size: 1rem;
    line-height: 1.4;
  }

  .media-release-link {
    font-size: 0.85rem;
  }
}

/* ===========================================
   NEWSLETTERS LIST PAGE STYLES
   =========================================== */

.karmayogi-section-fullwidth .newsletters-list {
  background: #ffffff;
  padding: 0;
  margin: 0;
}

.newsletter-item {
  margin-bottom: 30px;
  padding: 0;
}

.newsletter-item:last-child {
  margin-bottom: 0;
}

.newsletter-content {
  padding: 0;
  margin: 0;
}

.newsletter-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000000;
  margin: 0 0 8px 0;
  padding: 0;
  line-height: 1.5;
}

.newsletter-title a {
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease;
}

.newsletter-title a:hover {
  color: #0063ae;
  text-decoration: underline;
}

.newsletter-date {
  font-size: 0.9rem;
  font-weight: 400;
  color: #666666;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .newsletter-item {
    margin-bottom: 25px;
  }

  .newsletter-title {
    font-size: 1rem;
    line-height: 1.4;
  }

  .newsletter-date {
    font-size: 0.85rem;
  }
}

/* ===========================================
   TEAM MEMBER DETAIL PAGE STYLES
   =========================================== */

.team-detail-page {
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  padding: 60px 0;
  min-height: calc(100vh - 200px);
}

.team-detail-wrapper {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 99, 174, 0.1);
  padding: 50px;
  margin: 0 auto;
}

.team-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 2px solid #f0f6ff;
}

.team-detail-photo {
  flex-shrink: 0;
  width: 280px;
  max-height: 250px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 99, 174, 0.15);
  background: #f8f9fa;
  position: relative;
}

.team-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.team-detail-photo:hover img {
  transform: scale(1.05);
}

.team-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.team-detail-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.team-detail-role {
  font-size: 1.3rem;
  font-weight: 600;
  color: #0063ae;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.team-detail-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  color: #333333;
  line-height: 1.6;
}

.contact-item a {
  color: #0063ae;
  text-decoration: none;
  transition: all 0.2s ease;
}

.contact-item a:hover {
  color: #004b88;
  text-decoration: underline;
}

.contact-email::before {
  content: '\f0e0';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #0063ae;
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.contact-phone::before {
  content: '\f095';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #0063ae;
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.contact-address::before {
  content: '\f3c5';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #0063ae;
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.team-detail-bio {
  margin: 0;
  padding: 40px;
  background: #f8faff;
  border-radius: 12px;
  border-left: 5px solid #0063ae;
  font-size: 1.1rem;
  line-height: 1.9;
  color: #333333;
}

.team-detail-bio p {
  margin: 0 0 20px 0;
  font-size: 1.1rem;
  line-height: 1.9;
  color: #333333;
}

.team-detail-bio p:last-child {
  margin-bottom: 0;
}

.team-detail-bio h2,
.team-detail-bio h3,
.team-detail-bio h4 {
  color: #002b5b;
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.team-detail-bio h2 {
  font-size: 1.8rem;
}

.team-detail-bio h3 {
  font-size: 1.5rem;
}

.team-detail-bio h4 {
  font-size: 1.3rem;
}

.team-detail-bio h2:first-child,
.team-detail-bio h3:first-child,
.team-detail-bio h4:first-child {
  margin-top: 0;
}

.team-detail-bio ul,
.team-detail-bio ol {
  margin: 20px 0;
  padding-left: 35px;
}

.team-detail-bio li {
  margin-bottom: 12px;
  color: #333333;
  line-height: 1.7;
}

.team-detail-bio a {
  color: #0063ae;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.team-detail-bio a:hover {
  color: #004b88;
}

.team-detail-bio img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}

.team-detail-bio blockquote {
  border-left: 4px solid #0063ae;
  padding-left: 20px;
  margin: 25px 0;
  font-style: italic;
  color: #555555;
}

/* Responsive Design */
@media (max-width: 992px) {
  .team-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }

  .team-detail-photo {
    width: 240px;
    height: 240px;
  }

  .team-detail-contact {
    align-items: center;
  }
}

@media (max-width: 768px) {
  .team-detail-page {
    padding: 40px 0;
  }

  .team-detail-wrapper {
    padding: 30px 20px;
    border-radius: 12px;
  }

  .team-detail-header {
    gap: 25px;
    margin-bottom: 30px;
    padding-bottom: 30px;
  }

  .team-detail-photo {
    width: 200px;
    height: 200px;
  }

  .team-detail-name {
    font-size: 1.8rem;
  }

  .team-detail-role {
    font-size: 1.15rem;
  }

  .contact-item {
    font-size: 0.95rem;
    justify-content: center;
  }

  .team-detail-bio {
    padding: 25px 20px;
    font-size: 1rem;
  }

  .team-detail-bio p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .team-detail-bio h2 {
    font-size: 1.5rem;
  }

  .team-detail-bio h3 {
    font-size: 1.3rem;
  }

  .team-detail-bio h4 {
    font-size: 1.1rem;
  }
}

/* ===========================================
   OPINIONS DO MATTER DETAIL PAGE STYLES
   =========================================== */

.opinion-detail-page {
  background: #f5f5f5;
  padding: 60px 0;
  min-height: calc(100vh - 200px);
}

/* Blue Header Card */
.opinion-header-card {
  background: #0063ae;
  border-radius: 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px 30px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.opinion-author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

.opinion-author-name {
  font-size: 1.5rem !important;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  padding: 0;
  line-height: 0.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.opinion-author-designation {
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.opinion-author-photo {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  position: relative;
  z-index: 2;
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.opinion-author-photo img,
.opinion-author-photo picture img,
.opinion-author-photo .field__item img,
.opinion-author-photo .field__items img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.opinion-author-photo picture,
.opinion-author-photo .field__item,
.opinion-author-photo .field__items {
  width: 100%;
  height: 100%;
  display: block;
}

/* White Content Card */
.opinion-content-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 50px 60px;
  margin-top: 0;
}

.opinion-article-title {
  font-size: 2rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.opinion-title-separator {
  border: none;
  border-top: 2px solid #bbbbbb;
  margin: 0 0 30px 0;
  padding: 0;
  width: 100%;
}

.opinion-article-content {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.opinion-article-content p {
  margin: 0 0 20px 0;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #7f7f7f;
}

.opinion-article-content p:last-child {
  margin-bottom: 0;
}

.opinion-article-content h2,
.opinion-article-content h3,
.opinion-article-content h4 {
  color: #002b5b;
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.opinion-article-content h2 {
  font-size: 1.8rem;
}

.opinion-article-content h3 {
  font-size: 1.5rem;
}

.opinion-article-content h4 {
  font-size: 1.3rem;
}

.opinion-article-content h2:first-child,
.opinion-article-content h3:first-child,
.opinion-article-content h4:first-child {
  margin-top: 0;
}

.opinion-article-content ul,
.opinion-article-content ol {
  margin: 20px 0;
  padding-left: 35px;
}

.opinion-article-content li {
  margin-bottom: 12px;
  color: #333333;
  line-height: 1.7;
}

.opinion-article-content a {
  color: #0063ae;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.opinion-article-content a:hover {
  color: #004b88;
}

.opinion-article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}

.opinion-article-content blockquote {
  border-left: 4px solid #0063ae;
  padding-left: 20px;
  margin: 25px 0;
  font-style: italic;
  color: #555555;
}

/* Responsive Design */
@media (max-width: 992px) {
  .opinion-header-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
    padding: 40px 30px;
  }

  .opinion-author-photo {
    width: 180px;
    height: 180px;
  }

  .opinion-content-card {
    padding: 40px 30px;
  }

  .opinion-article-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  .opinion-title-separator {
    margin-bottom: 25px;
  }
}

@media (max-width: 768px) {
  .opinion-detail-page {
    padding: 40px 0;
  }

  .opinion-header-card {
    padding: 30px 20px;
    border-radius: 12px;
    gap: 25px;
  }

  .opinion-author-photo {
    width: 150px;
    height: 150px;
  }

  .opinion-author-name {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .opinion-author-designation {
    font-size: 0.95rem;
  }

  .opinion-content-card {
    padding: 30px 20px;
    border-radius: 12px;
  }

  .opinion-article-title {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .opinion-title-separator {
    margin-bottom: 20px;
  }

  .opinion-article-content {
    font-size: 1rem;
  }

  .opinion-article-content p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .opinion-article-content h2 {
    font-size: 1.5rem;
  }

  .opinion-article-content h3 {
    font-size: 1.3rem;
  }

  .opinion-article-content h4 {
    font-size: 1.1rem;
  }
}

/* ===========================================
   OPINIONS DO MATTER LISTING PAGE STYLES
   =========================================== */

.opinions-grid-section {
  padding: 60px 0;
  background: #f5f5f5;
}

.opinion-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  height: 100%;
  border: none;
}

.opinion-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.opinion-card-image {
  width: 100%;
  aspect-ratio: 16/16;
  height: auto;
  overflow: hidden;
  background: #f8f9fa;
  flex-shrink: 0;
  position: relative;
}

.opinion-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.5s ease;
}

.opinion-card:hover .opinion-card-image img {
  transform: scale(1.05);
}

.opinion-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
  min-height: 0;
}

.opinion-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #002b5b;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opinion-card-author {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0063ae;
  margin: 0 0 6px 0;
  padding: 0;
  line-height: 1.4;
}

.opinion-card-designation {
  font-size: 0.875rem;
  font-weight: 400;
  color: #6c757d;
  margin: 0 0 14px 0;
  padding: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opinion-card-description {
  color: #495057;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0;
}

.opinion-card-description *,
.opinion-card-description p,
.opinion-card-description div,
.opinion-card-description span {
  margin: 0;
  display: inline;
  max-width: 100%;
  line-height: inherit;
  color: inherit;
}

.opinion-card-description p {
  margin-bottom: 0;
  display: inline;
}

.opinion-card-description p:not(:last-child)::after {
  content: ' ';
  white-space: normal;
}

.opinion-card-description br {
  display: none;
}

.opinion-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0063ae;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.opinion-card-link:hover {
  color: #004b88;
  gap: 12px;
}

.opinion-card-link i {
  transition: transform 0.3s ease;
  font-size: 0.85rem;
}

.opinion-card-link:hover i {
  transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 992px) {
  .opinions-grid-section {
    padding: 40px 0;
  }
}

@media (max-width: 768px) {
  .opinion-card-image {
    height: 200px;
  }

  .opinion-card-content {
    padding: 15px;
  }

  .opinion-card-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }

  .opinion-card-author {
    font-size: 0.9rem;
    margin-bottom: 5px;
  }

  .opinion-card-designation {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .opinion-card-description {
    font-size: 0.875rem;
    margin-bottom: 14px;
    -webkit-line-clamp: 3;
  }

  .opinion-card-link {
    padding-top: 14px;
    font-size: 0.85rem;
  }
}

/* ===========================================
   DRUPAL PAGER STYLES
   =========================================== */

.pager {
  padding: 0px 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa !important;
}

.pager__items {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.pager__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #495057;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pager__item a:hover {
  background: #f8f9fa;
  border-color: #0063ae;
  color: #0063ae;
}

.pager__item.is-active a {
  background: linear-gradient(135deg, #0063ae 0%, #00569A 100%);
  border-color: #0063ae;
  color: #ffffff;
  font-weight: 600;
  cursor: default;
}

.pager__item.is-active a:hover {
  background: linear-gradient(135deg, #0063ae 0%, #00569A 100%);
  border-color: #0063ae;
  color: #ffffff;
}

.pager__item--next a,
.pager__item--last a {
  padding: 0 16px;
  font-weight: 600;
}

.pager__item--next a:hover,
.pager__item--last a:hover {
  background: #0063ae;
  border-color: #0063ae;
  color: #ffffff;
}

.pager__item span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pager__item span[aria-hidden="true"] {
  display: inline-block;
}

/* Responsive Design */
@media (max-width: 768px) {
  .pager {
    margin: 30px 0;
  }

  .pager__items {
    gap: 6px;
  }

  .pager__item a {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.85rem;
  }

  .pager__item--next a,
  .pager__item--last a {
    padding: 0 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .pager__items {
    gap: 4px;
  }

  .pager__item a {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 0.8rem;
  }

  .pager__item--next a,
  .pager__item--last a {
    padding: 0 10px;
    font-size: 0.75rem;
  }
}

/* ===========================================
   PHOTO GALLERY PAGE STYLES
   =========================================== */

/* Gallery Section Wrapper */
.gallery-section {
  position: relative;
  width: 100%;
}

.gallery-section-title {
  color: #002b5b;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #eaeaea;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gallery-section-title i {
  color: #0063ae;
}

/* Gallery Card */
.gallery-card {
  border: none;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 99, 174, 0.15);
}

/* Card Image */
.gallery-card .card-img-top {
  height: 220px;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-card:hover .card-img-top {
  transform: scale(1.05);
}

/* Card Body */
.gallery-card .card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gallery-card .card-title {
  color: #002b5b;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.gallery-card .card-text {
  color: #555555;
  font-size: 0.95rem;
  line-height: 1.6;
}

.gallery-card .card-text p {
  margin-bottom: 0.5rem;
}

/* Ensure links wrapping cards behave correctly */
.gallery-section a {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.view-photo-gallery .col-md-4 {
  margin-bottom: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gallery-card .card-img-top {
    height: 200px;
  }

  .gallery-section-title {
    font-size: 1.5rem;
  }
}

/* ===========================================
   PHOTO GALLERY DETAIL PAGE STYLES (Node)
   =========================================== */

.node--type-photo-gallery {
  padding: 30px 20px 60px;
  max-width: 1400px;
  /* Or use a standard container width like 1320px */
  margin: 0 auto;
  width: 100%;
}

/* Images Grid Container */
.node--type-photo-gallery .field--name-field-images.field__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.node--type-photo-gallery .field--name-field-images .field__item {
  margin: 0;
  display: flex;
}

/* Image Styles */
.node--type-photo-gallery .field--name-field-images img {
  width: 100%;
  height: 220px;
  /* Consistent height for grid alignment */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  display: block;
  background-color: #f0f0f0;
}

.node--type-photo-gallery .field--name-field-images img:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 99, 174, 0.2);
}

/* Colorbox Link Wrapper */
/* Colorbox Link Wrapper */
.node--type-photo-gallery .cboxElement {
  display: block;
  width: 100%;
  text-decoration: none;
  cursor: zoom-in;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* Hover Title Overlay */
.node--type-photo-gallery .cboxElement::after {
  content: attr(title);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  box-sizing: border-box;
}

.node--type-photo-gallery .cboxElement:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .node--type-photo-gallery .field--name-field-images .field__items {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    gap: 16px;
  }

  .node--type-photo-gallery .field--name-field-images img {
    height: auto;
    max-height: 400px;
  }
}

/* Colorbox Image Full Width/Height Fix */
#colorbox .cboxPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Collaboration Grid Layout */
.collab-grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.collab-grid-row>a {
  display: block;
  flex: 0 0 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
  text-decoration: none;
}

.collab-grid-row .collab-box {
  width: 100%;
  height: 100%;
  flex: 1;
  /* Reset flex if inherited */
  margin-bottom: 0;
  /* Let gap handle spacing */
}

/* Responsive Grid */
@media (max-width: 1200px) {
  .collab-grid-row>a {
    flex: 0 0 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
  }
}

@media (max-width: 992px) {
  .collab-grid-row>a {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .collab-grid-row>a {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* === VERTICAL SEPARATORS FOR TABLE BODY === */
.mou-status-table td {
  border-right: 1px solid #dee2e6;
}

.mou-status-table td:last-child {
  border-right: none;
}

/* Remove vertical line from first column only for Partner/Collaboration tables */
.partner-org-table td:first-child {
  border-right: none !important;
}

/* === ACTION LINK === */
.action-link {
  color: #0063ae;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.action-link:hover,
.action-link:focus {
  text-decoration: underline;
  color: #004b88;
}

/* Maintain original alignment for action cells */
td.text-center .action-link,
th.text-center {
  text-align: center;
}

/* === TABLE STYLING === */
/* Preserve specific text colors from inline styles */
.mou-status-table td:first-child,
.karmayogi-metrics-table td:first-child {
  /* color: #002b5b; */
  /* font-weight: 500; */
}

/* Ensure table headers are styled correctly */
.mou-status-table thead th {
  background-color: #0063ae;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-bottom: none;
  vertical-align: middle;
  padding: 15px;
  font-size: 0.95rem;
}

.mou-status-table thead th:first-child {
  border-top-left-radius: 8px;
}

.mou-status-table thead th:last-child {
  border-top-right-radius: 8px;
  border-right: none;
}

/* Remove vertical line from first column only for Partner/Collaboration tables (Header) */
.partner-org-table thead th:first-child {
  border-right: none !important;
}

/* Styling for title cells that were previously inline */
.mou-status-table td.title-cell,
.mou-status-table td:nth-child(2) {
  color: #002b5b;
  /* font-weight: 500; */
}


/* -------------------------------------------------------------------- */
/* PDF Link Styling                                                     */
/* -------------------------------------------------------------------- */
.pdf-link-sop {
  border: 2px solid #ff8c00;
  border-style: solid;
  padding: 20px 30px;
  background: linear-gradient(135deg, #ff8c00 0%, #ff7700 100%);
  min-width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.pdf-link-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  position: relative;
  padding: 15px 25px;
  transition: all 0.3s ease;
  border-radius: 8px;
  width: 100%;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2);
}

.pdf-link-sop:hover {
  background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%);
  border-color: #ff8c00;
  color: #ff8c00;
}

.pdf-link-title:hover {
  color: #ff8c00;
  background-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4);
}

.pdf-links-section {
  padding: 30px 0;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 40px;
}

.contact-details-heading {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700;
  display: block;
  text-align: center;
  background-color: #0063ae;
  padding: 25px 30px;
  margin-bottom: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 99, 174, 0.2);
}

.section-title {
  color: #002b5b;
  font-weight: 700;
  font-size: 2rem;
  text-align: left;
  position: relative;
  padding: 0;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border: none;
}

.section-title {
  display: flex;
  gap: 12px;
  align-items: center;
  /* margin-bottom: 14px; */
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0063ae;
  border-radius: 0;
}

/* ============================================
   LARGE SCALE INTERVENTIONS (LSI) PAGE STYLES
   ============================================ */

/* LSI Programs Section */
.karmayogi-programs-section {
  background: #f8f9fa;
  padding: 60px 0;
}

/* LSI Objective Cards */
.lsi-objective-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  border-radius: 15px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 99, 174, 0.1);
  transition: all 0.3s ease;
  border-left: 4px solid #0063ae;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lsi-objective-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 99, 174, 0.2);
  border-left-color: #0099ff;
}

.lsi-objective-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 1.8rem;
}

.lsi-objective-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #002b5b;
  margin-bottom: 15px;
}

.lsi-objective-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #495057;
  margin: 0;
}

/* LSI Program Cards */
.lsi-program-card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e9ecef;
}

.lsi-program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 99, 174, 0.15);
  border-color: #0063ae;
}

.lsi-program-header {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ffffff;
}

.lsi-program-header-orange {
  background: linear-gradient(135deg, #FF9800 0%, #e6c666 100%);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ffffff;
}

.lsi-program-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.lsi-program-icon.rail-icon {
  background: rgba(255, 255, 255, 0.25);
}

.lsi-program-icon.police-icon {
  background: rgba(255, 255, 255, 0.25);
}

.lsi-program-icon.dakshata-icon {
  background: rgba(255, 255, 255, 0.25);
}

.lsi-program-icon.dak-icon {
  background: rgba(255, 255, 255, 0.25);
}

.lsi-program-icon.kcm-icon {
  background: rgba(255, 255, 255, 0.25);
}

.lsi-program-icon.kcm-icon::before {
  content: "\f455";
  /* Bootstrap Icons 'laptop-fill' */
  font-family: "bootstrap-icons";
}

.lsi-program-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.lsi-program-body {
  padding: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.lsi-program-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #495057;
  margin-bottom: 25px;
  flex-grow: 1;
}

.lsi-program-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

/* LSI Action Buttons */
.lsi-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.lsi-action-btn i {
  font-size: 1.2rem;
}

.lsi-video-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.lsi-video-btn:hover {
  background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
  text-decoration: none;
}

.lsi-report-btn {
  background: linear-gradient(135deg, #0063ae 0%, #0099ff 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.3);
}

.lsi-report-btn-orange {
  background: linear-gradient(135deg, #FF9800 0%, #e6c666 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.3);
}

.lsi-report-btn:hover {
  background: linear-gradient(135deg, #0099ff 0%, #0063ae 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 99, 174, 0.4);
  text-decoration: none;
}

.lsi-report-btn-orange:hover {
  background: linear-gradient(135deg, #e6c666 0%, #FF9800 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 99, 174, 0.4);
  text-decoration: none;
}

/* Responsive Design for LSI Page */
@media (max-width: 992px) {
  .lsi-program-header {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .lsi-program-icon {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
  }

  .lsi-program-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  .karmayogi-programs-section {
    padding: 40px 0;
  }

  .lsi-objective-card {
    padding: 25px;
  }

  .lsi-objective-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .lsi-objective-title {
    font-size: 1.2rem;
  }

  .lsi-program-header {
    padding: 20px;
  }

  .lsi-program-body {
    padding: 20px;
  }

  .lsi-program-title {
    font-size: 1.2rem;
  }

  .lsi-program-description {
    font-size: 1rem;
  }

  .lsi-action-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    flex: 1;
    justify-content: center;
    min-width: 140px;
  }

  .lsi-program-actions {
    flex-direction: column;
  }

  .lsi-action-btn {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .lsi-objective-card {
    padding: 20px;
  }

  .lsi-program-header {
    padding: 18px;
  }

  .lsi-program-body {
    padding: 18px;
  }

  .lsi-action-btn {
    padding: 10px 18px;
    font-size: 0.85rem;
  }
}

/* ===========================================
   NEWSLETTER LIST STYLES
   =========================================== */
.newsletters-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  padding-bottom: 2rem;
}

.newsletter-item {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.newsletter-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border-color: #0063ae;
}

.newsletter-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.newsletter-title {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 600;
}

.newsletter-title a {
  color: #002b5b;
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
  /* Make the whole title clickable area beneficial */
}

.newsletter-title a:hover {
  color: #0063ae;
}

.newsletter-date {
  margin-top: auto;
  font-size: 0.9rem;
  color: #6c757d;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Add an icon before the date for better visual */
.newsletter-date::before {
  content: "\F1E6";
  /* Bootstrap Icons 'calendar-event' */
  font-family: "bootstrap-icons";
  color: #0063ae;
  margin-right: 8px;
  font-size: 1.1rem;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* ===========================================
   ARCHIVES BUTTON STYLES
   =========================================== */
.archives-btn {
  background: linear-gradient(135deg, #0063ae 0%, #00569a 100%) !important;
  color: #ffffff !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  /* Pill shape for modern look */
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.25);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.archives-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.35);
  background: linear-gradient(135deg, #00569a 0%, #004b88 100%) !important;
}

.archives-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 99, 174, 0.25);
}

.archives-btn a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Add a back arrow icon */
.archives-btn a::before {
  content: "\F12F";
  /* Bootstrap Icons 'arrow-left' */
  font-family: "bootstrap-icons";
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.archives-btn:hover a::before {
  transform: translateX(-4px);
}




/* === GENERIC TAB STYLES === */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-size: 1.1rem !important;
  font-weight: 500;
}

/* ========================================
   Faculty Development Programme Styles
   ======================================== */

/* Full-width Section with Multi-Gradient Background */
.karmayogi-section-fullwidth {
  width: 100%;
  padding: 60px 0;
  position: relative;
  overflow: visible;
}

/* Section Background Themes - Alternating Pattern */
.karmayogi-fdp-vision-section {
  background: linear-gradient(180deg, #ffe3ab 0%, rgba(255, 227, 171, 0.95) 15%, rgba(255, 235, 200, 0.85) 30%, rgba(255, 240, 210, 0.7) 45%, rgba(255, 245, 230, 0.5) 60%, rgba(255, 248, 240, 0.3) 75%, rgba(255, 250, 245, 0.15) 85%, #ffffff 100%);
  position: relative;
}

.karmayogi-fdp-ideation-section {
  background: #ffffff;
}

.karmayogi-fdp-intervention-section {
  background: linear-gradient(180deg, #ffe3ab 0%, rgba(255, 227, 171, 0.95) 15%, rgba(255, 235, 200, 0.85) 30%, rgba(255, 240, 210, 0.7) 45%, rgba(255, 245, 230, 0.5) 60%, rgba(255, 248, 240, 0.3) 75%, rgba(255, 250, 245, 0.15) 85%, #ffffff 100%);
  position: relative;
}

.karmayogi-fdp-learnings-section {
  background: #ffffff;
}

.karmayogi-fdp-elements-section {
  background: linear-gradient(180deg, #ffe3ab 0%, rgba(255, 227, 171, 0.95) 15%, rgba(255, 235, 200, 0.85) 30%, rgba(255, 240, 210, 0.7) 45%, rgba(255, 245, 230, 0.5) 60%, rgba(255, 248, 240, 0.3) 75%, rgba(255, 250, 245, 0.15) 85%, #ffffff 100%);
  position: relative;
}

.karmayogi-section-fullwidth .container {
  position: relative;
  z-index: 1;
}

/* Section Titles */
.karmayogi-section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #003b73;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 15px;
  text-align: center;
}

.karmayogi-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0063ae 0%, #ff9933 100%);
  border-radius: 2px;
}

.karmayogi-section-title i {
  color: #ff9933;
  font-size: 2rem;
  margin-right: 15px;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Large Text Paragraphs */
.karmayogi-text-large {
  font-size: 1rem;
  line-height: 1.8;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: justify;
}

/* Feature Block */
.karmayogi-feature-block {
  background: #ffffff;
  border-left: 5px solid #0063ae;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin-top: 25px;
}

.karmayogi-feature-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.karmayogi-feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #003b73;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.karmayogi-feature-title i {
  color: #28a745;
  margin-right: 10px;
  font-size: 1.4rem;
}

.karmayogi-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.karmayogi-feature-list li {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #34495e;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.karmayogi-feature-list li:hover {
  transform: translateX(8px);
  color: #0063ae;
}

.karmayogi-feature-list li i {
  color: #ff9933;
  margin-right: 12px;
  margin-top: 4px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Phase Cards */
.karmayogi-phase-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  height: 100%;
  border: 2px solid transparent;
}

.karmayogi-phase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #0063ae 0%, #00a8e8 100%);
  transition: height 0.3s ease;
}

.karmayogi-phase-card-primary::before {
  background: linear-gradient(90deg, #0063ae 0%, #00a8e8 100%);
}

.karmayogi-phase-card-success::before {
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.karmayogi-phase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  border-color: #0063ae;
}

.karmayogi-phase-card-success:hover {
  border-color: #28a745;
}

.karmayogi-phase-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0063ae 0%, #004b88 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  box-shadow: 0 3px 10px rgba(0, 99, 174, 0.3);
}

.karmayogi-phase-badge-success {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}

.karmayogi-phase-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #003b73;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.karmayogi-phase-title i {
  color: #ff9933;
  margin-right: 10px;
  font-size: 1.5rem;
}

.karmayogi-phase-duration {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0063ae;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.karmayogi-phase-duration i {
  color: #ff9933;
  margin-right: 8px;
}

.karmayogi-phase-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #495057;
}

/* Learning Cards */
.karmayogi-learning-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.karmayogi-learning-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 99, 174, 0.03) 0%, rgba(255, 153, 51, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.karmayogi-learning-card:hover::before {
  opacity: 1;
}

.karmayogi-learning-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.karmayogi-learning-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #0063ae 0%, #00a8e8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 99, 174, 0.3);
  transition: all 0.3s ease;
}

.karmayogi-learning-card:hover .karmayogi-learning-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(0, 99, 174, 0.4);
}

.karmayogi-learning-icon i {
  font-size: 2.2rem;
  color: #ffffff;
}

.karmayogi-learning-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #003b73;
  margin-bottom: 15px;
}

.karmayogi-learning-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #495057;
}

/* Requirements Card */
.karmayogi-requirements-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #0063ae;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 6px 20px rgba(0, 99, 174, 0.1);
  transition: all 0.3s ease;
}

.karmayogi-requirements-card:hover {
  box-shadow: 0 10px 30px rgba(0, 99, 174, 0.2);
  transform: translateY(-3px);
}

.karmayogi-requirements-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #003b73;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.karmayogi-requirements-title i {
  color: #ffc107;
  margin-right: 10px;
  font-size: 1.5rem;
}

.karmayogi-requirements-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #2c3e50;
  text-align: justify;
}

/* Topics Card */
.karmayogi-topics-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid #28a745;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.1);
  transition: all 0.3s ease;
}

.karmayogi-topics-card:hover {
  box-shadow: 0 10px 30px rgba(40, 167, 69, 0.2);
  transform: translateY(-3px);
}

.karmayogi-topics-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #003b73;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.karmayogi-topics-title i {
  color: #28a745;
  margin-right: 10px;
  font-size: 1.5rem;
}

.karmayogi-topic-item {
  background: #ffffff;
  border-left: 4px solid #ff9933;
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  margin-bottom: 15px;
}

.karmayogi-topic-item:hover {
  transform: translateX(8px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-left-color: #0063ae;
}

.karmayogi-topic-item i {
  color: #0063ae;
  font-size: 1.8rem;
  margin-right: 15px;
  flex-shrink: 0;
}

.karmayogi-topic-item span {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #2c3e50;
  font-weight: 500;
}

/* Responsive Styles for Faculty Development */
@media (max-width: 1200px) {
  .karmayogi-section-title {
    font-size: 2rem;
  }

  .karmayogi-phase-title,
  .karmayogi-requirements-title,
  .karmayogi-topics-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 992px) {
  .karmayogi-section-fullwidth {
    padding: 60px 0;
  }

  .karmayogi-section-fullwidth .container {
    padding: 0 30px;
  }

  .karmayogi-section-title {
    font-size: 1.8rem;
  }

  .karmayogi-text-large {
    font-size: 1rem;
  }

  .karmayogi-phase-card,
  .karmayogi-learning-card {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .karmayogi-section-fullwidth {
    padding: 40px 0;
  }

  .karmayogi-section-fullwidth .container {
    padding: 0 20px;
  }

  .karmayogi-section-title {
    font-size: 1.6rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .karmayogi-section-title i {
    margin-bottom: 10px;
  }

  .karmayogi-text-large {
    font-size: 1rem;
    text-align: left;
  }

  .karmayogi-feature-block,
  .karmayogi-phase-card,
  .karmayogi-requirements-card,
  .karmayogi-topics-card {
    padding: 25px;
  }

  .karmayogi-phase-title,
  .karmayogi-learning-title,
  .karmayogi-requirements-title,
  .karmayogi-topics-title {
    font-size: 1.3rem;
  }

  .karmayogi-topic-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .karmayogi-topic-item i {
    margin-bottom: 10px;
  }
}

@media (max-width: 576px) {
  .karmayogi-section-fullwidth .container {
    padding: 0 15px;
  }

  .karmayogi-section-title {
    font-size: 1.4rem;
  }

  .karmayogi-text-large {
    font-size: 1rem;
  }

  .karmayogi-feature-list li,
  .karmayogi-phase-description,
  .karmayogi-learning-text,
  .karmayogi-requirements-text,
  .karmayogi-topic-item span {
    font-size: 0.95rem;
  }

  .karmayogi-learning-icon {
    width: 65px;
    height: 65px;
  }

  .karmayogi-learning-icon i {
    font-size: 1.8rem;
  }
}

/* Large Desktop Enhancements (1920px and above) */
@media (min-width: 1920px) {
  .karmayogi-section-title {
    font-size: 2.6rem;
  }

  .karmayogi-text-large {
    font-size: 1rem;
  }

  .karmayogi-phase-title,
  .karmayogi-requirements-title,
  .karmayogi-topics-title {
    font-size: 1.8rem;
  }

  .karmayogi-feature-list li,
  .karmayogi-phase-description,
  .karmayogi-learning-text,
  .karmayogi-requirements-text,
  .karmayogi-topic-item span {
    font-size: 1rem;
  }
}

/* PS/PPS Specific Styling */
.team-member-card.is-ps-pps,
.chairperson-image-card.is-ps-pps {
  background: #ffffff !important;
  /* border: 1px solid #0063ae !important; */
  border-left: 6px solid #002b5b !important;
  box-shadow: 0 4px 15px rgba(0, 99, 174, 0.15) !important;
}

.team-member-card.is-ps-pps .team-member-info {
  padding: 10px 15px !important;
}

.team-member-card.is-ps-pps .team-member-name {
  font-size: 0.85rem !important;
  margin-bottom: 2px !important;
}



.team-member-card.is-ps-pps .team-member-role {
  font-size: 0.72rem !important;
  margin-bottom: 8px !important;
}



.team-member-card.is-ps-pps .contact-details,
.team-member-card.is-ps-pps .team-member-contact {
  margin-top: 5px !important;
}

.team-member-card.is-ps-pps .contact-item,
.team-member-card.is-ps-pps .team-member-contact {
  font-size: 0.82rem !important;
  margin-bottom: 2px !important;
  gap: 8px !important;
}

.team-member-card.is-ps-pps .contact-item i,
.team-member-card.is-ps-pps .team-member-contact i {
  width: 18px !important;
  height: 18px !important;
  font-size: 0.7rem !important;
}

/* Remove hover top border for PS/PPS cards */
.team-member-card.is-ps-pps:hover::before,
.team-contact-card.is-ps-pps:hover::after,
.chairperson-image-card.is-ps-pps:hover::before {
  opacity: 0 !important;
  display: none !important;
}

/* Pillar Cards 7-Column Layout */
.pillar-cards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -10px;
  margin-right: -10px;
}

.col-pillar {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 10px;
  display: flex;
}

.col-pillar .team-member-card {
  width: 100%;
}

@media (min-width: 576px) {
  .col-pillar {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 768px) {
  .col-pillar {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

@media (min-width: 992px) {
  .col-pillar {
    flex: 0 0 14.285714%;
    max-width: 14.285714%;
  }
}


/* Typography refinements for 7-column Pillar layout */
.pillar-cards-row .team-member-name {
  line-height: 1.1 !important;
}

.pillar-cards-row h3.team-member-name,
.pillar-cards-row h6.team-member-name {
  font-size: 0.82rem !important;
  color: #004b88 !important;
  margin-bottom: 8px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
}


.pillar-cards-row h4.team-member-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #0063ae !important;
  margin-bottom: 4px !important;
}


.pillar-cards-row .team-member-role {
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}

.pillar-cards-row .contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.65rem !important;
  margin-bottom: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #444 !important;
  transition: all 0.2s ease;
  cursor: help;
}

.pillar-cards-row .contact-item:hover {
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-all !important;
  background: rgba(0, 99, 174, 0.05) !important;
  border-radius: 4px !important;
  padding: 2px !important;
}



.pillar-cards-row .contact-item i {
  width: 12px !important;
  height: 12px !important;
  font-size: 0.6rem !important;
  margin-right: 0 !important;
  color: #0063ae !important;
}


.pillar-cards-row .team-member-info {
  padding: 10px 8px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}



.pillar-cards-row .contact-details {
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}



.pillar-cards-row .team-member-card {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f0f7ff !important;
  box-shadow: 0 4px 12px rgba(0, 99, 174, 0.08) !important;
  border: 1px solid rgba(0, 99, 174, 0.1) !important;
  border-radius: 12px !important;
}







.ps-pps-row {
  align-items: flex-start !important;
}

.ps-pps-row .team-member-card.is-ps-pps {
  background: #ffffff !important;
  border-left: 4px solid #002b5b !important;
  height: auto !important;
  min-height: 140px !important;
}

.ps-pps-row .contact-details {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 5px !important;
}

.ps-pps-row .team-member-info {
  padding: 8px 8px !important;
}

.ps-pps-row .team-member-name {
  margin-bottom: 2px !important;
  line-height: 1.1 !important;
}

.ps-pps-row .team-member-role {
  margin-bottom: 5px !important;
  line-height: 1.1 !important;
}

/* Increased font size for Leadership and Secretariat names as requested */
.meet-team-section-enhanced .team-member-name {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
}


.chairperson-content h3 {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
}


.leadership-members-row h3 {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
}



/* Knowledge Partnership Box */
.knowledge-partnership-box {
  background: linear-gradient(135deg, #00569A 0%, #0063ae 100%);
  border-radius: 12px;
  padding: 30px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 86, 154, 0.3);
}

.knowledge-partnership-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0 0 0 100%;
}

.knowledge-partnership-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.knowledge-partnership-header h3 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.knowledge-partnership-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cbc-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.logo-text {
  font-size: 0.75rem;
  color: #ffffff;
  margin-top: 8px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
}

.knowledge-partnership-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 25px;
  height: 100%;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.knowledge-partnership-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.knowledge-icon-box {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 2rem;
  color: #ffffff;
}

.knowledge-icon-what {
  background: #FFC107;
}

.knowledge-icon-why {
  background: #28A745;
}

.knowledge-icon-who {
  background: #FF9800;
}

.knowledge-label {
  color: #00569A;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.knowledge-description {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.partner-logo-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.partner-logo-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.partner-logo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: #00569A;
  z-index: 10;
  position: relative;
}

.partner-logo-img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.3s ease;
}

.partner-logo-card:hover .partner-logo-img {
  filter: grayscale(0%);
}

@media (max-width: 768px) {
  .knowledge-partnership-header {
    flex-direction: column;
    text-align: center;
  }

  .knowledge-partnership-header h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }
}

/* Gallery Styles */
.gallery-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: #00569A;
  z-index: 10;
  position: relative;
}

.gallery-card .card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-card:hover .card-img-top {
  transform: scale(1.05);
}

.gallery-card .card-body {
  padding: 15px;
}

.gallery-card .card-title {
  color: #00569A;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.gallery-card .card-text {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

.section-title {
  color: #002b5b;
  font-weight: 700;
  font-size: 2rem;
  text-align: left;
  position: relative;
  padding: 0;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border: none;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0063ae;
  border-radius: 0;
}

/* Section Main Heading Styles */
.section-main-heading {
  color: #002b5b;
  font-weight: 700;
  font-size: 2rem;
  text-align: left;
  position: relative;
  padding: 0;
  margin-bottom: 50px;
  padding-bottom: 20px;
  letter-spacing: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.section-main-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0063ae;
  border-radius: 0;
}

@media (max-width: 768px) {
  .section-main-heading {
    font-size: 1.6rem;
  }
}

/* Gallery Carousel Styles */
.gallery-carousel-wrapper {
  margin: 30px 0;
  padding: 0 50px;
}

.gallery-carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 10px 0;
}

.gallery-carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 20px;
  will-change: transform;
}

.gallery-carousel-item {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
  width: calc(33.333% - 14px);
  padding-top: 10px;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #00569A;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gallery-nav-btn:hover {
  background: #0063ae;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gallery-nav-prev {
  left: 0;
}

.gallery-nav-next {
  right: 0;
}

/* Partner Logo Carousel Styles */
.partner-logo-carousel-wrapper {
  margin: 30px 0;
  padding: 0 50px;
}

.partner-logo-carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 10px 0;
}

.partner-logo-carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 20px;
  will-change: transform;
}

.partner-logo-carousel-item {
  flex: 0 0 calc(20% - 16px);
  min-width: 0;
  width: calc(20% - 16px);
  padding-top: 10px;
}

.partner-logo-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #00569A;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.partner-logo-nav-btn:hover {
  background: #0063ae;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.partner-logo-nav-prev {
  left: 0;
}

.partner-logo-nav-next {
  right: 0;
}

@media (max-width: 992px) {
  .gallery-carousel-item {
    flex: 0 0 calc(50% - 10px);
  }

  .partner-logo-carousel-item {
    flex: 0 0 calc(33.333% - 14px);
  }
}

@media (max-width: 768px) {

  .gallery-carousel-wrapper,
  .partner-logo-carousel-wrapper {
    padding: 0 40px;
  }

  .gallery-carousel-item {
    flex: 0 0 100%;
  }

  .partner-logo-carousel-item {
    flex: 0 0 calc(50% - 10px);
  }

  .gallery-nav-btn,
  .partner-logo-nav-btn {
    width: 35px;
    height: 35px;
  }
}

/* Karmyogi Css start */

.karmayogi-section-title-icon {
  color: #0063ae;
}

/* Text Colors */
.text-primary-blue {
  color: #0063ae !important;
}

.text-dark-blue {
  color: #002b5b !important;
}

.text-green {
  color: #28a745 !important;
}

.text-orange {
  color: #ffa500 !important;
}

/* Vision Section */
.karmayogi-quote-block {
  background-color: rgba(248, 250, 252, 0.9);
  border-left: 5px solid #0063ae;
}

.karmayogi-quote-text {
  color: #002b5b;
  font-style: normal;
  line-height: 1.8;
}

.karmayogi-highlight {
  color: #0063ae;
}

.karmayogi-list {
  list-style: none;
  margin-top: 20px;
  padding-left: 0;
}

.karmayogi-list-item {
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
}

.karmayogi-list-icon {
  color: #0063ae;
  left: 0;
  position: absolute;
}

/* Objectives Section */
.karmayogi-feature-block.bg-alice-blue {
  background-color: rgba(240, 248, 255, 0.95);
}

.karmayogi-feature-desc {
  line-height: 1.8;
}

.karmayogi-feature-desc p {
  color: #002b5b;
  margin-bottom: 15px;
}

.karmayogi-feature-desc p:last-child {
  margin-bottom: 0;
}

/* Chronology / Timeline */
.karmayogi-timeline-wrapper {
  padding-left: 40px;
  position: relative;
}

.karmayogi-timeline-line {
  background-color: #28a745;
  border-radius: 2px;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px;
}

.karmayogi-timeline-item {
  margin-bottom: 30px;
  position: relative;
}

.karmayogi-timeline-dot {
  border-radius: 50%;
  border: 3px solid #fff;
  height: 20px;
  left: -32px;
  position: absolute;
  top: 5px;
  width: 20px;
}

.karmayogi-timeline-dot.dot-blue {
  background-color: #0063ae;
  box-shadow: 0 0 0 3px rgba(0, 99, 174, 0.2);
}

.karmayogi-timeline-dot.dot-green {
  background-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.karmayogi-timeline-dot.dot-orange {
  background-color: #ffa500;
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
}

.karmayogi-timeline-date {
  font-size: 1.1rem;
  margin-bottom: 8px;
  font-weight: 700;
}

.karmayogi-timeline-content {
  color: #002b5b;
  line-height: 1.7;
}

/* Milestone Icons */
.karmayogi-milestone-icon.icon-blue {
  background-color: #0099ff !important;
}

.karmayogi-milestone-icon.icon-teal {
  background-color: #20c997 !important;
}

.karmayogi-milestone-icon.icon-yellow {
  background-color: #ffc107 !important;
}


/* NSCSTI Section Styles */

/* Utility Colors */
.text-red {
  color: #dc3545 !important;
}

.text-teal {
  color: #20c997 !important;
}

.text-yellow {
  color: #ffc107 !important;
}

.text-cyan {
  color: #17a2b8 !important;
}

.text-purple {
  color: #6610f2 !important;
}

.text-pink {
  color: #e83e8c !important;
}

.text-gray {
  color: #6c757d !important;
}

/* Backgrounds */
.bg-light-blue {
  background-color: rgba(0, 153, 255, 0.05) !important;
}

.bg-white {
  background-color: #ffffff !important;
}

/* Border Utilities */
.border-left-blue {
  border-left: 5px solid #0063ae !important;
}

.border-left-green {
  border-left: 5px solid #28a745 !important;
}

.border-left-orange {
  border-left: 5px solid #ffa500 !important;
}

.border-top-blue {
  border-top: 4px solid #0063ae !important;
}

.border-top-green {
  border-top: 4px solid #28a745 !important;
}

.border-top-orange {
  border-top: 4px solid #ffa500 !important;
}

.border-top-red {
  border-top: 4px solid #dc3545 !important;
}

.border-top-gray {
  border-top: 4px solid #6c757d !important;
}

.border-top-cyan {
  border-top: 4px solid #17a2b8 !important;
}

.border-top-purple {
  border-top: 4px solid #6610f2 !important;
}

.border-top-pink {
  border-top: 4px solid #e83e8c !important;
}

/* Components */
.nscsti-highlight-box {
  background-color: #ff9e0f;
  border-radius: 8px;
  color: white;
  margin-bottom: 0px;
  padding: 15px 20px;
  text-align: center;
}

.nscsti-highlight-box a {
  color: #ffffff !important;
}

.nscsti-table-container {
  overflow-x: auto;
}

.nscsti-table {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.nscsti-table th {
  padding: 15px;
}

.nscsti-table td {
  border-bottom: 1px solid #dee2e6;
  padding: 12px 15px;
}

.nscsti-table-header-blue {
  background-color: #0099ff !important;
  color: #ffffff !important;
}

.nscsti-table-header-teal {
  background-color: #20c997 !important;
  color: #ffffff !important;
}

.nscsti-table-row-highlight {
  background-color: rgba(0, 99, 174, 0.1) !important;
}

.nscsti-table-row-highlight-green {
  background-color: rgba(40, 167, 69, 0.1) !important;
}

.nscsti-stat-big {
  font-size: 2rem !important;
}


/* IKS Section Styles */

.font-095 {
  font-size: 0.95rem !important;
}

.h-100 {
  height: 100% !important;
}

.iks-overview-card {
  background-color: #ffffff;
  border-radius: 15px;
  border: 3px solid #0063ae;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.iks-overview-header {
  background-color: #0063ae;
  flex-shrink: 0;
  padding: 15px 20px;
}

.iks-overview-header h3 {
  align-items: center;
  color: #ffffff;
  display: flex;
  font-size: 1.1rem;
  gap: 10px;
  margin: 0;
}

.iks-overview-body {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  padding: 18px 20px;
}

.iks-info-row {
  margin-bottom: 16px;
}

.iks-info-row:last-child {
  margin-bottom: 0;
}

.iks-info-flex {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.iks-info-flex-last {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}

.iks-info-icon {
  color: #0063ae;
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 3px;
}

.iks-info-label {
  color: #002b5b;
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.iks-info-value {
  color: #6c757d;
  font-size: 0.85rem;
  line-height: 1.4;
}

.karmayogi-milestone-icon.icon-gray {
  background-color: #495057 !important;
}

.karmayogi-milestone-icon.icon-dark-green {
  background-color: #20c997 !important;
}


/* States and UTs Section Styles */

.states-header-orange {
  background-color: #ff9e0f;
  border-radius: 8px;
  color: white;
  margin-bottom: 20px;
  padding: 15px 20px;
  text-align: center;
}

.states-header-blue {
  background-color: #0063ae;
  border-radius: 8px;
  color: white;
  margin-bottom: 20px;
  padding: 15px 20px;
  text-align: center;
}

.states-overview-box {
  background-color: #003b73;
  border-radius: 8px;
  color: white;
  padding: 30px;
  margin-bottom: 3rem;
}

.states-table-summary {
  border: 2px solid #FF9800;
  margin-bottom: 0;
}

.states-table-summary thead {
  background-color: #ffe3ab;
}

.states-table-summary tbody tr {
  background-color: #fff9f0;
}

.states-table-summary th {
  border-color: #ddd;
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

.states-table-summary td {
  border-color: #ddd;
  padding: 15px;
  text-align: center;
  vertical-align: middle;
}

.states-summary-val-blue {
  color: #0063ae;
  font-size: 1.5rem;
  font-weight: bold;
}

.states-summary-val-orange {
  color: #FF9800;
  font-size: 1.5rem;
  font-weight: bold;
}

.states-summary-val-gray {
  color: #666;
  font-size: 1.2rem;
  font-weight: bold;
}

.states-updated-text {
  background-color: #ffeb3b;
  border-radius: 5px;
  padding: 10px;
  font-weight: bold;
  display: inline-block;
}

/* Table Column Width Utilities */
.col-w-3 {
  width: 3% !important;
}

.col-w-5 {
  width: 5% !important;
}

.col-w-12 {
  width: 12% !important;
}

.col-w-15 {
  width: 15% !important;
}

.col-w-20 {
  width: 20% !important;
}

.col-w-25 {
  width: 25% !important;
}

.col-w-30 {
  width: 30% !important;
}

.col-w-40 {
  width: 40% !important;
}

.col-w-45 {
  width: 45% !important;
}

.col-w-50 {
  width: 50% !important;
}

.col-w-70 {
  width: 70% !important;
}

/* States/UT Table specific styles */
.states-ut-table {
  width: 100%;
  table-layout: fixed;
}

.states-ut-table.important-docs-table th:nth-child(1),
.states-ut-table.important-docs-table td:nth-child(1) {
  width: 12%;
}

.states-ut-table.important-docs-table th:nth-child(2),
.states-ut-table.important-docs-table td:nth-child(2) {
  width: 63%;
}

.states-ut-table.important-docs-table th:nth-child(3),
.states-ut-table.important-docs-table td:nth-child(3) {
  width: 25%;
}

.states-ut-table.roles-table th:nth-child(1),
.states-ut-table.roles-table td:nth-child(1) {
  width: 12%;
}

.states-ut-table.roles-table th:nth-child(2),
.states-ut-table.roles-table td:nth-child(2) {
  width: 38%;
}

.states-ut-table.roles-table th:nth-child(3),
.states-ut-table.roles-table td:nth-child(3) {
  width: 50%;
}

.states-ut-table.central-team-table th:nth-child(1),
.states-ut-table.central-team-table td:nth-child(1) {
  width: 12%;
}

.states-ut-table.central-team-table th:nth-child(2),
.states-ut-table.central-team-table td:nth-child(2) {
  width: 18%;
}

.states-ut-table.central-team-table th:nth-child(3),
.states-ut-table.central-team-table td:nth-child(3) {
  width: 30%;
}

.states-ut-table.central-team-table th:nth-child(4),
.states-ut-table.central-team-table td:nth-child(4) {
  width: 20%;
}

.states-ut-table.central-team-table th:nth-child(5),
.states-ut-table.central-team-table td:nth-child(5) {
  width: 20%;
}

.states-ut-table.team-table th:nth-child(1),
.states-ut-table.team-table td:nth-child(1) {
  width: 10%;
}

.states-ut-table.team-table th:nth-child(2),
.states-ut-table.team-table td:nth-child(2) {
  width: 12%;
}

.states-ut-table.team-table th:nth-child(3),
.states-ut-table.team-table td:nth-child(3) {
  width: 20%;
}

.states-ut-table.team-table th:nth-child(4),
.states-ut-table.team-table td:nth-child(4) {
  width: 25%;
}

.states-ut-table.team-table th:nth-child(5),
.states-ut-table.team-table td:nth-child(5) {
  width: 25%;
}

/* Case Writing Page Utilities */
.text-orange {
  color: #ffa500 !important;
}

.text-dark-blue {
  color: #002b5b !important;
}

.karmayogi-stat-big {
  font-size: 2rem;
}

.border-left-green {
  border-left: 5px solid #28a745 !important;
}

.border-left-blue {
  border-left: 5px solid #0063ae !important;
}

.bg-light-blue {
  background-color: rgba(0, 153, 255, 0.05) !important;
}

.bg-alice-blue {
  background-color: rgba(240, 248, 255, 0.95) !important;
}

.karmayogi-milestone-list {
  font-size: 0.9rem;
  margin-top: 10px;
  padding-left: 20px;
  text-align: left;
}

.karmayogi-numbered-list {
  color: #002b5b;
  padding-left: 20px;
}

.karmayogi-numbered-list li {
  margin-bottom: 10px;
}

.karmayogi-milestone-icon.icon-blue {
  background-color: #0099ff !important;
}

.karmayogi-milestone-icon.icon-teal {
  background-color: #20c997 !important;
}

.karmayogi-milestone-icon.icon-yellow {
  background-color: #ffc107 !important;
}

.karmayogi-milestone-icon.icon-red {
  background-color: #e74c3c !important;
}

.karmayogi-milestone-icon.icon-gray {
  background-color: #495057 !important;
}

.karmayogi-section-title-sm {
  font-size: 1.5rem;
}

/* DAKSH Timeline Styles */
.daksh-timeline {
  padding-left: 40px;
  position: relative;
}

.daksh-timeline::before {
  content: '';
  background-color: #28a745;
  border-radius: 2px;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px;
}

.daksh-timeline-item {
  margin-bottom: 30px;
  position: relative;
}

.daksh-timeline-dot {
  border-radius: 50%;
  border: 3px solid #fff;
  height: 20px;
  left: -32px;
  position: absolute;
  top: 5px;
  width: 20px;
}

.daksh-timeline-dot.dot-blue {
  background-color: #0063ae;
  box-shadow: 0 0 0 3px rgba(0, 99, 174, 0.2);
}

.daksh-timeline-dot.dot-green {
  background-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.daksh-timeline-dot.dot-orange {
  background-color: #ffa500;
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
}

.daksh-timeline-dot.dot-danger {
  background-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

.daksh-timeline-dot.dot-gray {
  background-color: #6c757d;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.2);
}

.daksh-timeline-date {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.daksh-timeline-content {
  color: #002b5b;
  line-height: 1.7;
}

/* DAKSH Checklist Styles */
.daksh-checklist {
  list-style: none;
  padding-left: 0;
}

.daksh-checklist-item {
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
}

.daksh-checklist-item i {
  font-size: 1.2rem;
  left: 0;
  position: absolute;
  top: 3px;
}

.daksh-checklist-item.icon-blue i {
  color: #0063ae;
}

.daksh-checklist-item.icon-green i {
  color: #28a745;
}

.daksh-checklist-item.icon-orange i {
  color: #ffa500;
}

.daksh-checklist-item.icon-danger i {
  color: #dc3545;
}

.daksh-checklist-item.icon-gray i {
  color: #6c757d;
}

/* ========================================
   FACULTY DEVELOPMENT PROGRAMME STYLES
   ======================================== */

/* FDP Section Backgrounds */
.karmayogi-fdp-vision-section,
.karmayogi-fdp-intervention-section,
.karmayogi-fdp-elements-section {
  background: linear-gradient(135deg, #fff8f0 0%, #ffe8cc 100%);
}

.karmayogi-fdp-ideation-section,
.karmayogi-fdp-learnings-section {
  background-color: #ffffff;
}

/* Text Large Style */
.karmayogi-text-large {
  color: #002b5b;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Feature List */
.karmayogi-feature-title {
  color: #0063ae;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.karmayogi-feature-list {
  list-style: none;
  padding-left: 0;
}

.karmayogi-feature-list li {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.karmayogi-feature-list li i {
  color: #0063ae;
  flex-shrink: 0;
  margin-top: 4px;
}

.karmayogi-feature-list li span {
  color: #002b5b;
  line-height: 1.7;
}

/* Phase Cards */
.karmayogi-phase-card {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 25px;
  position: relative;
}

.karmayogi-phase-card-primary {
  border-top: 4px solid #0063ae;
}

.karmayogi-phase-card-success {
  border-top: 4px solid #28a745;
}

.karmayogi-phase-badge {
  background-color: #0063ae;
  border-radius: 20px;
  color: #ffffff;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 15px;
  padding: 5px 15px;
}

.karmayogi-phase-badge-success {
  background-color: #28a745;
}

.karmayogi-phase-title {
  color: #002b5b;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.karmayogi-phase-duration {
  color: #6c757d;
  font-size: 0.95rem;
  margin-bottom: 15px;
}

.karmayogi-phase-description {
  color: #002b5b;
  line-height: 1.7;
}

.karmayogi-phase-note {
  background-color: rgba(0, 99, 174, 0.1);
  border-left: 3px solid #0063ae;
  margin-top: 15px;
  padding: 15px;
}

.karmayogi-phase-note p {
  color: #002b5b;
  margin: 0;
}

/* Learning Cards */
.karmayogi-learning-card {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 25px;
  text-align: center;
  transition: transform 0.3s ease;
}

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

.karmayogi-learning-icon {
  align-items: center;
  background: linear-gradient(135deg, #0063ae 0%, #004a8f 100%);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 1.5rem;
  height: 60px;
  justify-content: center;
  margin: 0 auto 15px;
  width: 60px;
}

.karmayogi-learning-title {
  color: #002b5b;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.karmayogi-learning-text {
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Requirements Card */
.karmayogi-requirements-card {
  background-color: #ffffff;
  border-left: 4px solid #ffa500;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
}

.karmayogi-requirements-title {
  color: #0063ae;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.karmayogi-requirements-text {
  color: #002b5b;
  line-height: 1.8;
  margin: 0;
}

/* Topics Card */
.karmayogi-topics-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
}

.karmayogi-topics-title {
  color: #0063ae;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.karmayogi-topic-item {
  align-items: center;
  background-color: rgba(0, 99, 174, 0.05);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 12px 15px;
}

.karmayogi-topic-item i {
  color: #0063ae;
  font-size: 1.2rem;
}

.karmayogi-topic-item span {
  color: #002b5b;
  line-height: 1.5;
}

/* ========================================
   NATIONAL LEARNING WEEK STYLES
   ======================================== */

/* Quote Block Styles */
.karmayogi-quote-block {
  background-color: rgba(248, 250, 252, 0.9);
  border-left: 5px solid #0063ae;
  border-radius: 8px;
  padding: 25px;
}

.karmayogi-quote-icon {
  color: #0063ae;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.karmayogi-quote-text {
  color: #002b5b;
  font-style: normal;
  line-height: 1.8;
  margin: 0;
}

/* Highlight Text */
.karmayogi-highlight {
  color: #0063ae;
}

/* Text Utility Classes */
.text-primary {
  color: #0063ae !important;
}

.text-dark-blue {
  color: #002b5b !important;
}

.text-success {
  color: #28a745 !important;
}

.text-danger {
  color: #dc3545 !important;
}

/* Border Utilities */
.border-left-danger {
  border-left: 5px solid #dc3545 !important;
}

.border-left-gray {
  border-left: 5px solid #6c757d !important;
}

/* Background Utilities */
.bg-light-blue {
  background-color: rgba(0, 153, 255, 0.05) !important;
}

/* NLW Stat Title Colors */
.nlw-stat-blue {
  color: #0063ae;
  font-size: 1.5rem;
}

.nlw-stat-green {
  color: #28a745;
  font-size: 1.5rem;
}

.nlw-stat-orange {
  color: #ffa500;
  font-size: 1.5rem;
}

.nlw-stat-danger {
  color: #dc3545;
  font-size: 1.5rem;
}

/* Karmayogi List Styles */
.karmayogi-list {
  list-style: none;
  padding-left: 0;
}

.karmayogi-list-item {
  line-height: 1.8;
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
}

.karmayogi-list-icon {
  color: #0063ae;
  left: 0;
  position: absolute;
}

/* NLW Charts Section */
.nlw-charts-section {
  background-color: rgba(255, 255, 255, 0.8);
}

/* NLW Chart Card */
.nlw-chart-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.nlw-chart-container {
  height: 400px;
  position: relative;
}

/* NLW Document Card */
.nlw-document-card {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 15px;
  padding: 20px;
  transition: all 0.3s ease;
}

.nlw-document-card:hover {
  transform: translateX(5px);
}

.nlw-document-card-blue {
  background-color: rgba(0, 99, 174, 0.1);
  border-left: 4px solid #0063ae;
}

.nlw-document-card-blue:hover {
  background-color: rgba(0, 99, 174, 0.15);
}

.nlw-document-card-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-left: 4px solid #dc3545;
}

.nlw-document-card-danger:hover {
  background-color: rgba(220, 53, 69, 0.15);
}

.nlw-document-icon {
  font-size: 2.5rem;
}

.nlw-document-card-blue .nlw-document-icon {
  color: #0063ae;
}

.nlw-document-info {
  flex: 1;
}

.nlw-document-title {
  color: #002b5b;
  font-size: 1.1rem;
  margin: 0;
}

.nlw-document-desc {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 5px 0 0 0;
}

.nlw-document-link {
  font-size: 1.5rem;
  text-decoration: none;
}

.nlw-document-list {
  margin-top: 20px;
}

/* Timeline Note */
.daksh-timeline-note {
  color: #6c757d;
  font-size: 0.95rem;
  margin-top: 8px;
}

/* NLW Link Cards */
.nlw-link-card-blue {
  border: 3px solid #0063ae;
}

.nlw-link-card-green {
  border: 3px solid #28a745;
}

/* NLW Buttons */
.nlw-btn-primary {
  background-color: #0063ae;
  border: none;
  font-size: 0.9rem;
  padding: 8px 20px;
}

.nlw-btn-success {
  background-color: #28a745;
  border: none;
  color: white;
  font-size: 0.9rem;
  padding: 8px 20px;
}

.nlw-btn-current {
  cursor: default;
}

/* ========================================
   NATIONAL TRAINING CONCLAVE STYLES
   ======================================== */

/* Border Left Utilities */
.border-left-blue {
  border-left: 5px solid #0063ae !important;
}

.border-left-green {
  border-left: 5px solid #28a745 !important;
}

.border-left-orange {
  border-left: 5px solid #ffa500 !important;
}

/* Background Utilities */
.bg-alice-blue {
  background-color: rgba(240, 248, 255, 0.95) !important;
}

/* Text Utilities */
.text-orange {
  color: #ffa500 !important;
}

/* List Color Variants */
.karmayogi-list-green .karmayogi-list-icon.icon-green {
  color: #28a745;
}

.karmayogi-list-orange .karmayogi-list-icon.icon-orange {
  color: #ffa500;
}

.karmayogi-list-danger .karmayogi-list-icon.icon-danger {
  color: #dc3545;
}

.karmayogi-list-gray .karmayogi-list-icon.icon-gray {
  color: #6c757d;
}

/* Milestone Icon Color Variants */
.karmayogi-milestone-icon.icon-blue {
  background-color: #0099ff;
}

.karmayogi-milestone-icon.icon-teal {
  background-color: #20c997;
}

/* NTC Microsite Link */
.ntc-microsite-link {
  background-color: rgba(0, 99, 174, 0.1);
  border-left: 5px solid #0063ae;
  border-radius: 10px;
  margin-top: 20px;
  padding: 20px;
}

.ntc-microsite-url {
  align-items: center;
  color: #0063ae;
  display: inline-flex;
  font-size: 1.1rem;
  gap: 10px;
  text-decoration: none;
}

.ntc-microsite-hint {
  color: #6c757d;
  font-size: 0.95rem;
  margin-bottom: 0;
  margin-top: 10px;
}

/* Additional NTC Utilities */
.text-primary-blue {
  color: #0063ae !important;
}

.text-green {
  color: #28a745 !important;
}

.text-red {
  color: #dc3545 !important;
}

.text-gray {
  color: #6c757d !important;
}

.bg-quote {
  background-color: rgba(248, 250, 252, 0.95) !important;
}

.border-left-red {
  border-left: 5px solid #dc3545 !important;
}

.border-left-gray {
  border-left: 5px solid #6c757d !important;
}

/* Milestone Icon Additional Colors */
.karmayogi-milestone-icon.icon-red {
  background-color: #dc3545;
}

.karmayogi-milestone-icon.icon-orange {
  background-color: #ffa500;
}

.karmayogi-milestone-icon.icon-yellow {
  background-color: #ffc107;
}

.karmayogi-milestone-icon.icon-dark-green {
  background-color: #198754;
}

.karmayogi-milestone-icon.icon-gray {
  background-color: #6c757d;
}

/* Stat Typography */
.nscsti-stat-big {
  font-size: 2.2rem;
  font-weight: 700;
}

/* DAKSH / NTC Timeline Styles */
.daksh-timeline {
  border-left: 2px solid #e9ecef;
  margin-left: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  position: relative;
}

.daksh-timeline-item {
  margin-bottom: 30px;
  position: relative;
}

.daksh-timeline-item:last-child {
  margin-bottom: 0;
}

.daksh-timeline-dot {
  background-color: #ffffff;
  border: 4px solid #0063ae;
  border-radius: 50%;
  height: 20px;
  left: -41px;
  position: absolute;
  top: 5px;
  width: 20px;
}

.daksh-timeline-dot.dot-blue {
  border-color: #0063ae;
}

.daksh-timeline-dot.dot-green {
  border-color: #28a745;
}

.daksh-timeline-dot.dot-orange {
  border-color: #ffa500;
}

.daksh-timeline-dot.dot-danger {
  border-color: #dc3545;
}

.daksh-timeline-dot.dot-gray {
  border-color: #6c757d;
}

.daksh-timeline-date {
  font-size: 0.9rem;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.daksh-timeline-content {
  color: #002b5b;
  font-size: 1rem;
  line-height: 1.6;
}

/* DAKSH / NTC Checklist Styles */
.daksh-checklist {
  list-style: none;
  padding-left: 0;
}

.daksh-checklist-item {
  line-height: 1.8;
  margin-bottom: 15px;
  padding-left: 35px;
  position: relative;
}

.daksh-checklist-item i {
  font-size: 1.2rem;
  left: 0;
  position: absolute;
  top: 2px;
}

.daksh-checklist-item.icon-blue i {
  color: #0063ae;
}

.daksh-checklist-item.icon-green i {
  color: #28a745;
}

.daksh-checklist-item.icon-orange i {
  color: #ffa500;
}

.daksh-checklist-item.icon-danger i {
  color: #dc3545;
}

.daksh-checklist-item.icon-gray i {
  color: #6c757d;
}

/* Big Stat Highlight */
.karmayogi-stat-big {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Viksit Panchayat Additional Backgrounds */
.bg-light-green {
  background-color: rgba(40, 167, 69, 0.05) !important;
}

.bg-light-orange {
  background-color: rgba(255, 153, 51, 0.05) !important;
}

.bg-light-cyan {
  background-color: rgba(0, 168, 232, 0.05) !important;
}

.bg-light-red {
  background-color: rgba(220, 53, 69, 0.05) !important;
}

/* Viksit Panchayat Additional Borders */
.border-left-cyan {
  border-left: 5px solid #00a8e8 !important;
}

/* Viksit Panchayat Icon Colors */
.karmayogi-learning-icon.icon-pink {
  background-color: #e83e8c;
}

/* General Utilities */
.font-12 {
  font-size: 1.2rem !important;
}

.m-0 {
  margin: 0 !important;
}

.text-center {
  text-align: center !important;
}

.text-purple {
  color: #6f42c1 !important;
}

.text-info {
  color: #17a2b8 !important;
}


.text-left {
  text-align: left !important;
}

.h-100 {
  height: 100% !important;
}

/* AGK Specific Styles */
.agk-stat-number {
  font-size: 2.5rem !important;
  font-weight: 800;
  margin-bottom: 5px;
}

.btn-karmayogi-orange {
  background-color: #ffa500;
  border: none;
  border-radius: 8px;
  color: #ffffff !important;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 15px 40px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-karmayogi-orange:hover {
  background-color: #e69500;
  color: #ffffff !important;
}

.phase-card-icon-lg {
  font-size: 3rem;
  margin-bottom: 15px;
}

/* Learning Card Icon Backgrounds */
.karmayogi-learning-icon.icon-blue {
  background-color: #0099ff;
}

.karmayogi-learning-icon.icon-teal {
  background-color: #20c997;
}

.karmayogi-learning-icon.icon-yellow {
  background-color: #ffc107;
}

.karmayogi-learning-icon.icon-orange {
  background-color: #ff9933;
}

.karmayogi-learning-icon.icon-red {
  background-color: #dc3545;
}

.karmayogi-learning-icon.icon-cyan {
  background-color: #00a8e8;
}


/* ULB Overview Card */
.ulb-overview-card {
  background-color: #ffffff;
  border: 3px solid #0063ae;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.ulb-overview-header {
  background-color: #0063ae;
  flex-shrink: 0;
  padding: 15px 20px;
}

.ulb-overview-header h3 {
  align-items: center;
  color: #ffffff;
  display: flex;
  font-size: 1.1rem;
  gap: 10px;
  margin: 0;
}

.ulb-overview-body {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  padding: 18px 20px;
}

.ulb-overview-item {
  margin-bottom: 16px;
}

.ulb-overview-item:last-child {
  margin-bottom: 0;
}

.ulb-overview-item-inner {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.ulb-overview-icon {
  color: #0063ae;
  flex-shrink: 0;
  font-size: 1.1rem;
  margin-top: 2px;
}

.ulb-overview-label {
  color: #002b5b;
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.ulb-overview-value {
  color: #6c757d;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ULB Info Chip (Challenges/Outcomes) */
.ulb-info-chip {
  border-left: 4px solid;
  border-radius: 8px;
  padding: 15px;
  height: 100%;
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ulb-info-chip i {
  font-size: 1.1rem;
}

.ulb-info-chip.blue {
  background-color: rgba(0, 99, 174, 0.1);
  border-color: #0063ae;
}

.ulb-info-chip.green {
  background-color: rgba(40, 167, 69, 0.1);
  border-color: #28a745;
}

.ulb-info-chip.orange {
  background-color: rgba(255, 165, 0, 0.1);
  border-color: #ffa500;
}

.ulb-info-chip.red {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
}

.ulb-info-chip.gray {
  background-color: rgba(108, 117, 125, 0.1);
  border-color: #6c757d;
}

/* ULB Stat Blocks */
.ulb-stat-display {
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.ulb-stat-number {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.ulb-stat-label {
  color: #002b5b;
  font-weight: 700;
  font-size: 0.95rem;
}

.ulb-stat-display.blue {
  background-color: rgba(0, 99, 174, 0.1);
}

.ulb-stat-display.blue .ulb-stat-number {
  color: #0063ae;
}

.ulb-stat-display.green {
  background-color: rgba(40, 167, 69, 0.1);
}

.ulb-stat-display.green .ulb-stat-number {
  color: #28a745;
}

.ulb-stat-display.orange {
  background-color: rgba(255, 165, 0, 0.1);
}

.ulb-stat-display.orange .ulb-stat-number {
  color: #ffa500;
}

/* Workshop Cards Simple */
.ulb-workshop-card {
  border-left: 4px solid;
  border-radius: 8px;
  padding: 15px;
  height: 100%;
}

.ulb-workshop-card.blue {
  background-color: rgba(0, 99, 174, 0.1);
  border-color: #0063ae;
}

.ulb-workshop-card.green {
  background-color: rgba(40, 167, 69, 0.1);
  border-color: #28a745;
}

.ulb-workshop-card.orange {
  background-color: rgba(255, 165, 0, 0.1);
  border-color: #ffa500;
}

.ulb-workshop-card.red {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
}

.ulb-workshop-card.gray {
  background-color: rgba(108, 117, 125, 0.1);
  border-color: #6c757d;
}

.ulb-workshop-title {
  font-weight: 700;
  margin-bottom: 5px;
}

.ulb-workshop-date {
  color: #6c757d;
  font-size: 0.9rem;
}

/* Challenges Box */
.ulb-challenges-box {
  background-color: rgba(0, 99, 174, 0.05);
  border-left: 5px solid #0063ae;
  border-radius: 10px;
  padding: 25px;
}

.ulb-challenge-item {
  background-color: rgba(255, 255, 255, 0.8);
  border-left: 4px solid;
  border-radius: 8px;
  padding: 15px;
  height: 100%;
}

.ulb-challenge-item.blue {
  border-color: #0063ae;
}

.ulb-challenge-item.green {
  border-color: #28a745;
}

.ulb-challenge-item.orange {
  border-color: #ffa500;
}

/* Testimonials Listing Page Styles */
.testimonials-grid-section {
  background-color: #f8f9fa;
  min-height: 500px;
}

.testimonial-video-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e0e0e0;
  overflow: hidden;
  height: auto;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 20px;
}

.testimonial-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #0063ae;
}

.testimonial-video-container {
  position: relative;
  width: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
}

.testimonial-card-video {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  display: block;
}

.testimonial-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.testimonial-card-title {
  font-size: 1.25rem !important;
  color: #003b73 !important;
  margin-bottom: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.testimonial-card-description {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .testimonial-card-title {
    font-size: 1.1rem !important;
  }
}

/* ===========================================
   ABOUT CBC PAGE FIXES
   =========================================== */

/* Centralize Mandate Cards */
.mandate-card {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Vision and Mission Card Alignment */
.vision-mission-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
}

.vision-mission-card .vision-content,
.vision-mission-card .mission-content {
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Reset Vision Icon Wrapper styling if it exists */
.vision-icon-wrapper {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0.5rem !important;
  width: auto !important;
  height: auto !important;
}

/* Ensure icons are centered */
.vision-mission-card i,
.mandate-card i {
  display: inline-block;
}

/* ===========================================
   FIXED VISION & MISSION ICONS + STRETCHED LINK
   =========================================== */

/* Vision and Mission Icon Styling - Overriding previous resets */
.vision-icon-wrapper,
.mission-icon-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  transition: transform 0.3s ease, background-color 0.3s ease !important;
  margin-bottom: 1rem !important;
}

.vision-icon-wrapper {
  background-color: rgba(0, 99, 174, 0.1) !important;
  color: #0063ae !important;
}

.mission-icon-wrapper {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #ffc107 !important;
}

/* Hover Effects */
.vision-mission-card:hover .vision-icon-wrapper,
.vision-icon-wrapper:hover {
  background-color: #0063ae !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.vision-mission-card:hover .vision-icon-wrapper i,
.vision-icon-wrapper:hover i {
  color: #ffffff !important;
}

.vision-mission-card:hover .mission-icon-wrapper,
.mission-icon-wrapper:hover {
  background-color: #ffc107 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.vision-mission-card:hover .mission-icon-wrapper i,
.mission-icon-wrapper:hover i {
  color: #ffffff !important;
}

.vision-icon-wrapper i,
.mission-icon-wrapper i {
  font-size: 2.5rem !important;
  display: inline-block !important;
}

/* Ensure stretched-link works if Bootstrap is missing/old */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  pointer-events: auto;
  background-color: transparent;
}

.position-relative {
  position: relative !important;
}

/* Framework Box Hover Effect */
.framework-box.position-relative:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* =============================================
   AI Impact Summit Posters Section
   ============================================= */
.impact-summit-posters {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.impact-summit-posters__grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}

.impact-summit-posters__item {
  flex: 1;
  max-width: 50%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.impact-summit-posters__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.impact-summit-posters__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 768px) {
  .impact-summit-posters__grid {
    flex-direction: column;
    align-items: center;
  }

  .impact-summit-posters__item {
    max-width: 100%;
    width: 100%;
  }
}

/* === SEARCH PAGE REFINEMENT === */
.search-form {
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  padding: 30px 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  max-width: 900px;
  margin: 20px auto 35px;
  position: relative;
  border: 1px solid #e9eff6;
}

/* Input + Button Row */
.container-inline {
  align-items: center;
  gap: 12px;
}

.container-inline div,
.container-inline label {
  display: inline-block;
  width: 85%;
}

/* Search Input */
#edit-keys {
  flex: 1;
  padding: 9px 16px;
  width: 100%;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #d7e0ea;
  background: #f9fbff;
  transition: all 0.3s ease;
}

#edit-keys::placeholder {
  color: #9aa7b5;
}

#edit-keys:focus {
  outline: none;
  background: #ffffff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

/* Search Button */
#edit-submit {
  padding: 9px 26px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d6efd, #00579b);
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#edit-submit:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #084298, #0094d9);
  box-shadow: 0 8px 18px rgba(13, 110, 253, 0.35);
}

/* About Search Link */
.search-help-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: #0d6efd;
  text-decoration: none;
}

.search-help-link:hover {
  text-decoration: underline;
}



/* ===== Search Button ===== */
#edit-submit {
  padding: 12px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d6efd, #00579b);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

#edit-submit:hover {
  background: linear-gradient(135deg, #084298, #007bff);
  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
}

/* ===== Search Results ===== */
.search-results-wrapper {
  max-width: 1000px;
  margin: 40px auto;
}

.search-results-wrapper h3 {
  /* text-align: center; */
  margin-bottom: 25px;
  color: #003b73;
  font-size: 24px;
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-results li {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: 0.3s ease;
}

.search-results li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Title */
.search-result__title a {
  color: #006da0;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.search-result__title a:hover {
  color: #0074a1;
}

/* Snippet */
.search-result__snippet {
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Pager */
.pager {
  margin-top: 30px;
  text-align: center;
}

.pager__items {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.pager__item a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #f1f1f1;
  text-decoration: none;
  font-size: 14px;
  color: #333;
}

.pager__item.is-active a {
  background: #0d6efd;
  color: #fff;
}

.pager__item a:hover {
  background: #0d6efd;
  color: #fff;
}

@media (max-width: 992px) {

  .container-inline div,
  .container-inline label {
    display: inline-block;
    width: 100%;
  }

  #edit-submit {
    width: 100%;
    margin-top: 10px;
  }

  .search-form {
    margin: 0px auto 35px;
  }
}