/* ==========================================================================
   NKAR Corporate | Official Site — custom.css
   Static conversion of the Elementor homepage (page 7339) + header (13564)
   + footer (13421). Bootstrap 5 is the base layer; all custom styling lives
   here. No inline styles are used anywhere in the markup.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --color-primary: #0D764E;      /* brand green  (elementor 2717c1b)  */
  --color-secondary: #006F45;    /* deep green   (nav / counters)     */
  --color-cream: #F1E9C5;        /* sand cream   (elementor 9a334b5)  */
  --color-gold: #D2B871;         /* gold accent  (elementor d388c81)  */
  --color-dark: #212427;         /* dark slate   (elementor b43bbf9)  */
  --color-ink: #000000;          /* black text   (elementor a87b74b)  */
  --color-white: #FFFFFF;
  --color-gray-text: #333333;
  --color-border: #bcbcbc;
  --color-success: #459647;

  --font-heading: 'Encode Sans', Arial, Helvetica, sans-serif;
  --font-body: 'Encode Sans', Arial, Helvetica, sans-serif;

  --header-h: 90px;
  --header-h-sm: 66px;
  --container-w: 1140px;

  --shadow-card: 0 0 10px rgba(0, 0, 0, 0.1);
  --shadow-card-strong: 0 0 50px 10px rgba(0, 0, 0, 0.1);
  --radius-card: 6px;

  --transition-fast: 0.3s ease;
}

/* ------------------------------------------------------------- base */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 10px);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-ink);
  background-color: var(--color-white);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--color-secondary);
  color: var(--color-white);
  padding: 0.6rem 1rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------ buttons */
.btn {
  font-family: var(--font-heading);
  border-radius: 0;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.btn-brand {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  padding: 0.65rem 1.75rem;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-outline-hero {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  font-weight: 600;
  padding: 0.7rem 2rem;
  background: transparent;
}

.btn-outline-hero:hover,
.btn-outline-hero:focus {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

/* ------------------------------------------------------------- header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: background var(--transition-fast);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.nav-container {
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
}

.brand img {
  height: 60px;
  width: auto;
  display: block;
}

.primary-nav {
  margin-left: auto;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  display: block;
  padding: 0.5rem 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--color-secondary);
}

.nav-links a[aria-current="page"] {
  color: var(--color-secondary);
}

.dropdown-el .drop-toggle .fa-angle-down {
  font-size: 12px;
  transition: transform var(--transition-fast);
}

.dropdown-el.open .drop-toggle .fa-angle-down {
  transform: rotate(180deg);
}

.dropdown-menu-el {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--color-white);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.dropdown-el.open .dropdown-menu-el,
.dropdown-el:hover .dropdown-menu-el,
.dropdown-el:focus-within .dropdown-menu-el {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu-el li {
  border-left: 5px solid var(--color-white);
  transition: background-color var(--transition-fast);
}

.dropdown-menu-el li:hover {
  background-color: var(--color-primary);
  border-left: 5px solid var(--color-secondary);
}

.dropdown-menu-el a {
  display: block;
  padding: 0.6rem 1rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: 0;
}

.dropdown-menu-el a:hover {
  color: var(--color-white);
}

.contact-btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.55rem 1.25rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.contact-btn:hover,
.contact-btn:focus {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0.35rem;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  background-color: #3c3c3c; /* original slide fallback color */
}

/* Slider viewport — every slide is stacked here and cross-faded (jQuery driven) */
.hero-slider {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

/* Each slide fills the viewport; only .is-active is painted */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.8s ease, visibility 0s linear 0s;
}

.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
  z-index: 1;
}

/* Desktop: content pinned to the left, vertically centred (original slider) */
.hero-content {
  position: absolute;
  top: 50%;
  left: 6.25rem;               /* original margin: 0 100px */
  transform: translateY(-50%);
  z-index: 2;
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 1.9rem;
  color: var(--color-white);
}

.hero-title {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 600;
  color: var(--color-white);
  max-width: 15em;
  margin-bottom: 1.5rem;
}

.hero-desc {
  max-width: 42em;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.hero-actions {
  display: flex;
  gap: 0.6rem;
}

/* Navigation dots — sit at the bottom of the hero, above the active slide */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 3;                  /* above .hero-slide (1) and .hero-content (2) */
  display: flex;
  align-items: center;
  gap: 1rem;                   /* 12px dot + 16px gap = 28px, matching ::after hit area */
}

.hero-dot {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              transform var(--transition-fast);
}

/* Enlarge the touch/click target to ~28px without changing the visual dot */
.hero-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.hero-dot.is-active {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  transform: scale(1.25);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

/* ------------------------------------------------------- section titles */
.section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); /* 36px desktop, 22 tablet, 20 mobile */
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.25;
  max-width: 90%;
}

.heading-with-sun {
  position: relative;
  z-index: 1;
}

.title-sun {
  position: absolute;
  top: -50px;
  left: -50px;
  z-index: -1;
  width: 100px;
  height: 100px;
  animation: sun-rotate 5s linear infinite;
  transform-origin: center;
}

@keyframes sun-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --------------------------------------------------------- intro section */
.intro-section {
  padding: 4.5rem 0;
}

.float-slow {
  animation: float-slow 1s ease-in-out infinite alternate;
}

@keyframes float-slow {
  from { transform: translate(0, 0); }
  to   { transform: translate(5px, 5px); }
}

/* ------------------------------------------------------ subsidiary cards */
.subsidiaries-section {
  padding: 1rem 0 4.5rem;
}

.subsidiary-card {
  position: relative;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* cream corner fold, grows on hover (original .nkar_subs_card::after) */
.subsidiary-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-right: 50px solid var(--color-cream);
  border-top: 50px solid var(--color-white);
  z-index: 10;
  transition: border-width var(--transition-fast);
}

.subsidiary-card:hover::after {
  border-right-width: 100px;
  border-top-width: 100px;
}

.subsidiary-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.subsidiary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.subsidiary-card:hover .subsidiary-media img {
  transform: scale(1.05);
}

