/*
  Navakeralam Sadas — Blue Theme
  Loaded only by resources/views/navakeralam_2025_front/*.blade.php, after main.css.
  Does NOT touch main.css (shared with the Archive pages, which must stay red).
  New "nk-" prefixed classes only — no overrides of the "13" demo family classes,
  so there is zero cascade/specificity conflict with the vendor stylesheet.
*/

:root {
  --nk-blue-1: #0B4F9E;   /* primary deep blue */
  --nk-blue-2: #1C64F2;   /* accent bright blue */
  --nk-blue-tint: #EAF2FE; /* light section background */
  --nk-ink: #0A2540;      /* dark text */
  --nk-white: #ffffff;
  --nk-purple: #6B4FA3;   /* accent — icon badges, section markers */
  --nk-purple-tint: #F1ECF9;
  --nk-gold: #F0A93A;     /* accent — eyebrows, dividers, highlights */
}

/* ---------- Header / Nav ---------- */

.nk-topbar {
  padding: 8px 0;
  background: var(--nk-white);
  border-bottom: 1px solid #E1EBFA;
}

.nk-topbar a {
  color: var(--nk-blue-1);
  text-decoration: none;
  font-weight: 600;
}

.header-area.nk-header {
  /* main.css makes .header-area.homepage13 position:absolute so it floats over
     whatever comes next (fine for the original full-bleed carousel hero, but it
     overlapped the new hero's heading). Put it back in normal flow instead. */
  position: relative !important;
  background: var(--nk-white);
  box-shadow: 0 2px 10px rgba(11, 79, 158, 0.08);
}

.header-area.nk-header.sticky {
  box-shadow: 0 4px 16px rgba(11, 79, 158, 0.16);
}

.nk-logo-text {
  font-family: var(--ztc-family-font1);
  font-size: 26px;
  font-weight: 800;
  color: var(--nk-blue-1);
  text-decoration: none;
  letter-spacing: 0.5px;
}

.nk-logo-text span {
  color: var(--nk-blue-2);
}

.nk-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
}

.nk-nav ul li a {
  position: relative;
  color: var(--nk-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s;
  padding-bottom: 4px;
}

.nk-nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--nk-gold);
  transition: width 0.25s;
}

.nk-nav ul li a:hover {
  color: var(--nk-blue-2);
}

.nk-nav ul li a:hover::after {
  width: 100%;
}

/* main.css's "13" demo theme forces a red hover color (color: #FD2F39 !important)
   on these exact nav links — match its specificity + !important, scoped to our
   own nk-header/nk-nav markup only, to override it with the theme's dark blue. */
.homepage13-body .header-area.nk-header .header-elements .nk-nav ul li:hover > a,
.homepage13-body .header-area.nk-header .header-elements .nk-nav ul li > a:hover {
  color: var(--nk-blue-1) !important;
}

.nk-nav ul li .dropdown-padding {
  list-style: none;
  padding: 10px;
  margin-top: 10px;
  background: var(--nk-white);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11, 79, 158, 0.16);
}

.nk-nav ul li .dropdown-padding li a {
  display: block;
  padding: 6px 10px;
  font-weight: 500;
}

.nk-nav ul li .dropdown-padding li a:hover {
  background: var(--nk-blue-tint);
  border-radius: 6px;
  color: var(--nk-blue-1) !important;
}

.mobile-header.nk-mobile-header {
  /* same fixed-positioning issue as the desktop header (main.css uses
     position:fixed here) — keep it in normal flow so it can't overlap content. */
  position: relative !important;
  background: var(--nk-white);
  box-shadow: 0 2px 10px rgba(11, 79, 158, 0.1);
}

.mobile-nav-icon.nk-mobile-icon i {
  color: var(--nk-blue-1);
}

.mobile-sidebar.nk-mobile-sidebar {
  background: var(--nk-white);
}

.mobile-sidebar.nk-mobile-sidebar .mobile-nav-list li a {
  color: var(--nk-ink);
  font-weight: 600;
}

.mobile-sidebar.nk-mobile-sidebar .menu-close i {
  color: var(--nk-blue-1);
}

/* ---------- Section shells ---------- */