.subsidiary-body {
  padding: 1.5rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.subsidiary-title {
  font-size: 1.375rem;
  font-weight: 600;
  min-height: 60px; /* original .ha-card-title height */
  margin-bottom: 0.75rem;
}

.subsidiary-text {
  font-size: 14px;
  color: var(--color-ink);
  flex: 1;
}

.green_text{
  color: #0D764E;
  font-weight: bold;
}

/* ------------------------------------------------------ accomplishments */
.accomplishments-section {
  background-color: var(--color-cream);
  padding: 6rem 0;
}

.about-stack {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-circle {
  width: 250px;
  height: 250px;
  max-width: 42vw;
  max-height: 42vw;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-card);
}

.about-circle-overlap {
  margin-left: -45px;
}

.counters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.counter-item {
  display: flex;
  flex-direction: column;
}

.counter-value {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 600;
  color: var(--color-secondary);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  line-height: 1.1;
}

.counter-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------- tagline */
.tagline-section {
  padding: 4rem 0 3rem;
}

.tagline-text {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  color: var(--color-dark);
}

/* --------------------------------------------------------- service grid */
.services-section {
  padding: 2rem 0 6rem;
}

.services-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.service-box {
  border-radius: var(--radius-card);
  padding: 1.9rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.service-box-light {
  background-color: var(--color-cream);
  box-shadow: var(--shadow-card);
}

.service-box-dark {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-card-strong);
}

.service-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.service-box-light .service-icon {
  color: var(--color-primary);
}

.service-box-dark .service-icon {
  color: var(--color-white);
}

.service-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.service-box-light .service-title {
  color: var(--color-ink);
}

.service-box-dark .service-title {
  color: var(--color-white);
}

.service-text {
  font-size: 0.95rem;
  text-align: left;
  flex: 1;
}

.service-box-light .service-text {
  color: var(--color-dark);
}

.service-box-dark .service-text {
  color: var(--color-white);
}

.btn-service-dark {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.9rem 1.5rem;
  font-weight: 400;
}

.btn-service-dark:hover,
.btn-service-dark:focus {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-service-light {
  background-color: var(--color-white);
  color: var(--color-ink);
  padding: 0.9rem 1.5rem;
  font-weight: 400;
}

.btn-service-light:hover,
.btn-service-light:focus {
  background-color: var(--color-cream);
  color: var(--color-ink);
}

/* ----------------------------------------------------------- CTA banner */
.cta-section {
  position: relative;
  margin-bottom: 3.75rem;
  padding: 9.5rem 0;
  background-image: url('../../images/cta-bg.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
  z-index: 0;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-cream);
  opacity: 0.8;
  z-index: -1;
}

.cta-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1rem;
}

.cta-subtitle {
  font-size: 1.05rem;
  color: var(--color-dark);
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-cta-left,
.btn-cta-right {
  padding: 1rem 3.1rem;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--color-white);
  border-radius: 0;
}

.btn-cta-left {
  background-color: var(--color-white);
  color: var(--color-ink);
}

.btn-cta-left:hover,
.btn-cta-left:focus {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

.btn-cta-right {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-cta-right:hover,
.btn-cta-right:focus {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.cta-or {
  font-size: 0.9rem;
  color: var(--color-dark);
  margin: 0 0.4rem;
}

/* ------------------------------------------------------------- partners */
.partners-section {
  padding: 1.25rem 0 3.75rem;
  margin-bottom: 5rem;
}

.partners-visual {
  margin-top: 2.5rem;
}

.partners-desktop {
  max-width: 100%;
}

.partners-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.partners-mobile img {
  max-width: 100%;
}

/* ----------------------------------------------------------------- news */
.news-section {
  padding: 0 0 5rem;
}

.news-heading {
  margin-bottom: 3rem;
}

.news-card {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.news-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  transform: translateY(-4px);
}

.news-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

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

.news-body {
  padding: 1.25rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-date {
  font-size: 0.85rem;
  color: var(--color-gray-text);
  margin-bottom: 0.6rem;
}

.news-date .fa-calendar {
  color: var(--color-primary);
  margin-right: 0.4rem;
}

.news-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.news-title a {
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.news-title a:hover,
.news-title a:focus {
  color: var(--color-primary);
}

.news-excerpt {
  font-size: 0.95rem;
  color: var(--color-gray-text);
  flex: 1;
}

.news-loadmore {
  text-align: center;
  margin-top: 3rem;
}

/* -------------------------------------------------------- bottom banner */
.bottom-banner {
  padding: 2rem 0 3.5rem;
}

/* -------------------------------------------------------------- footer */
#nkar-footer {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), #f6ea9c);
  padding: 2.5rem 1.25rem 1.25rem;
  color: #2c4d2d;
  font-family: var(--font-body);
  line-height: 1.6;
}

.nkar-footer-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 1.9rem;
  max-width: 1100px;
}

.nkar-footer-logo img {
  max-width: 150px;
  margin-bottom: 1.25rem;
}

.nkar-footer-contact p {
  margin: 0.4rem 0;
  font-size: 14px;
  color: #2e573b;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.nkar-footer-contact i {
  color: #136d39;
  font-size: 15px;
  margin-top: 0.2rem;
  min-width: 1em;
}

.nkar-footer-links .footer-col-title,
.nkar-footer-services .footer-col-title,
.nkar-footer-newsletter .footer-col-title {
  margin-bottom: 0.95rem;
  font-size: 15px;
  font-weight: 700;
  color: #136d39;
}

.nkar-footer-links ul,
.nkar-footer-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nkar-footer-links ul li,
.nkar-footer-services ul li {
  margin-bottom: 0.5rem;
}

.nkar-footer-links a,
.nkar-footer-services a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: color var(--transition-fast);
}

.nkar-footer-links a:hover,
.nkar-footer-services a:hover,
.nkar-footer-links a:focus,
.nkar-footer-services a:focus {
  color: #136d39;
}

.nkar-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nkar-newsletter-input {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1px solid #ccc;
}

.nkar-newsletter-input i {
  padding: 0 0.6rem;
  color: #136d39;
}

.nkar-newsletter-input input {
  border: none;
  outline: none;
  padding: 0.75rem;
  flex: 1;
  font-size: 14px;
  min-width: 0;
}

.nkar-newsletter-form button {
  background: #136d39;
  color: var(--color-white);
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background var(--transition-fast);
}

.nkar-newsletter-form button:hover,
.nkar-newsletter-form button:focus {
  background: #0f4a27;
}

.newsletter-msg {
  margin: 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}

.newsletter-msg.success {
  color: var(--color-success);
}

.newsletter-msg.error {
  color: #b3261e;
}

.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.8rem 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.newsletter-consent input {
  width: auto;
  margin-top: 0.2rem;
}

.newsletter-consent a {
  color: inherit;
  text-decoration: underline;
}

.nkar-footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #555;
  max-width: 1100px;
}

.nkar-footer-bottom p {
  margin: 0;
}

.nkar-social-icons a {
  color: #136d39;
  font-size: 18px;
  margin-left: 0.75rem;
  transition: color var(--transition-fast);
}

.nkar-social-icons a:hover,
.nkar-social-icons a:focus {
  color: #0f4a27;
}

/* -------------------------------------------------------- whatsapp float */
.whatsapp-float {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1040;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  text-decoration: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  color: var(--color-white);
  opacity: 0.8;
  transform: scale(1.05);
}

/* ----------------------------------------------------------- cookie bar */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--color-dark);
  color: var(--color-white);
  padding: 1rem 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cookie-text {
  margin: 0;
  font-size: 0.9rem;
  flex: 1;
  min-width: 240px;
}

.cookie-actions {
  display: flex;
  gap: 0.6rem;
}

.btn-cookie-accept {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

.btn-cookie-accept:hover,
.btn-cookie-accept:focus {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-cookie-reject {
  background-color: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-weight: 600;
}

.btn-cookie-reject:hover,
.btn-cookie-reject:focus {
  background-color: var(--color-white);
  color: var(--color-dark);
}

/* ------------------------------------------------------ reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------- responsive layout */
@media (max-width: 1023.98px) {
  .hero-slider {
    height: 60vh;
    min-height: 420px;
  }

  /* Tablet/mobile: centred translucent content card over the slide image */
  .hero-content {
    inset: auto;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    height: auto;
    max-width: 720px;
    background: rgba(33, 36, 39, 0.59);
    padding: 2.5rem 1.25rem;
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .hero-slide-overlay {
    display: none;
  }

  .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 991.98px) {
  :root {
    --header-h: var(--header-h-sm);
  }

  .site-header {
    background: rgba(255, 255, 255, 0.95);
  }

  .nav-container {
    flex-wrap: wrap;
    position: relative;
  }

  .menu-toggle {
    display: flex;
    order: 2;
  }

  .brand {
    order: 1;
  }

  .brand img {
    height: 48px;
  }

  .contact-btn {
    display: none;
  }

  .primary-nav {
    order: 3;
    width: 100%;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: center;
    background: var(--color-white);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  }

  .nav-links.nav-open {
    max-height: 80vh;
    overflow-y: auto;
    padding: 0.6rem 0;
  }

  .nav-links > li {
    width: 100%;
  }

  .nav-links a {
    padding: 0.7rem 1rem;
  }

  .dropdown-menu-el {
    position: static;
    background: #f9f9f9;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: hidden;
    max-height: 0;
    transform: none;
    overflow: hidden;
    transition: max-height 0.3s ease, visibility 0.3s;
    min-width: 0;
  }

  .dropdown-el.open .dropdown-menu-el {
    visibility: visible;
    max-height: 600px;
  }

  .dropdown-menu-el li {
    border-left: 5px solid #f9f9f9;
  }

  .dropdown-menu-el li:hover {
    background-color: var(--color-primary);
    border-left: 5px solid var(--color-secondary);
  }

  .dropdown-menu-el a {
    padding: 0.6rem 1rem;
  }

  .accomplishments-section {
    padding: 3.75rem 0;
  }

  .counters-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-circle {
    width: 190px;
    height: 190px;
  }

  .nkar-footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .cta-section {
    padding: 6.25rem 0;
  }
}

@media (max-width: 767.98px) {
  .hero-slider {
    height: 90vh;
    min-height: 520px;
  }

  /* Dots sit closer to the edge on small screens */
  .hero-dots {
    bottom: 1rem;
  }

  .hero-title {
    font-size: 1.9rem;
  }

  .title-sun {
    top: -40px;
    left: -25px;
    width: 80px;
    height: 80px;
  }

  .section-title {
    max-width: 100%;
  }

  .intro-section {
    padding: 3rem 0;
  }

  .btn-cta-left,
  .btn-cta-right {
    padding: 0.9rem 1.9rem;
    font-size: 0.8rem;
  }

  .nkar-footer-container {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .nkar-footer-bottom {
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
  }

  .cookie-bar-inner {
    justify-content: center;
    text-align: center;
  }
}

/* ------------------------------------------------ narrow-handset refinements
   Redmi Note 14 uses a 412px-wide CSS viewport in portrait.  These rules keep
   the shared shell and the long interactive pages comfortable at that width
   without changing the tablet or desktop composition. */
@media (max-width: 575.98px) {
  :root {
    --header-h-sm: 64px;
  }

  .nav-container {
    min-height: var(--header-h-sm);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .brand img {
    height: 42px;
  }

  /* The collapsed navigation is absolutely positioned.  Removing it from
     the flex flow prevents an empty second row below the brand and toggle. */
  .primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: auto;
    height: 0;
    margin: 0;
    line-height: 0;
  }

  /* A 44px control is substantially easier to use one-handed than the
     original 36px hamburger hit area. */
  .menu-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .nav-links {
    top: calc(100% + 0.25rem);
  }

  .nav-links.nav-open {
    max-height: calc(100dvh - var(--header-h-sm) - 0.25rem);
    padding: 0.25rem 0;
  }

  .nav-links a,
  .dropdown-menu-el a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* The fixed header overlays the hero.  Start its mobile content below the
     header so the panel and its first line are never obscured. */
  .hero-content {
    top: calc(var(--header-h-sm) + 0.75rem);
    width: calc(100% - 1.5rem);
    padding: 1.5rem 1rem;
  }

  .hero-dots {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .cookie-bar {
    padding: 0.75rem 0 max(0.75rem, env(safe-area-inset-bottom));
  }

  .cookie-text {
    min-width: 0;
    font-size: 0.875rem;
  }

  .cookie-actions .btn {
    min-height: 44px;
  }

  /* Make radio/checkbox labels practical touch targets. */
  .gf-option,
  .tp-check {
    min-height: 44px;
    padding: 0.35rem 0;
  }

  .tp-options {
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
  }

  .gf-grid > *,
  .tp-grid > *,
  .tp-day > * {
    min-width: 0;
  }

  /* CMS-authored articles may include wide data tables.  Keep them usable
     with a local horizontal scroller instead of widening the whole page. */
  .bl-article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bl-article-body {
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .title-sun,
  .float-slow,
  .hero-slide,
  .hero-dot,
  .reveal {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Company Overview page (company-overview.html)
   ========================================================================== */

/* Inner-page header: solid from the start (no hero behind it) */
.site-header.is-inner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------- intro section */
.co-intro {
  padding: 100px 0 150px;
}

/* Two overlapping photos (original). The media box is 77.7% of the column so
   that the large image plus the smaller one's right-hand overhang fill it
   exactly — the pair can never spill outside the column at any width. */
.co-about-media {
  position: relative;
  width: 77.7%;
}

/* Large photo — top-left, no frame, soft drop shadow */
.co-about-img-main {
  display: block;
  width: 100%;
  aspect-ratio: 446 / 355;      /* crop proportions of the original */
  object-fit: cover;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

/* Small photo — overlaps the large one's bottom-right and overhangs its edge */
.co-about-img-overlay {
  position: absolute;
  left: 44.8%;
  bottom: 0;
  width: 83.9%;
  aspect-ratio: 374 / 238;
  object-fit: cover;
  border: 5px solid var(--color-white);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.co-heading {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  text-transform: uppercase;
  line-height: 0.9;
  color: #242424;
  margin-bottom: 0.5rem;
}

/* Green zigzag rule under the heading (original: 8 peaks, 16px period) */
.co-divider {
  width: 22%;
  color: var(--color-primary);
  margin: 1rem 0 1.25rem;
}

.co-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

.co-text {
  text-align: left;
  color: var(--color-ink);
}

.co-text p {
  margin-bottom: 1rem;
}

.co-text p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------- vision & mission */
.vm-section {
  background: linear-gradient(135deg, #0d2318 0%, #133122 50%, #0d2318 100%);
  padding: 60px 40px;
  font-family: 'Jost', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: -90px 0 50px;
}

.vm-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(212, 175, 90, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(30, 160, 90, 0.08) 0%, transparent 40%);
  pointer-events: none;
}

.vm-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 90, 0.6), transparent);
}

.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 48px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

.vm-divider {
  background: linear-gradient(180deg, transparent, rgba(212, 175, 90, 0.4), transparent);
  align-self: stretch;
  margin: 20px 0;
}

.vm-card {
  padding: 0 20px;
  animation: vm-fade-up 0.7s ease both;
}

.vm-card:first-child {
  animation-delay: 0.1s;
}

.vm-card:last-child {
  animation-delay: 0.25s;
}

@keyframes vm-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vm-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 90, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: rgba(212, 175, 90, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.vm-card:hover .vm-icon-wrap {
  transform: scale(1.08);
  border-color: rgba(212, 175, 90, 0.7);
}

.vm-icon-wrap svg {
  width: 28px;
  height: 28px;
}

.vm-label {
  font-family: 'Jost', Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(212, 175, 90, 0.85);
  margin-bottom: 10px;
}

.vm-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  color: #f5f0e8;
  margin-bottom: 20px;
  line-height: 1.2;
}

.vm-title em {
  font-style: italic;
  color: rgba(212, 175, 90, 0.9);
}

.vm-line {
  width: 40px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(212, 175, 90, 0.8), transparent);
  margin-bottom: 20px;
  transition: width 0.4s ease;
}

.vm-card:hover .vm-line {
  width: 64px;
}

.vm-body {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(220, 215, 205, 0.75);
  font-weight: 300;
}

.vm-body strong {
  color: rgba(220, 215, 205, 0.95);
  font-weight: 400;
}

/* ------------------------------------------- stability through diversity */
.co-diversity {
  background-image:
    linear-gradient(120deg, rgba(241, 233, 197, 0.92) 30%, rgba(13, 118, 78, 0.92) 100%),
    url('../../images/co-stability-bg.webp');
  background-size: cover;
  background-position: center;
  padding: 60px 0;
}

.co-diversity-inner {
  max-width: 1200px;
}

.co-subtitle {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  color: #242424;
}

.co-diversity .co-subtitle {
  color: var(--color-dark);
  padding: 30px;
}

.co-brand-list {
  margin: 0;
}

/* Small gap so each white card reads as a separate card */
.co-brand-list li + li {
  margin-top: 1rem;
}

.co-brand-list li {
  list-style: none;
}

.co-brand-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 30px 20px 30px 30px;
  text-decoration: none;
  /* Card surface — the items previously sat transparent over the section's
     gradient/photo background, which made the copy hard to read. */
  background-color: var(--color-white);
  border-radius: var(--radius-card);
}

.co-brand-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.co-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.co-brand-title {
  font-size: 1rem;
  font-weight: 700;
  color: #242424;
  transition: color var(--transition-fast);
}

.co-brand-item:hover .co-brand-title {
  color: var(--color-primary);
}

.co-brand-detail {
  font-size: 0.85rem;
  font-weight: 400;
  color: #424242;
}

/* ----------------------------------------------- stability of company */
.co-company {
  padding: 100px 0;
}

.co-company-lead {
  font-size: 1.05rem;
  font-weight: 400;
  margin: 1.25rem 0 2rem;
}

.co-accordion-item {
  border: 0;
  border-radius: 6px;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  overflow: hidden;
}

.co-accordion .accordion-button {
  padding: 25px 20px;
  font-weight: 700;
  color: #2b2b2b;
  background-color: var(--color-white);
  box-shadow: none;
  gap: 15px;
}

.co-accordion .accordion-button:not(.collapsed) {
  color: var(--color-primary);
  background-color: var(--color-white);
}

.co-accordion .accordion-button:focus {
  box-shadow: none;
  outline: 3px solid var(--color-secondary);
  outline-offset: -3px;
}

.co-accordion .accordion-button .co-acc-closed {
  display: inline-block;
}

.co-accordion .accordion-button .co-acc-open {
  display: none;
}

.co-accordion .accordion-button:not(.collapsed) .co-acc-closed {
  display: none;
}

.co-accordion .accordion-button:not(.collapsed) .co-acc-open {
  display: inline-block;
}

.co-accordion .accordion-body {
  padding: 0 20px 20px;
  background-color: var(--color-white);
}

.co-accordion .accordion-body p {
  margin: 0;
}

.co-company-media {
  margin: 0;
}

.co-company-media img {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

/* ----------------------------------------- affiliations & memberships */
.co-memberships {
  margin: 100px 0;
}

.co-memberships-media {
  margin: 0;
}

.co-memberships-media img {
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1023.98px) {
  .co-intro {
    padding: 60px 20px;
  }

  .co-diversity {
    padding: 50px 20px;
  }

  .co-diversity .co-subtitle {
    padding: 20px 0 0;
  }

  .co-company {
    padding: 50px 0;
  }

  .co-memberships {
    margin: 60px 0 0;
  }
}

@media (max-width: 767.98px) {
  .vm-section {
    padding: 60px 24px;
    margin: 0 0 50px;
  }

  .vm-grid {
    grid-template-columns: 1fr;
    gap: 48px 0;
  }

  .vm-divider {
    display: none;
  }

  .vm-title {
    font-size: 26px;
  }

  .co-brand-item {
    padding: 24px 10px;
    gap: 1rem;
  }

  .co-divider {
    width: 40%;
  }

  .co-intro {
    padding: 40px 16px 60px;
  }
}

/* ==========================================================================
   Our Strengths page (our-strengths.html)
   ========================================================================== */

.os-section {
  padding-bottom: 40px;
}

/* Full-width layout, matching the original Elementor container (max-width:none) */
.os-container {
  width: 100%;
  padding: 0 35px;
}

/* Vertical rhythm between cards (mirrors the original section paddings) */
.os-row {
  padding: 60px 0;
}

.os-row.row-first {
  margin-top: 180px;
  padding: 60px 0 30px;
}

.os-row.row-tight {
  padding: 0 0 75px;
}

/* ------------------------------------------------------------ card */
.strength-card {
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  border-radius: 5px;
  box-shadow: 0 3px 40px rgba(36, 36, 36, 0.1);
}

/* Image is nudged up so it breaks out above the card edge (original -50px offset) */
.strength-figure {
  flex: 0 0 502px;
  max-width: 502px;
  height: 375px;
  margin: 0;
  transform: translateY(-50px);
  border-radius: 5px 0 0 5px;
  overflow: hidden;
}

.strength-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.strength-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 50px;
}

.strength-title {
  margin: 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.25;
  color: #151515;
}

.os-banner {
  padding: 0 0 60px;
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .strength-card {
    flex-direction: column;
    align-items: stretch;
  }

  .strength-figure {
    flex: 0 0 auto;
    width: 280px;
    height: 280px;
    max-width: 280px;
    margin: 0 auto;
    border-radius: 5px;
  }

  .strength-body {
    width: 100%;
    margin-top: -50px;
    padding: 0 50px;
  }
}

@media (max-width: 767.98px) {
  .os-container {
    padding: 0 15px;
  }

  .os-row {
    padding: 60px 0 30px;
  }

  .os-row.row-first {
    margin-top: 140px;
    padding: 30px 0;
  }

  .os-row.row-tight {
    padding: 0 0 50px;
  }

  .strength-card {
    padding: 20px 0;
  }

  .strength-figure {
    width: 90%;
    max-width: 90%;
    height: auto;
  }

  .strength-figure img {
    height: auto;
    border-radius: 5px;
  }

  .strength-body {
    margin-top: -50px;
    padding: 20px 20px 0;
  }

  .strength-title {
    margin-bottom: 10px;
    font-size: 26px;
  }
}

/* ==========================================================================
   Reports page (reports.html)
   ========================================================================== */

.rp-hero {
  background-color: var(--color-white);
  padding: 150px 0 0;
}

.rp-hero-title {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: #005220;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.rp-card-section {
  padding: 50px 0 120px;
}

.rp-card {
  background-color: var(--color-cream);
  padding: 50px 50px 80px;
  text-align: center;
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.rp-card-title {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700;
  color: #005220;
  margin-bottom: 2rem;
}

.rp-card-btn .fa-file-pdf {
  font-size: 1.05em;
}

@media (max-width: 991.98px) {
  .rp-hero {
    padding-top: 120px;
  }

  .rp-card {
    padding: 35px 25px 50px;
  }

  .rp-card-section {
    padding: 35px 0 70px;
  }
}

/* ==========================================================================
   Sustainability Policy page (sustainability-policy.html)
   ========================================================================== */

.sp-section {
  padding: 160px 0 100px;
}

.sp-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 2.5rem;
}

.sp-list {
  max-width: 820px;
  margin: 0;
}

.sp-list li + li {
  margin-top: 1.25rem;
}

.sp-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.75rem;
  background-color: var(--color-white);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sp-item:hover,
.sp-item:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.sp-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-cream);
  color: var(--color-primary);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sp-item-title {
  font-weight: 700;
  color: #242424;
  transition: color var(--transition-fast);
}

.sp-item:hover .sp-item-title,
.sp-item:focus .sp-item-title {
  color: var(--color-primary);
}

.sp-item-meta {
  font-size: 0.85rem;
  color: var(--color-gray-text);
}

@media (max-width: 991.98px) {
  .sp-section {
    padding: 120px 0 70px;
  }
}

/* ==========================================================================
   Privacy Policy page (privacy-policy.html)
   ========================================================================== */

.pp-section {
  padding: 160px 0 90px;
}

.pp-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 2rem;
}

.pp-content {
  max-width: 880px;
}

.pp-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2rem 0 0.75rem;
}

.pp-content p {
  color: var(--color-dark);
  line-height: 1.75;
  margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .pp-section {
    padding: 120px 0 60px;
  }
}

/* ==========================================================================
   Site map page (site-map.html)
   ========================================================================== */

.sm-section {
  padding: 160px 0 90px;
}

.sm-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 2rem;
}

.sm-list {
  max-width: 760px;
  margin: 0;
  columns: 2;
  column-gap: 3rem;
}

.sm-list li {
  margin-bottom: 0.7rem;
  break-inside: avoid;
}

.sm-list a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sm-list a:hover,
.sm-list a:focus {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .sm-section {
    padding: 120px 0 60px;
  }
}

@media (max-width: 575.98px) {
  .sm-list {
    columns: 1;
  }
}

/* ==========================================================================
   Contact Us page (contact.html)
   ========================================================================== */

.cu-intro {
  padding: 150px 0 0;
}

.cu-title {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 600;
  color: #242424;
  text-align: center;
  margin-bottom: 1.5rem;
}

.cu-lead {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-dark);
  line-height: 1.75;
}

.cu-cards-section {
  padding: 50px 0 0;
}

.cu-card {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 2rem 1.5rem;
  text-align: center;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.cu-card-icon {
  color: var(--color-primary);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.cu-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

.cu-card-text {
  color: var(--color-ink);
  margin: 0;
}

.cu-card-link {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
}

.cu-card-link:hover,
.cu-card-link:focus {
  color: var(--color-secondary);
}

.cu-form-section {
  padding: 60px 0 80px;
}

.cu-form {
  max-width: 600px;
  margin: 0 auto 60px;
  padding: 30px;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.cu-field {
  margin-bottom: 1.1rem;
}

.cu-field label {
  display: block;
  font-weight: 600;
  color: var(--color-gray-text);
  margin-bottom: 0.4rem;
}

.cu-field input,
.cu-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cu-field input:focus,
.cu-field textarea:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.cu-field input.is-invalid,
.cu-field textarea.is-invalid {
  border-color: #dc3545;
}

/* Kept in the DOM to catch indiscriminate form bots, but unavailable to people. */
.cu-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.newsletter-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cu-submit {
  margin: 0;
}

.cu-submit-btn {
  background: linear-gradient(135deg, #28a745, #1e7e34);
  color: var(--color-white);
  border: none;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cu-submit-btn:hover,
.cu-submit-btn:focus {
  background: linear-gradient(135deg, #1e7e34, #155d27);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
}

.cu-form-msg {
  margin: 1rem 0 0;
  font-size: 14px;
  min-height: 1.2em;
}

.cu-form-msg.success {
  color: #1e7e34;
}

.cu-form-msg.error {
  color: #a71d2a;
}

.cu-map {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  line-height: 0;
}

.cu-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 991.98px) {
  .cu-intro {
    padding-top: 120px;
  }

  .cu-form-section {
    padding: 40px 0 60px;
  }
}

@media (max-width: 767.98px) {
  .cu-form {
    padding: 22px 18px;
    margin-bottom: 40px;
  }

  .cu-map iframe {
    height: 300px;
  }
}

/* ==========================================================================
   Insight Resort page (insight-resort.html)
   Static conversion of Elementor page 736. Layout measured from the source
   page at 1440px: full-bleed 50/50 rows, #242424 headings at 34px, body copy
   justified at 16px/1.6, green (#0D764E) feature-list check icons.
   ========================================================================== */

/* ---------------------------------------------------------- section shell */
.ir-intro {
  padding: 60px 0 0;
  overflow: hidden;
}

.ir-why {
  padding: 110px 0 0;
}

.ir-rooms {
  padding: 100px 0 0;
}

.ir-facilities {
  padding: 100px 0 0;
}

.ir-intro-row,
.ir-why-row,
.ir-rooms-row {
  margin-left: 0;
  margin-right: 0;
}

/* The source page pads both hero columns by 50px at desktop. */
.ir-intro-col {
  padding: 50px;
}

.ir-intro-media-col {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------- headings */
.ir-title {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.3;
  color: #242424;
}

.ir-title-plain {
  font-weight: 700;
}

.ir-highlight {
  color: var(--color-primary);
}

/* Centred title. The box is shrunk to the text and centred with auto margins
   (rather than text-align:center on a full-width block) so the absolutely
   positioned .title-sun anchors to the text's left edge — the same -50px
   offset used by the other section titles — instead of the container's
   far-left corner. */
.ir-facilities-title {
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* ------------------------------------------------------------------ copy */
.ir-text {
  text-align: justify;
  color: var(--color-ink);
  line-height: 1.6; /* matches the source page's 16px / 25.6px copy */
}

.ir-text p {
  margin-bottom: 1rem;
}

.ir-text p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------- hosted video */
.ir-video {
  position: relative;
  width: 100%;
  margin: 0 0 20px;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.ir-video-el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ir-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ir-video-play[hidden] {
  display: none;
}

.ir-video-play::before,
.ir-video-play::after {
  grid-area: 1 / 1;
  content: '';
}

.ir-video-play::before {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
}

.ir-video-play:focus-visible::before {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.ir-video-play::after {
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid #fff;
}

/* ------------------------------------------------------ "why" media card */
.ir-why-media-col {
  padding: 0 30px;
}

.ir-why-media {
  margin: 0;
}

.ir-why-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 15px solid var(--color-white);
  border-radius: 20px 250px 270px 270px;
  box-shadow: var(--shadow-card);
}

.ir-why-body-col {
  padding: 30px;
}

.ir-why-btn {
  margin-top: 30px;
}

/* ------------------------------------------------------- rooms carousel */
.ir-rooms-title {
  margin-bottom: 0;
}

.ir-carousel {
  margin-bottom: 20px;
}

.ir-carousel-inner {
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.ir-carousel-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ir-carousel-control {
  width: 8%;
  opacity: 0.85;
}

.ir-carousel-control:hover,
.ir-carousel-control:focus {
  opacity: 1;
}

.ir-carousel-indicators {
  margin-bottom: 0.5rem;
}

.ir-carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background-color: var(--color-primary);
}

/* --------------------------------------------------------- feature list */
.ir-feature-list {
  margin: 0;
}

.ir-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 10px 0;
}

.ir-feature-list i {
  flex: 0 0 auto;
  margin-top: 0.15em;
  font-size: 21px;
  line-height: 1;
  color: var(--color-primary);
}

.ir-feature-list span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #464646;
}

/* ------------------------------------------------------ bottom banner */
.ir-banner {
  margin-top: 60px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1023.98px) {
  .ir-intro {
    padding: 40px 0 0;
  }

  .ir-why,
  .ir-rooms,
  .ir-facilities {
    padding-top: 70px;
  }

  .ir-intro-col,
  .ir-intro-media-col,
  .ir-why-media-col,
  .ir-why-body-col {
    padding: 25px;
  }

  .ir-intro-media-col,
  .ir-why-media-col {
    order: -1;
  }

  .ir-why-media img {
    border-radius: 20px 180px 180px 180px;
  }
}

@media (max-width: 767.98px) {
  .ir-why,
  .ir-rooms,
  .ir-facilities {
    padding-top: 50px;
  }

  .ir-title {
    font-size: 26px;
  }

  .ir-intro-col,
  .ir-intro-media-col,
  .ir-why-media-col,
  .ir-why-body-col {
    padding: 18px;
  }

  .ir-feature-list span {
    font-size: 16px;
  }

  .ir-banner {
    margin-top: 40px;
  }
}

@media (max-width: 575.98px) {
  .ir-why-media img {
    border-width: 10px;
    border-radius: 14px 110px 110px 110px;
  }

  .ir-carousel-control {
    width: 14%;
  }
}

/* ==========================================================================
   Blog / News listing page (blog.html)
   ========================================================================== */

.bl-section {
  padding: 150px 0 90px;
}

.bl-heading {
  margin-bottom: 3rem;
}

.bl-pagination {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 991.98px) {
  .bl-section {
    padding: 120px 0 60px;
  }
}

/* ==========================================================================
   NKAR Tours page (tours.html)
   ========================================================================== */

.tm-section {
  padding: 100px 0;
}

/* The first section sits under the fixed inner header */
.tm-inbound {
  padding: 150px 0 100px;
}

.tm-heading {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: #242424;
  margin-bottom: 0.75rem;
}

.tm-divider {
  width: 18%;
  min-width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  margin-bottom: 1.75rem;
}

.tm-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #242424;
}

.tm-text p {
  margin-bottom: 1rem;
}

.tm-text p:last-child {
  margin-bottom: 0;
}

.tm-actions {
  margin-top: 1.75rem;
}

.tm-actions-center {
  text-align: center;
}

.tm-btn {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 28px;
}

/* --------------------------------------------------- inbound holidays */
.tm-inbound-media {
  margin: 0;
  text-align: center;
}

.tm-inbound-media img {
  border: 5px solid var(--color-white);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------- mice */
.tm-mice-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tm-mice-item {
  margin: 0;
}

.tm-mice-item img {
  width: 100%;
  border: 5px solid var(--color-white);
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------ transportation */
.tm-fleet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tm-fleet-item {
  margin: 0;
}

.tm-fleet-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  background-color: var(--color-cream);
  box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------- why choose us */
.tm-check-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}

.tm-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: #242424;
}

.tm-check-list i {
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1.5;
  flex: 0 0 auto;
}

/* ------------------------------------------------ other services cards */
.tm-other-title {
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: 600;
  text-align: center;
  color: #242424;
  margin-bottom: 2.5rem;
}

.tm-card {
  height: 100%;
  text-align: center;
  padding: 40px 30px;
  background-color: var(--color-white);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--transition-fast);
}

.tm-card:hover {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.tm-card-icon {
  display: inline-block;
  padding: 10px;
  font-size: 40px;
  line-height: 1;
  color: var(--color-primary);
}

.tm-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0.75rem 0 0.75rem;
}

.tm-card-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0;
}

@media (max-width: 991.98px) {
  .tm-section,
  .tm-inbound {
    padding: 60px 0;
  }

  .tm-inbound {
    padding-top: 120px;
  }

  .tm-fleet {
    margin-top: 2rem;
  }

  .tm-check-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .tm-fleet {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   NKAR Travels page (travels.html)
   ========================================================================== */

.tv-section {
  padding: 100px 0;
}

/* The first section sits under the fixed inner header and carries the
   cream-to-white page gradient of the original Elementor section. */
.tv-ticketing {
  padding: 150px 0 100px;
  background-image: linear-gradient(-90deg, #FFFFFF 75%, var(--color-cream) 75%);
}

.tv-heading {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  color: #242424;
  margin-bottom: 0.75rem;
}

.tv-divider {
  width: 18%;
  min-width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  margin-bottom: 1.75rem;
}

.tv-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-ink);
}

.tv-text p {
  margin-bottom: 1rem;
}

.tv-text p:last-child {
  margin-bottom: 0;
}

.tv-lead {
  font-weight: 600;
}

.tv-actions {
  margin-top: 1.75rem;
}

.tv-btn {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 30px;
}

/* --------------------------------------------------------------- media */
.tv-media {
  margin: 0;
  text-align: center;
}

.tv-media img {
  max-width: 80%;
  border: 5px solid var(--color-white);
  box-shadow: var(--shadow-card);
}

.tv-media--rounded img {
  border-radius: 10px;
}

.tv-media--sm img {
  max-width: 60%;
}

.tv-media--wide img {
  max-width: 100%;
}

.tv-media--framed img {
  max-width: 90%;
}

/* Overlapping pair of photos ("Hotels" section).
   The back image sits in flow and defines the width; the front image is
   absolutely positioned so it overlaps the back one's lower-right corner and
   overhangs its bottom edge — matching the original design.

   Offsets are expressed as percentages of the back image, measured from the
   original: back width = W, so
     front width   = 0.85 W
     front left    = 0.58 W   (from the back image's left edge)
     front top     = 0.26 H   (H = back image height)
   The figure reserves the full composite via aspect-ratio so the absolutely
   positioned front image can overhang without being clipped. */
.tv-media--offset {
  position: relative;
  /* composite = 1.432 W wide x 1.661 W tall  (W = back image width) */
  aspect-ratio: 1432 / 1661;
}

.tv-media--offset .tv-offset-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 69.83%;              /* W / 1.432W */
  max-width: none;
  height: auto;
}

.tv-media--offset .tv-offset-front {
  position: absolute;
  top: 23.29%;                /* 0.26 H, H = 1.5 W */
  left: 40.64%;               /* 0.58 W / 1.432W */
  width: 59.36%;              /* 0.85 W / 1.432W */
  max-width: none;
  height: auto;
  z-index: 1;                 /* the front photo paints over the back one */
}

.tv-media--offset img {
  border: 0;
  box-shadow: 10px 10px 24px 0 rgba(0, 0, 0, 0.15);
}

/* Below lg the column goes full width, so cap the pair like the page's other
   media (90%) and centre it — otherwise it dominates the stacked layout. */
@media (max-width: 991.98px) {
  .tv-media--offset {
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* --------------------------------------------------------- group travels */
.tv-group-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.tv-group-figure {
  flex: 0 0 502px;
  margin: 0;
}

.tv-group-figure img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border: 5px solid var(--color-white);
  box-shadow: var(--shadow-card);
}

.tv-group-body {
  flex: 1 1 auto;
  padding: 0 50px;
  text-align: justify;
}

.tv-group-title {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1rem;
}

.tv-group-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink);
}

.tv-group-text p {
  margin-bottom: 1rem;
}

.tv-group-text p:last-child {
  margin-bottom: 0;
}

.tv-group-btn {
  display: inline-block;
  margin-top: 1.75rem;
}

@media (max-width: 1199.98px) {
  .tv-group-figure {
    flex-basis: 380px;
  }

  .tv-group-body {
    padding: 0 30px;
  }
}

@media (max-width: 991.98px) {
  .tv-section,
  .tv-ticketing {
    padding: 60px 0;
  }

  .tv-ticketing {
    padding-top: 120px;
    background-image: linear-gradient(-90deg, #FFFFFF 85%, var(--color-cream) 85%);
  }

  .tv-media img,
  .tv-media--framed img,
  .tv-media--sm img {
    max-width: 90%;
  }

  .tv-group-card {
    flex-direction: column;
    align-items: stretch;
  }

  .tv-group-figure {
    flex-basis: auto;
  }

  .tv-group-figure img {
    height: 360px;
  }

  .tv-group-body {
    padding: 20px 0 0;
    text-align: left;
  }
}

/* ==========================================================================
   Company History page (company-history.html)
   Source: WP page 197 — "Our Story in Brief" heading + Happy Addons timeline
   (widget 8e47cd0, .ha-timeline-align-center). Colours come from the Elementor
   globals: 2717c1b = #0D764E (icon/tree), 611da73 = #FFFFFF (icon glyph).
   ========================================================================== */

/* ------------------------------------------------------ story intro */
.ch-story {
  padding: 150px 0 0;
}

.ch-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: #242424;
  margin: 0 0 20px;
}

.ch-lead {
  font-style: italic;
  font-size: 20.8px;
  line-height: 0.9;
  margin: 0 0 20px;
  color: var(--color-ink);
}

/* --------------------------------------------------------- timeline */
.ch-timeline-section {
  padding: 60px 0 0;
}

.ch-timeline {
  position: relative;
}

/* The vertical rule is drawn ONCE for the whole timeline, running down its
   exact centre from the first card to the last. Every disc is centred on it,
   so the markers sit on a single unbroken line (matching the original). */
.ch-timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 1px;
  background: var(--color-primary);
  content: "";
  transform: translateX(-50%);
}

.ch-item {
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 1;
}

/* Icon column — the green disc sits on the vertical rule.
   The 30px gap must sit BETWEEN the card and the disc, so the disc lands
   exactly on the centre line (margin-left, not margin-right). */
.ch-item-icon-box {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  order: 1;
  margin-left: 30px;
}

.ch-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--color-primary);
  will-change: transform;
}

.ch-item-icon i {
  color: var(--color-white);
  font-size: 16px;
}

/* Year label beside the disc (desktop / tablet) — sits just clear of the disc,
   on the opposite side of the rule from its card */
.ch-item-year {
  position: absolute;
  top: 50%;
  left: calc(100% + 20px);
  width: 100px;
  color: #818d98;
  transform: translateY(-50%);
}

.ch-item-year-mobile {
  display: none;
}

/* Content card */
.ch-item-content {
  position: relative;
  flex-grow: 0;
  order: 0;
  box-sizing: border-box;
  width: calc(50% - 54px);
  margin: 0 0 60px;
  padding: 20px;
  border: 1px solid #dedede;
  border-radius: 5px;
  background: var(--color-white);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  will-change: transform;
}

/* Card pointer arrow — brand green, tip pointing at the rule */
.ch-item-content::before {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left-color: var(--color-primary);
  content: "";
  transform: translateY(-50%);
}

.ch-item:nth-child(even) {
  flex-direction: row-reverse;
}

.ch-item:nth-child(even) .ch-item-icon-box {
  margin-right: 30px;
  margin-left: 0;
}

.ch-item:nth-child(even) .ch-item-year {
  right: calc(100% + 20px);
  left: auto;
  text-align: right;
}