.nk-section {
  padding: 70px 0;
  background: var(--nk-white);
}

.nk-section-alt {
  padding: 70px 0;
  background: var(--nk-blue-tint);
}

.nk-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.nk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nk-gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.nk-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  background: var(--nk-gold);
  border-radius: 2px;
}

/* Icon badge above a section heading — echoes the purple/gold "focus area"
   icon panels used in the state's official campaign artwork. */
.nk-badge {
  height: 64px;
  width: 64px;
  margin: 0 auto 16px;
  border-radius: 16px;
  border: 2px solid var(--nk-purple);
  background: var(--nk-purple-tint);
  color: var(--nk-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  position: relative;
}

.nk-badge::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--nk-gold);
}

.nk-section-head h2 {
  font-family: var(--ztc-family-font1);
  color: var(--nk-ink);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.25;
}

.nk-section-head p {
  font-family: var(--ztc-family-font1);
  color: #4C6079;
  font-size: 16px;
  margin-top: 12px;
}

/* ---------- Hero ---------- */

.nk-hero {
  background: var(--nk-white);
  padding: 90px 0 60px;
  color: var(--nk-ink);
}

.nk-hero h1 {
  font-family: var(--ztc-family-font1);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.2;
  color: var(--nk-ink);
}

.nk-hero p {
  font-family: var(--ztc-family-font1);
  font-size: 17px;
  color: #4C6079;
  margin-top: 16px;
  max-width: 560px;
}

.nk-hero-banner {
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--nk-gold);
  box-shadow: 0 20px 50px rgba(10, 37, 64, 0.35);
}

.nk-hero-banner img {
  width: 100%;
  display: block;
}

@media (max-width: 991px) {
  .nk-hero h1 {
    font-size: 30px;
  }
  .nk-hero-banner {
    margin-top: 30px;
  }
}

/* ---------- CTA buttons ---------- */

.nk-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nk-blue-2);
  color: var(--nk-white);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.25s;
}

.nk-cta:hover {
  background: var(--nk-blue-1);
  color: var(--nk-white);
  transform: translateY(-2px);
}

.nk-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--nk-blue-1);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 23px;
  border-radius: 6px;
  border: 2px solid var(--nk-blue-1);
  text-decoration: none;
  transition: all 0.25s;
}

.nk-cta-outline:hover {
  background: var(--nk-blue-tint);
  border-color: var(--nk-blue-2);
  color: var(--nk-blue-2);
}

/* ---------- Cards ---------- */

.nk-card {
  background: var(--nk-white);
  border-radius: 10px;
  padding: 22px;
  height: 100%;
  box-shadow: 0 6px 20px rgba(11, 79, 158, 0.08);
  border-top: 3px solid transparent;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.nk-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(107, 79, 163, 0.22), 0 4px 0 var(--nk-gold);
  border-top-color: var(--nk-purple);
}

.nk-card img.nk-card-img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  background: var(--nk-blue-tint);
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 10px;
}

.nk-card img.nk-card-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
}

.nk-card-icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: var(--nk-blue-tint);
  color: var(--nk-blue-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.nk-card h3 {
  font-family: var(--ztc-family-font1);
  font-size: 18px;
  font-weight: 700;
  color: var(--nk-ink);
  margin-bottom: 10px;
}

.nk-card h3 a {
  color: var(--nk-ink);
  text-decoration: none;
}

.nk-card h3 a:hover {
  color: var(--nk-blue-2);
}

.nk-card p {
  color: #4C6079;
  font-size: 14.5px;
  line-height: 1.6;
}

.nk-card .nk-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nk-blue-2);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  margin-top: 12px;
}

.nk-card .nk-readmore:hover {
  color: var(--nk-blue-1);
}

.nk-card .nk-meta {
  color: #708096;
  font-size: 13px;
}

/* ---------- Poster card (hover-reveal) ----------
   Adapted from https://codepen.io/muratgokoglu/pen/abMqNJx — same blur+slide
   poster and sliding detail-panel interaction, reskinned to the blue/purple/
   gold palette. Cast avatars and star ratings dropped (no equivalent content);
   a category ribbon and read-more link take their place. */