.ch-item:nth-child(even) .ch-item-content::before {
  right: 100%;
  left: auto;
  border-right-color: var(--color-primary);
  border-left-color: transparent;
}

.ch-item:last-child .ch-item-content {
  margin-bottom: 0;
}

.ch-item-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #242424;
  margin: 0 0 20px;
}

.ch-item-text p {
  margin: 0 0 20px;
}

.ch-item-text p:last-child {
  margin-bottom: 0;
}

/* Inline timeline imagery (2005 logos, 2018 awards, 2022/2023 campaigns) */
.ch-item-images {
  display: block;
  margin-top: 15px;
}

.ch-item-images img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 0 10px 3px 0;
  vertical-align: bottom;
}

/* ------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .ch-item,
  .ch-item:nth-child(even) {
    flex-direction: row;
  }

  .ch-item-icon-box,
  .ch-item:nth-child(even) .ch-item-icon-box {
    order: 0;
    margin-right: 35px;
    margin-left: 0;
  }

  /* Single-column layout: the rule runs down the left, through the discs */
  .ch-timeline::before {
    left: 20px;
  }

  .ch-item-icon {
    width: 40px;
    height: 40px;
    margin-top: -30px;
  }

  .ch-item-content,
  .ch-item:nth-child(even) .ch-item-content {
    width: calc(100% - 75px);
  }

  .ch-item-content::before,
  .ch-item:nth-child(even) .ch-item-content::before {
    top: 50%;
    right: 100%;
    left: auto;
    border-right-color: var(--color-primary);
    border-left-color: transparent;
  }

  .ch-item-year {
    display: none;
  }

  .ch-item-year-mobile {
    display: block;
  }

  .ch-story {
    padding: 100px 0 0;
  }

  .ch-lead {
    line-height: 1.4;
  }
}

@media (max-width: 767px) {
  .ch-story {
    /* The fixed compact header is 64px on a Redmi Note 14.  The previous
       60px offset put the H1 beneath it, making the page title appear
       missing on initial load. */
    padding: max(100px, calc(var(--header-h) + 2.25rem)) 0 0;
  }

  .ch-title {
    font-size: 28px;
  }

  .ch-lead {
    font-size: 18px;
  }

  .ch-item-content,
  .ch-item:nth-child(even) .ch-item-content {
    padding: 20px;
  }

  .ch-item-title {
    font-size: 20px;
  }
}

/* ==========================================================================
   Company Careers page (company-career.html)
   ========================================================================== */

.cc-intro {
  padding: 150px 0 60px;
}

.cc-title {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 600;
  color: #242424;
  margin-bottom: 1.25rem;
}

.cc-lead {
  color: var(--color-dark);
  line-height: 1.8;
}

.cc-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 1.75rem 0 1rem;
}

.cc-requirements {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cc-requirements li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
  color: var(--color-dark);
}

.cc-requirements i {
  color: var(--color-primary);
  margin-top: 0.3rem;
}

.cc-avatar {
  max-width: 320px;
  width: 100%;
}

.cc-openings {
  padding: 40px 0 80px;
}

.cc-openings-note {
  text-align: center;
  color: var(--color-gray-text);
  margin-bottom: 2.5rem;
}