.nk-poster-card {
  border-radius: 10px;
  width: 100%;
  height: 380px;
  position: relative;
  background: var(--nk-ink);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(11, 79, 158, 0.15);
  transition: box-shadow 0.3s;
}

.nk-poster-card:hover {
  box-shadow: 0 18px 36px rgba(107, 79, 163, 0.3);
}

.nk-poster-card .nk-poster {
  position: absolute;
  inset: 0;
}

.nk-poster-card .nk-poster::before {
  content: "";
  position: absolute;
  bottom: -220px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--nk-ink) 60%, transparent);
  transition: 0.5s;
  z-index: 1;
}

.nk-poster-card:hover .nk-poster::before {
  bottom: 0;
}

.nk-poster-card .nk-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.nk-poster-card:hover .nk-poster img {
  filter: blur(6px);
  transform: scale(1.05) translateY(-20px);
}

.nk-poster-card .nk-poster-details {
  position: absolute;
  padding: 20px;
  width: 100%;
  height: 68%;
  bottom: -230px;
  left: 0;
  box-sizing: border-box;
  transition: 0.5s;
  z-index: 2;
}

.nk-poster-card:hover .nk-poster-details {
  bottom: 0;
}

.nk-poster-card .nk-poster-details h3 {
  font-family: var(--ztc-family-font1);
  color: var(--nk-white);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 0;
}

.nk-poster-card .nk-poster-details h3 a {
  color: var(--nk-white);
  text-decoration: none;
}

.nk-poster-card .nk-poster-details p {
  color: #C9D6EA;
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 10px;
}

.nk-poster-card .nk-poster-details .nk-readmore {
  color: var(--nk-gold);
  margin-top: 12px;
}

.nk-poster-card .nk-poster-details .nk-readmore:hover {
  color: var(--nk-white);
}

/* Static (non-hover) title strip, visible before hover so the card isn't blank */
.nk-poster-card .nk-poster-title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(10, 37, 64, 0.85) 0%, rgba(10, 37, 64, 0) 100%);
  color: var(--nk-white);
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 16px;
  z-index: 1;
  transition: opacity 0.3s;
}

.nk-poster-card:hover .nk-poster-title {
  opacity: 0;
}

.nk-ribbon {
  position: absolute;
  right: 14px;
  top: 0;
  z-index: 3;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.35));
}

.nk-ribbon .nk-ribbon-content {
  color: var(--nk-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  background: var(--nk-purple) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
  padding: 6px 10px 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
  min-width: 60px;
}

/* ---------- Footer ---------- */

.footer13-section-area.nk-footer {
  background: var(--nk-ink);
}

.nk-footer .nk-logo-text {
  color: var(--nk-white);
}

.nk-footer .nk-logo-text span {
  color: var(--nk-blue-2);
}

.nk-footer p,
.nk-footer a {
  color: #B9C7DA;
}

.nk-footer a:hover {
  color: var(--nk-white);
}

/* ---------- Section variant: dark (Success Stories spotlight) ---------- */

.nk-section-dark {
  padding: 70px 0;
  background: linear-gradient(120deg, var(--nk-ink) 0%, var(--nk-blue-1) 100%);
}

.nk-section-dark .nk-section-head h2 {
  color: var(--nk-white);
}

.nk-section-dark .nk-section-head p {
  color: #B9C7DA;
}

.nk-section-dark .nk-badge {
  background: var(--nk-white);
  border-color: var(--nk-gold);
  color: var(--nk-purple);
}

/* ---------- Ribbon color variants ---------- */

.nk-ribbon-gold .nk-ribbon-content {
  background: var(--nk-gold) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
  color: var(--nk-ink);
}

/* ---------- Story card (Success Stories) ---------- */

.nk-story-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 340px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.nk-story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.nk-story-card:hover img {
  transform: scale(1.06);
}

.nk-story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 37, 64, 0.92) 15%, rgba(10, 37, 64, 0.15) 65%, transparent 100%);
}

.nk-story-card .nk-story-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  z-index: 2;
}

.nk-story-card .nk-story-content h3 {
  color: var(--nk-white);
  font-size: 17px;
  font-weight: 700;
  font-family: var(--ztc-family-font1);
  margin-bottom: 8px;
}