.cc-openings-note a {
  color: var(--color-primary);
  font-weight: 600;
}

.cc-job {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cc-job-cat {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.cc-job-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #242424;
}

.cc-job-media {
  display: block;
  border-radius: 4px;
  overflow: hidden;
}

.cc-job-media img {
  width: 100%;
  height: auto;
  display: block;
}

.cc-job-media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background-color: #f6f6f6;
  color: #b5b5b5;
  font-size: 2.5rem;
}

.cc-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.btn-outline-brand {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.cc-job-actions .btn-brand {
  padding: 0.5rem 1.1rem;
}

/* ------------------------------------------------- job advert lightbox */
.cc-advert-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;                 /* above the sticky header (1030) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cc-advert-modal[hidden] {
  display: none;
}

/* Added by jQuery once the opening transition has had a frame to start */
.cc-advert-modal.is-open {
  opacity: 1;
}

.cc-advert-backdrop {
  position: absolute;
  inset: 0;
}

.cc-advert-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}

.cc-advert-modal.is-open .cc-advert-dialog {
  transform: none;
}

.cc-advert-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e8e8e8;
}

.cc-advert-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: #242424;
}

.cc-advert-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #242424;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cc-advert-close:hover,
.cc-advert-close:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* The adverts are tall portrait images, so the body scrolls */
.cc-advert-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  text-align: center;
}

.cc-advert-body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}

.cc-advert-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e8e8e8;
}

/* Lock the page behind the open lightbox */
body.cc-advert-open {
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .cc-advert-modal {
    padding: 0;
  }

  .cc-advert-dialog {
    max-width: none;
    height: 100%;
    border-radius: 0;
  }

  .cc-advert-foot {
    justify-content: stretch;
  }

  .cc-advert-foot .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-advert-modal,
  .cc-advert-dialog {
    transition: none !important;
  }

  .cc-advert-dialog {
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .cc-intro {
    padding: 120px 0 40px;
  }

  .cc-openings {
    padding: 30px 0 60px;
  }
}

/* Company Profile page styles live in the consolidated
   "Company Profile page (company-profile.html)" section further below. */

/* ==========================================================================
   Management Team page (management-team.html)
   Source: WP page 186 — intro text (widget 53ffdc1d, max-width 600px,
   justified) + Happy Addons "ha-member" cards (widgets 577e1ac … e8ec490).
   Card image height 250px, radius 5px, 0 0 10px rgba(0,0,0,.5) shadow;
   name Poppins 16px bold (#151515); position 13px #9e9e9e.
   ========================================================================== */

.mt-intro {
  padding: 60px 0;
}

.mt-intro-text {
  max-width: 600px;
  margin: 100px auto 0;
  font-size: 16px;
  font-weight: 400;
  text-align: justify;
}

.mt-team {
  padding-bottom: 2rem;
}

.mt-member {
  height: 100%;
  text-align: center;
}

.mt-member-figure {
  display: inline-block;
  position: relative;
  width: 250px;
  max-width: 100%;
  height: 250px;
  margin: 0 0 25px;
}

.mt-member-figure img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  object-fit: cover;
  object-position: top center;
  transition: transform 0.2s;
}

.mt-member:hover .mt-member-figure img {
  transform: scale(1.03);
}

.mt-member-body {
  padding: 0;
}

.mt-member-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #151515;
}

.mt-member-position {
  margin: 0;
  font-size: 13px;
  color: #9e9e9e;
}

.mt-member-links {
  margin-top: 10px;
}

.mt-member-links a {
  display: inline-block;
  color: #9895ad;
  line-height: 1;
  transition: color 0.2s;
}

.mt-member-links a:hover,
.mt-member-links a:focus {
  color: #222222;
}

@media (max-width: 1024px) {
  .mt-intro {
    padding: 50px 0;
  }

  .mt-intro-text {
    margin-top: 0;
  }

  .mt-member-figure {
    width: 100%;
    max-width: 250px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 767px) {
  .mt-intro {
    /* This page has a screen-reader H1, so its introductory copy is the
       first visible content and must clear the same fixed mobile header. */
    padding: max(100px, calc(var(--header-h) + 2.25rem)) 0 40px;
  }

  .mt-intro-text {
    text-align: left;
  }

  .mt-member-figure {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   Company Profile page (company-profile.html)
   ========================================================================== */

.cp-section {
  padding: 150px 0 40px;
}

.cp-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1rem;
}

.cp-lead {
  max-width: 760px;
  color: var(--color-dark);
  margin-bottom: 1.75rem;
}

.cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.cp-viewer {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  background-color: #f2f2f2;
}

.cp-viewer object {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
}

.cp-viewer-fallback {
  padding: 3rem 1.5rem;
  text-align: center;
  margin: 0;
}

@media (max-width: 991.98px) {
  .cp-section {
    padding: 120px 0 30px;
  }

  .cp-viewer object {
    height: 620px;
  }
}

@media (max-width: 575.98px) {
  .cp-viewer object {
    height: 460px;
  }
}

/* ==========================================================================
   CSR page (csr.html)
   ========================================================================== */

.csr-main {
  padding-bottom: 0;
}

/* ------------------------------------------------------------ intro (H1) */
.csr-intro {
  padding: 60px 0 20px;
}

.csr-intro-title {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: #242424;
}

/* Original Elementor rule capped the intro copy at 80% of the container */
.csr-intro-text {
  max-width: 80%;
  margin: 0 auto;
  text-align: justify;
}

.csr-intro-text p {
  margin-bottom: 1.25rem;
}

.csr-intro-text p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------- content sections */
/* Every Elementor section carried margin:60px 0; padding:30px 40px and a
   flat cream (#F1E9C5) background — mirrored here as a full-width band. */
.csr-block {
  margin: 60px 0;
  padding: 30px 40px;
  background-color: var(--color-cream);
}

.csr-row {
  align-items: flex-start;
}

.csr-row--center {
  align-items: center;
}

.csr-block--intro {
  padding-bottom: 30px;
}

/* -------------------------------------------------------- headings */
.csr-title {
  margin: 0 0 20px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.06;
  color: #242424;
}

.csr-subheading {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #242424;
}

/* -------------------------------------------------------- body copy */
.csr-text {
  text-align: justify;
  color: var(--color-dark);
}

.csr-text p {
  margin-bottom: 1.25rem;
}

.csr-text p:last-child {
  margin-bottom: 0;
}

.csr-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

.csr-text a:hover,
.csr-text a:focus {
  color: var(--color-secondary);
}

.csr-list {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
  text-align: left;
}

.csr-list li {
  margin-bottom: 0.4rem;
  color: var(--color-dark);
}

.csr-list li:last-child {
  margin-bottom: 0;
}

.csr-quote {
  margin: 1.25rem 0;
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-left: 4px solid var(--color-primary);
  font-style: italic;
}

.csr-quote p {
  margin: 0;
}

/* --------------------------------------------------------- figures */
.csr-figure {
  margin: 0 0 1.5rem;
}

.csr-figure:last-child {
  margin-bottom: 0;
}

.csr-figure img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.csr-figure--small {
  max-width: 300px;
}

.csr-figure--tall {
  max-width: 480px;
}

.csr-figure--inset {
  max-width: 366px;
}

.csr-figure--inset-sm {
  max-width: 321px;
}

.csr-figure--inset-xs {
  max-width: 240px;
}

/* -------------------------------------------------------- carousels */
/* Replacement for the Happy Addons / Slick "ha-slider" widgets. */
.csr-carousel {
  width: 100%;
  max-width: 655px;
  margin: 0 0 1.5rem;
}

.csr-carousel:last-child {
  margin-bottom: 0;
}

.csr-carousel .carousel-inner {
  background: rgba(255, 255, 255, 0.55);
}

.csr-carousel .carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Soft scrim so the dots stay readable over dark photos: a shadow-only band
   painted behind the dot row, so the slide images themselves are untouched. */
.csr-carousel .carousel-indicators {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;                 /* above the slides */
  margin: 0;
  padding: 2.5rem 0 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  opacity: 1;
}

/* Give the dots a light halo so they read on both light and dark slides */
.csr-carousel .carousel-indicators [data-bs-target] {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  opacity: 1;
  text-indent: 0;
}

.csr-carousel .carousel-indicators .active {
  background-color: var(--color-primary);
}

/* --------------------------------------------------- footer banner */
.csr-footer-banner {
  margin-top: 60px;
  padding: 0 0 40px;
}

/* --------------------------------------------------------- responsive */
/* Keep the rotating sun decorative: it sits behind the title rather than
   reserving a gutter that pushes the heading text away from it. */
.csr-title.heading-with-sun {
  padding-left: 0;
  min-height: 0;
  display: block;
  isolation: isolate;
}

.csr-title.heading-with-sun .title-sun {
  top: -30px;
  left: -30px;
  z-index: -1;
  width: 78px;
  height: 78px;
  opacity: 0.98;
  animation-duration: 12s;
  pointer-events: none;
}

@media (max-width: 1023.98px) {
  .csr-title {
    font-size: 30px;
  }

  .csr-carousel {
    max-width: 100%;
  }

  .csr-intro-text {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .csr-intro {
    padding: 40px 0 10px;
  }

  .csr-intro-title {
    font-size: 24px;
  }

  /* Let the H1 wrap naturally instead of honouring the source's hard break */
  .csr-intro-title br {
    display: none;
  }

  .csr-block {
    margin: 40px 0;
    padding: 30px 15px;
  }

  .csr-title {
    font-size: 26px;
  }

  /* Scale the decorative background sun down on small screens. */
  .csr-title.heading-with-sun {
    padding-left: 0;
    min-height: 0;
  }

  .csr-title.heading-with-sun .title-sun {
    top: -14px;
    left: -8px;
    width: 62px;
    height: 62px;
  }

  .csr-text,
  .csr-intro-text {
    text-align: left;
  }

  .csr-subheading {
    font-size: 1.125rem;
  }

  .csr-quote {
    padding-left: 1rem;
  }

  .csr-footer-banner {
    margin-top: 40px;
  }
}

/* Carousel dots: 12px visually, but the tap target must be finger-sized.
   The pseudo-element enlarges the hit area without changing the dot. */
@media (max-width: 991.98px) {
  .csr-carousel .carousel-indicators {
    gap: 0;
  }

  .csr-carousel .carousel-indicators [data-bs-target] {
    position: relative;
    margin: 0 10px;
  }

  .csr-carousel .carousel-indicators [data-bs-target]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* ------------------------------------------------- mobile reading order */
/* Below the lg breakpoint the two .col-lg-6 columns stack. Because several
   sections are authored "media first" (the --reverse blocks) or interleave
   text and figures inside one column, the stacked order could put an image
   above the heading or split the copy around it.

   Flattening the columns with display:contents makes their children direct
   flex items of .csr-row, so a single set of order values gives every
   section the same mobile sequence:  heading -> copy -> media.

   Desktop is untouched (columns remain real boxes side by side). */
@media (max-width: 991.98px) {
  .csr-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* neutralise .csr-row--center */
    margin: 0;                 /* columns no longer supply the gutter */
    row-gap: 20px;             /* replaces the g-4 vertical gutter */
  }

  .csr-row > [class*="col-"] {
    display: contents;
  }

  .csr-row > [class*="col-"] > * {
    margin-top: 0;
    margin-bottom: 0;
    order: 2;                  /* default: body copy */
  }

  .csr-row > [class*="col-"] > .csr-title {
    order: 1;
  }

  .csr-row > [class*="col-"] > .csr-figure,
  .csr-row > [class*="col-"] > .csr-carousel {
    order: 3;
  }
}

/* ==========================================================================
   Resource Sharing Center / NKAR Center (internal hub pages)
   ========================================================================== */

.rc-section {
  padding: 150px 0 90px;
}

.rc-brand {
  margin-bottom: 1.5rem;
}

.rc-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.rc-lead {
  max-width: 760px;
  color: var(--color-dark);
  margin-bottom: 2.5rem;
}

.rc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 2rem 1.25rem;
  background-color: var(--color-white);
  border: 1px solid #ececec;
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.rc-card:hover,
.rc-card:focus {
  transform: translateY(-5px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.rc-card-icon {
  color: var(--color-primary);
  font-size: 2.4rem;
  line-height: 1;
}

.rc-card-title {
  font-weight: 700;
  color: #242424;
  transition: color var(--transition-fast);
}

.rc-card:hover .rc-card-title,
.rc-card:focus .rc-card-title {
  color: var(--color-primary);
}

.rc-card-desc {
  font-size: 0.875rem;
  color: var(--color-gray-text);
}

@media (max-width: 991.98px) {
  .rc-section {
    padding: 120px 0 60px;
  }
}

/* ==========================================================================
   Guest Questionnaire page (guest-feedback.html)
   ========================================================================== */

.gf-section {
  padding: 150px 0 90px;
}

.gf-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1rem;
}

.gf-lead {
  max-width: 820px;
  color: var(--color-dark);
  margin-bottom: 2rem;
}

.gf-form {
  max-width: 860px;
}

.gf-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2.25rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}

.gf-question {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

.gf-question legend {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
  padding: 0;
}

.gf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.gf-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--color-gray-text);
  cursor: pointer;
}

.gf-option input {
  accent-color: var(--color-primary);
}

.gf-question textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

.gf-question textarea:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.gf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.gf-field {
  margin: 0;
}

.gf-field label {
  display: block;
  font-weight: 600;
  color: var(--color-gray-text);
  margin-bottom: 0.4rem;
}

.gf-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

.gf-field input:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.gf-field input.is-invalid {
  border-color: #dc3545;
}

.gf-req {
  color: #dc3545;
}

.gf-submit {
  margin-top: 2rem;
}

.gf-msg {
  margin-top: 1rem;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.gf-msg.success {
  color: #1e7e34;
}

.gf-msg.error {
  color: #a71d2a;
}

@media (max-width: 991.98px) {
  .gf-section {
    padding: 120px 0 60px;
  }
}

/* ==========================================================================
   NKAR Tour Planner page (nkar-tour-planner.html)
   ========================================================================== */

.tp-section {
  padding: 150px 0 90px;
}

.tp-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.tp-lead {
  max-width: 820px;
  color: var(--color-dark);
  margin-bottom: 2rem;
}

.tp-form {
  max-width: 900px;
}

.tp-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2.25rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}

.tp-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin: 1.75rem 0 0.85rem;
}

.tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem 1.25rem;
}

.tp-field {
  margin: 0 0 1rem;
}

.tp-field--narrow {
  max-width: 320px;
}

.tp-field label {
  display: block;
  font-weight: 600;
  color: var(--color-gray-text);
  margin-bottom: 0.4rem;
}

.tp-field input,
.tp-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background-color: var(--color-white);
}

.tp-field input:focus,
.tp-field select:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.tp-field input.is-invalid {
  border-color: #dc3545;
}

.tp-question {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.tp-question legend {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-gray-text);
  margin-bottom: 0.5rem;
  padding: 0;
}

.tp-options {
  display: flex;
  gap: 1.25rem;
}

.tp-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--color-gray-text);
  cursor: pointer;
}

.tp-check input {
  accent-color: var(--color-primary);
}

.tp-day {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  align-items: end;
  padding: 1.1rem 1.25rem;
  border: 1px solid #ececec;
  border-radius: 8px;
  margin-bottom: 0.85rem;
  background-color: #fbfbfb;
}

.tp-day .tp-field {
  margin: 0;
}

.tp-same {
  grid-column: 1 / -1;
  margin: 0;
}

.tp-addrow {
  margin: 1rem 0 0;
}

.tp-submit {
  margin-top: 2rem;
}

.tp-msg {
  margin-top: 1rem;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.tp-msg.success {
  color: #1e7e34;
}

.tp-msg.error {
  color: #a71d2a;
}

@media (max-width: 767.98px) {
  .tp-section {
    padding: 120px 0 60px;
  }

  .tp-day {
    grid-template-columns: 1fr;
  }
}

/* Site map — group headings */
.sm-group-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2.5rem 0 1rem;
}