.nk-story-card .nk-story-content p {
  color: #DCE9FC;
  font-size: 13.5px;
  line-height: 1.5;
}

.nk-story-card .nk-readmore {
  color: var(--nk-gold);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.nk-story-card .nk-readmore:hover {
  color: var(--nk-white);
}

/* ---------- Goal card (SDG) ---------- */

.nk-goal-card {
  background: var(--nk-white);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  border-top: 4px solid var(--nk-purple);
  box-shadow: 0 6px 20px rgba(11, 79, 158, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}

.nk-goal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(107, 79, 163, 0.2);
}

.nk-goal-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.nk-goal-card .nk-goal-body {
  padding: 20px;
}

.nk-goal-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--nk-ink);
  margin-bottom: 8px;
  font-family: var(--ztc-family-font1);
}

.nk-goal-card h3 a {
  color: var(--nk-ink);
  text-decoration: none;
}

.nk-goal-card h3 a:hover {
  color: var(--nk-purple);
}

.nk-goal-card p {
  color: #4C6079;
  font-size: 14px;
  line-height: 1.6;
}

.nk-goal-card .nk-readmore {
  color: var(--nk-purple);
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.nk-goal-card .nk-readmore:hover {
  color: var(--nk-blue-1);
}

/* ---------- Sector card (Sector Showcase) ---------- */

.nk-sector-card {
  background: var(--nk-white);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  border-left: 4px solid var(--nk-blue-2);
  box-shadow: 0 6px 20px rgba(11, 79, 158, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}

.nk-sector-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(28, 100, 242, 0.2);
}

.nk-sector-card .nk-sector-img {
  overflow: hidden;
  height: 170px;
}

.nk-sector-card .nk-sector-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.nk-sector-card:hover .nk-sector-img img {
  transform: scale(1.08);
}

.nk-sector-card .nk-sector-body {
  padding: 18px 20px;
  flex: 1;
}

.nk-sector-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--nk-ink);
  margin-bottom: 8px;
  font-family: var(--ztc-family-font1);
}

.nk-sector-card h3 a {
  color: var(--nk-ink);
  text-decoration: none;
}

.nk-sector-card h3 a:hover {
  color: var(--nk-blue-2);
}

.nk-sector-card p {
  color: #4C6079;
  font-size: 14px;
  line-height: 1.6;
}

.nk-sector-card .nk-readmore {
  color: var(--nk-blue-2);
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.nk-sector-card .nk-readmore:hover {
  color: var(--nk-blue-1);
}

/* ---------- Strength card (Karuthode Keralam) ---------- */

.nk-strength-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 260px;
  background: var(--nk-ink);
  box-shadow: 0 6px 20px rgba(11, 79, 158, 0.15);
  transition: box-shadow 0.3s;
}

.nk-strength-card:hover {
  box-shadow: 0 16px 34px rgba(107, 79, 163, 0.3);
}

.nk-strength-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.nk-strength-card .nk-strength-icon {
  position: absolute;
  top: 16px;
  left: 16px;
  height: 44px;
  width: 44px;
  border-radius: 50%;
  background: var(--nk-gold);
  color: var(--nk-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 2;
}

.nk-strength-card .nk-strength-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(10, 37, 64, 0.95) 30%, transparent 100%);
}

.nk-strength-card h3 {
  color: var(--nk-white);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: var(--ztc-family-font1);
}

.nk-strength-card h3 a {
  color: var(--nk-white);
  text-decoration: none;
}

.nk-strength-card p {
  color: #C9D6EA;
  font-size: 13px;
  line-height: 1.5;
}

.nk-strength-card .nk-readmore {
  color: var(--nk-gold);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
}

.nk-strength-card .nk-readmore:hover {
  color: var(--nk-white);
}

/* ---------- Section vector background (Photo Gallery separator) ----------
   Subtle scattered-dot pattern, echoing the dot-cluster motif in the
   Navakeralam branding, recolored to the site's blue/purple tints — used to
   visually separate this section from the plain-white one above it without
   needing a real image asset. */

.nk-section-pattern {
  background-color: var(--nk-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='12' cy='16' r='3' fill='%23DCEBFB'/%3E%3Ccircle cx='48' cy='8' r='2' fill='%23DCEBFB'/%3E%3Ccircle cx='84' cy='30' r='4' fill='%23E7DFF6'/%3E%3Ccircle cx='100' cy='70' r='2.5' fill='%23DCEBFB'/%3E%3Ccircle cx='30' cy='60' r='2' fill='%23E7DFF6'/%3E%3Ccircle cx='60' cy='90' r='3' fill='%23DCEBFB'/%3E%3Ccircle cx='10' cy='100' r='2' fill='%23E7DFF6'/%3E%3Ccircle cx='95' cy='105' r='3' fill='%23DCEBFB'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
}

/* ---------- Extreme-poverty-free Kerala announcement ---------- */

.nk-poverty-section {
  background: var(--nk-purple);
  padding: 60px 0;
}

.nk-poverty-section h2,
.nk-poverty-section p {
  color: var(--nk-white);
}

.nk-poverty-section .nk-poverty-logo img {
  max-width: 100%;
}

.nk-poverty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--nk-purple);
  padding: 18px 24px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-decoration: none;
  background: linear-gradient(91deg, #f4f4f4 0.78%, var(--nk-purple-tint) 99.88%);
  transition: all 0.4s;
}

.nk-poverty-cta::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 10px;
  left: 50%;
  top: 0;
  transition: all 0.4s;
  background: var(--nk-ink);
  border-radius: 4px;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}

.nk-poverty-cta:hover {
  color: var(--nk-white);
  transform: translateY(-5px);
}

.nk-poverty-cta:hover::after {
  visibility: visible;
  opacity: 1;
  left: 0;
  width: 100%;
}

.nk-poverty-cta i {
  margin-left: 4px;
  transform: rotate(-45deg);
}

/* ---------- Banner slider (Hero) ---------- */

.nk-banner-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.nk-banner-slider .owl-nav {
  text-align: center;
  margin-top: 8px;
}

.nk-banner-slider .owl-nav.disabled {
  display: block;
}

.nk-banner-slider .owl-nav button {
  height: 46px;
  width: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 50%;
  background: var(--nk-blue-tint);
  color: var(--nk-blue-1);
  font-size: 16px;
  margin: 0 6px;
  transition: all 0.25s;
}

.nk-banner-slider .owl-nav button:hover {
  background: var(--nk-blue-2);
  color: var(--nk-white);
}

.nk-banner-slider .owl-dots {
  text-align: center;
  margin-top: 6px;
}

.nk-banner-slider .owl-dots .owl-dot span {
  background: #D7E3F5;
}

.nk-banner-slider .owl-dots .owl-dot.active span {
  background: var(--nk-gold);
}

/* ---------- Flagship slider ---------- */

.nk-flagship-slide {
  padding: 6px 4px 30px;
}

.nk-flagship-slider .owl-nav {
  text-align: center;
  margin-top: 8px;
}

.nk-flagship-slider .owl-nav.disabled {
  display: block;
}

.nk-flagship-slider .owl-nav button {
  height: 46px;
  width: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 50%;
  background: var(--nk-blue-tint);
  color: var(--nk-blue-1);
  font-size: 16px;
  margin: 0 6px;
  transition: all 0.25s;
}

.nk-flagship-slider .owl-nav button:hover {
  background: var(--nk-blue-2);
  color: var(--nk-white);
}

.nk-flagship-slider .owl-dots {
  text-align: center;
  margin-top: 6px;
}

.nk-flagship-slider .owl-dots .owl-dot span {
  background: #D7E3F5;
}

.nk-flagship-slider .owl-dots .owl-dot.active span {
  background: var(--nk-gold);
}

/* ---------- Responsive section paddings ---------- */

@media (max-width: 767px) {
  .nk-section,
  .nk-section-alt,
  .nk-section-dark,
  .nk-hero {
    padding: 45px 0;
  }
  .nk-section-head h2 {
    font-size: 26px;
  }
  .nk-story-card {
    height: 300px;
  }
  .nk-strength-card {
    height: 220px;
  }
}