/* ==========================================================================
   Resource pages (product-offerings.html, video-library.html,
   social-media.html, csr-actvities.html, resources-company-profile.html)
   ========================================================================== */

.rc-breadcrumb {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: calc(var(--header-h) + 1.5rem) 1.25rem 0;
  font-size: 0.94rem;
}

.rc-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.rc-breadcrumb a:hover,
.rc-breadcrumb a:focus {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* ------------------------------------------------- page banner (cream) */
.rc-banner {
  padding: 1.5rem 0 2.5rem;
}

.rc-banner-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2.5rem;
  background-color: var(--color-cream);
  border-radius: var(--radius-card);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
}

.rc-banner-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.5rem);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
}

/* --------------------------------------------------- document sections */
.rc-doc-section {
  padding: 1.5rem 0 3rem;
}

.rc-doc {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
}

.rc-doc-note {
  color: var(--color-dark);
  margin-bottom: 1.75rem;
}

.rc-doc-note i {
  color: var(--color-primary);
  margin-right: 0.4rem;
}

.rc-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin: 0;
}

.rc-doc-btn i {
  margin-right: 0.5rem;
}

.rc-doc-download {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.rc-doc-download:hover,
.rc-doc-download:focus {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* ------------------------------------------------------ video library */
.rc-videos-section {
  padding: 1.5rem 0 3rem;
}

.rc-videos-section .container {
  max-width: 1000px;
}

.rc-video-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background-color: var(--color-white);
  border: 1px solid #ececec;
  border-radius: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.rc-video-card:hover,
.rc-video-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.rc-video-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 1.6rem;
  line-height: 1;
  transition: color var(--transition-fast);
}

.rc-video-card:hover .rc-video-icon,
.rc-video-card:focus .rc-video-icon {
  color: rgba(13, 118, 78, 0.63);
}

.rc-video-title {
  font-size: 1.125rem;
  font-weight: 400;
  color: #242424;
  transition: color var(--transition-fast);
}

.rc-video-card:hover .rc-video-title,
.rc-video-card:focus .rc-video-title {
  color: var(--color-primary);
}

/* ------------------------------------------------------ social media */
.rc-social-section {
  padding: 1.5rem 0 3rem;
}

.rc-social-section .container {
  max-width: 1000px;
}

.rc-group-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: #242424;
  text-align: center;
  margin: 0 0 1.25rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
}

.rc-social-row {
  margin-bottom: 3rem;
}

.rc-social-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background-color: var(--color-white);
  border: 1px solid #ececec;
  border-radius: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.rc-social-card:hover,
.rc-social-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.rc-social-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 1.6rem;
  line-height: 1;
  transition: color var(--transition-fast);
}

.rc-social-card:hover .rc-social-icon,
.rc-social-card:focus .rc-social-icon {
  color: rgba(13, 118, 78, 0.63);
}

.rc-social-name {
  font-size: 1.125rem;
  font-weight: 400;
  color: #242424;
  transition: color var(--transition-fast);
}

.rc-social-card:hover .rc-social-name,
.rc-social-card:focus .rc-social-name {
  color: var(--color-primary);
}

@media (max-width: 991.98px) {
  .rc-breadcrumb {
    padding-top: calc(var(--header-h-sm) + 1.25rem);
  }

  .rc-banner-inner {
    padding: 2rem 1rem;
  }

  .rc-social-row {
    margin-bottom: 2.25rem;
  }
}

/* ==========================================================================
   News article pages (<post_name>.html)
   ========================================================================== */

.bl-article {
  padding: 150px 0 90px;
}

.bl-breadcrumb {
  margin-bottom: 1.25rem;
}

.bl-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.bl-breadcrumb a:hover,
.bl-breadcrumb a:focus {
  color: var(--color-secondary);
  text-decoration: underline;
}

.bl-article-header {
  margin-bottom: 2rem;
}

.bl-article-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
  margin-bottom: 0.85rem;
}

.bl-article-date {
  margin-bottom: 0;
}

/* ------------------------------------------------------------- body copy */
.bl-article-body {
  max-width: 820px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: #242424;
}

.bl-article-body > *:last-child {
  margin-bottom: 0;
}

.bl-article-body p {
  margin-bottom: 1.25rem;
}

.bl-article-body h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
  margin: 2.25rem 0 1rem;
}

.bl-article-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
  margin: 1.75rem 0 0.85rem;
}

.bl-article-body ul,
.bl-article-body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.bl-article-body li {
  margin-bottom: 0.5rem;
}

.bl-article-body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.bl-article-body a:hover,
.bl-article-body a:focus {
  color: var(--color-secondary);
}

.bl-article-body strong {
  font-weight: 700;
}

.bl-article-body blockquote {
  margin: 1.75rem 0;
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-left: 4px solid var(--color-primary);
  font-style: italic;
  color: #3a3a3a;
}

.bl-article-body table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.bl-article-body th,
.bl-article-body td {
  padding: 0.6rem 0.75rem;
  border: 1px solid #dcdcdc;
  text-align: left;
}

.bl-article-body th {
  background-color: var(--color-cream);
  font-weight: 600;
}

.bl-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.bl-article-body iframe {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ------------------------------------------------------------- figures */
.bl-figure {
  margin: 0 0 1.75rem;
}

.bl-figure img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.bl-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-gray-text);
}

/* --------------------------------------------------------- back link */
.bl-back {
  margin-top: 2.75rem;
}

@media (max-width: 991.98px) {
  .bl-article {
    padding: 120px 0 60px;
  }
}

@media (max-width: 575.98px) {
  .bl-article-body {
    font-size: 0.95rem;
  }
}

/* ---------------------------------------------------- blog card design
   Mirrors the original Woodmart blog loop: 3-column full-width grid, each card
   a featured image with a white day/month badge, then a white content panel
   (25px padding, centred) carrying a gold category chip, the title, grey
   date/author meta, the excerpt and a gold "Continue reading" link. */
.bl-container {
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
}

.bl-heading {
  padding: 0 10px;
}

.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 20px;
  margin-bottom: 40px;
}

.bl-card {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.bl-card-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 452 / 538;
  overflow: hidden;
  background-color: #ededed;
}

.bl-card-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bl-card:hover .bl-card-figure img {
  transform: scale(1.04);
}

.bl-card-date {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 53px;
  padding: 9px 8px;
  background-color: var(--color-white);
  color: #333333;
  text-align: center;
}

.bl-card-day {
  display: block;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.bl-card-month {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.bl-card-body {
  position: relative;
  flex: 1;
  padding: 25px;
  background-color: var(--color-white);
  text-align: center;
}

.bl-card-cat {
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
}

.bl-card-cat span {
  display: inline-block;
  padding: 4px 10px;
  background-color: var(--color-gold);
  color: var(--color-white);
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bl-card-title {
  margin: 10px 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: #333333;
}

.bl-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.bl-card-title a:hover,
.bl-card-title a:focus {
  color: var(--color-primary);
}

.bl-card-meta {
  margin: 0 0 10px;
  font-size: 14px;
  color: #bbbbbb;
}

.bl-card-author {
  margin-left: 0.25rem;
}

.bl-card-excerpt {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
}

.bl-card-more {
  margin: 0;
}

.bl-card-more a {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-gold);
  text-decoration: underline;
}

.bl-card-more a:hover,
.bl-card-more a:focus {
  color: var(--color-primary);
}

/* The original keeps 3 columns down to 768px and then drops straight to 1 */
@media (max-width: 768px) {
  .bl-container {
    padding: 0 10px;
  }

  .bl-grid {
    grid-template-columns: 1fr;
    row-gap: 25px;
  }

  .bl-card-title {
    font-size: 20px;
  }
}

/* ------------------------------------------------------ pagination
   Same pattern and styling as the original WP paginate_links output:
   gold current page, compact dark links, first/prev/next/last arrows. */
.bl-pagination {
  margin-top: 10px;
}

.bl-pagination-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.bl-pagination-pages li {
  list-style: none;
}

.bl-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  color: #242424;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

a.bl-page-link:hover,
a.bl-page-link:focus {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.bl-page-link.current {
  color: var(--color-white);
  background-color: var(--color-gold);
  font-weight: 600;
}


/* Company History — full-width container (the original page renders its
   "boxed" sections at full width, matching the Our Strengths behaviour) */
.ch-container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .ch-container {
    padding: 0 15px;
  }
}

/* Management Team — full-width content container (matches the original
   page's full-width rendering, same as Company History) */
.mt-container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------
   Frontend-only notice (Laravel parity build)

   The conversion plan (section 11) requires the UI to state that forms are
   not connected to a backend in this phase. This block is additive and does
   not modify any supplied source rule.
------------------------------------------------------------------ */
.frontend-notice {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.75;
}

.cu-form .frontend-notice,
.tp-form .frontend-notice,
.gf-form .frontend-notice {
  text-align: left;
}

/* Authenticated draft-preview banner (admin-only, rendered on the public
   template when an editor previews a draft). */
.preview-banner {
  max-width: 1140px;
  margin: 1rem auto 0;
  padding: 0.6rem 1rem;
  border: 1px dashed #b58900;
  border-radius: 4px;
  background: #fff8e1;
  color: #5c4a00;
  font-size: 0.9rem;
}

/* Form component rules are declared with their respective pages above. Keep
   this final narrow-screen override after those definitions so Android never
   renders a 15px editable control. */
@media (max-width: 575.98px) {
  .cu-field input,
  .cu-field textarea,
  .gf-field input,
  .gf-question textarea,
  .tp-field input,
  .tp-field select {
    font-size: 16px;
  }
}