/* ============================================================================
   REDSIGN.CSS — Modern layout overhaul for evisa-botswana.com
   Loaded AFTER css/style.mini.css so it can override base styles.
   Layout/appearance only — no content or functionality changes.
   ============================================================================ */

:root {
  --rd-primary: #0f5d76;        /* deep Botswana teal-blue */
  --rd-primary-dark: #0a4254;
  --rd-primary-darker: #062e3b;
  --rd-accent: #f4a826;          /* warm ochre accent */
  --rd-accent-dark: #d98d12;
  --rd-text: #24313a;
  --rd-text-soft: #4d5b66;
  --rd-muted: #7a8a96;
  --rd-surface: #ffffff;
  --rd-surface-soft: #f4f8fa;
  --rd-surface-muted: #e9eff3;
  --rd-border: #d8e2e8;
  --rd-shadow-sm: 0 1px 2px rgba(16, 42, 58, .06), 0 2px 8px rgba(16, 42, 58, .06);
  --rd-shadow-md: 0 6px 20px rgba(16, 42, 58, .10);
  --rd-shadow-lg: 0 18px 44px rgba(16, 42, 58, .16);
  --rd-radius: 14px;
  --rd-radius-sm: 8px;
  --rd-radius-lg: 22px;
  --rd-maxw: 1180px;
  --rd-font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
   GLOBAL
   --------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--rd-font);
  color: var(--rd-text);
  background-color: var(--rd-surface);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--rd-primary-dark);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}
h1 { font-size: 2.3rem; }
h2 {
  font-size: 1.75rem;
  margin: 1.6rem 0 .9rem;
  position: relative;
}
/* Accent underline under main content h2 headings (not inside cards/titles) */
.container h2::after,
[role="main"] h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rd-accent), var(--rd-primary));
}
/* Suppress the bar inside compact card / title / header contexts */
.bw4-title::after,
.visa-header .visa-type::after,
.service-card .service-title::after,
.minor-travel-info h3::after,
.process-steps .step h3::after,
.card-header h2::after,
.section-header h2::after,
.step-card .step-title::after,
.gallery-title::after,
.navbar h2::after,
.bg-page-head h2::after,
h2.bg-info.text-white::after {
  display: none;
}
h3 { font-size: 1.3rem; margin: 1.1rem 0 .55rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }
a { color: var(--rd-primary); transition: color .18s ease; }
a:hover { color: var(--rd-primary-dark); }
a strong { color:#1055cc; }

ul, ol { padding-left: 1.3rem; margin: 0 0 1rem; }
li { margin-bottom: .45rem; }
li > ul, li > ol { margin-top: .45rem; }
strong, b { font-weight: 700; color: var(--rd-text); }
em { font-style: italic; }
/* Do not italicize Font Awesome icon glyphs */
i.fa, i[class*="fa-"], i[class*="fas"], i[class*="far"] { font-style: normal; }

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

::selection {
  background: rgba(244, 168, 38, .35);
  color: var(--rd-primary-darker);
}
button:focus {
  outline: 0 !important;
}

/* Focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rd-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   BUTTONS — primary CTA & general
   --------------------------------------------------------------------------- */
.btn,
.nav-item.nav-link.btn,
.btn-primary {
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 999px;
  padding: .62rem 1.4rem;
  transition: all .2s ease;
  border: none;
  box-shadow: var(--rd-shadow-sm);
}
.btn-primary,
.nav-item.nav-link.btn,
.apply-btn-mobile .btn,
.apply-btn-desktop,
.bts-apply-evisa {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%);
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.nav-item.nav-link.btn:hover,
.apply-btn-desktop:hover,
.bts-apply-evisa:hover {
  background: linear-gradient(135deg, var(--rd-accent) 0%, var(--rd-accent-dark) 100%);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--rd-shadow-md);
}
.btn:focus, .btn:active { box-shadow: var(--rd-shadow-sm); }
.btn-secondary {
  background: var(--rd-surface-muted);
  color: var(--rd-primary-dark);
  border: 1px solid var(--rd-border);
}

/* Apply eVisa button variants */
.bts-apply-evisa {
  display: inline-block;
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%);
  color: #fff !important;
  padding: .72rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--rd-shadow-md);
  transition: all .2s ease;
}
.bts-apply-evisa:hover {
  background: linear-gradient(135deg, var(--rd-accent) 0%, var(--rd-accent-dark) 100%);
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   HEADER / NAVBAR
   --------------------------------------------------------------------------- */
.position-relative.shadow-sm,
header {
  background: #fff;
  box-shadow: 0 2px 14px rgba(16, 42, 58, .08);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar {
  /* padding-top: .5rem;
  padding-bottom: .5rem; */
  align-items: center;
}

.navbar-brand img,
.navbar-brand picture img {
  height: 56px !important;
  width: auto !important;
}

.navbar-light .navbar-nav .nav-link {
  font-weight: 600;
  color: var(--rd-text);
  font-size: .95rem;
  padding: .55rem .85rem !important;
  position: relative;
  border-radius: 8px;
  transition: color .18s ease, background .18s ease;
}
/* .navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--rd-primary);
  background: var(--rd-surface-soft);
} */

/* Highlight active link */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link[aria-current="page"] {
  color: var(--rd-primary);
  font-weight: 700;
}
.navbar-light .navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 26px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--rd-accent);
}

/* Apply eVisa in navbar */
.apply-btn-desktop,
.nav-item.nav-link.btn {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%);
  color: #fff !important;
  border-radius: 999px;
  margin-left: .4rem;
  padding: .5rem 1.3rem !important;
}
.apply-btn-desktop:hover {
  background: linear-gradient(135deg, var(--rd-accent) 0%, var(--rd-accent-dark) 100%);
  transform: translateY(-1px);
}

.navbar-toggler {
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  padding: .4rem .55rem;
  background: #fff;
  margin-right: 4px;
}
/* Custom 3-bar hamburger */
.navbar-toggler-icon {
  background-image: none !important;
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--rd-primary-dark);
  border-radius: 2px;
  box-shadow: 0 0 0 var(--rd-primary-dark);
}
.navbar-toggler-icon::before { top: 1px; box-shadow: 0 7px 0 var(--rd-primary-dark); }
.navbar-toggler-icon::after { top: 15px; }

/* Dropdown menu restyle */
.navbar-nav .dropdown-menu {
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-border);
  box-shadow: var(--rd-shadow-lg);
  padding: .5rem;
  margin-top: .35rem;
}
.navbar-nav .dropdown-item {
  color: var(--rd-text) !important;
  font-weight: 600;
  padding: .6rem .85rem;
  border-radius: 8px;
  font-size: .93rem;
  transition: background .15s ease, color .15s ease;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background: var(--rd-surface-soft);
  color: var(--rd-primary) !important;
}

/* ---------------------------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------------------------- */
.bg-light .breadcrumb,
.breadcrumb {
  background: var(--rd-surface-soft) !important;
  /* border-bottom: 1px solid var(--rd-border); */
  font-size: .88rem;
  color: var(--rd-muted);
}
.breadcrumb-item a { color: var(--rd-primary); font-weight: 600; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--rd-primary-dark); text-decoration: underline; }
.breadcrumb-item.active { color: var(--rd-text-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--rd-muted); }
.bg-light {
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.breadcrumb { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   PAGE HEAD / TITLE BANNER (used on inner pages)
   --------------------------------------------------------------------------- */
.bg-info.bg-info-custom,
.bg-page-head {
  background: linear-gradient(135deg, var(--rd-primary-dark) 0%, var(--rd-primary) 60%, #147a99 100%) !important;
}
.bg-page-head {
  padding-top: 1.6rem !important;
  padding-bottom: 1.6rem !important;
  background: linear-gradient(135deg, var(--rd-primary-dark) 0%, var(--rd-primary) 60%, #147a99 100%);
  border-radius: 0 0 var(--rd-radius-lg) var(--rd-radius-lg);
  position: relative;
  overflow: hidden;
}
.bg-page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.14), transparent 45%);
  pointer-events: none;
}
.bg-page-head h1 {
  color: #fff !important;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
}

/* Generic info band used across pages */
.bg-info {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%) !important;
}

/* ---------------------------------------------------------------------------
   HERO BANNER (index)
   --------------------------------------------------------------------------- */
.banner { margin: 0; }
.hero-banner { position: relative; overflow: hidden; border-radius: 0; }
.hero-banner::before {
  background: linear-gradient(120deg, rgba(6, 46, 59, .85) 0%, rgba(6, 46, 59, .58) 45%, rgba(6,46,59,.38) 100%) !important;
  z-index: 1;
}
.hero-banner .banner img,
.banner img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
}
@media (max-width: 576px) {
  .banner img { max-height: 320px; }
}

body .main-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  text-align: center;
  width: min(760px, 88%);
  background: rgba(6, 46, 59, .30) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: var(--rd-radius-lg) !important;
  padding: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
  font-size: 1.05rem;
}
body .main-heading h1 {
  color: #fff !important;
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: .5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
body .main-heading p {
  color: #eef6f8 !important;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
body .main-heading a {
  display: inline-block;
  background: linear-gradient(135deg, var(--rd-accent) 0%, var(--rd-accent-dark) 100%) !important;
  color: #fff !important;
  font-weight: 800;
  padding: .75rem 2rem !important;
  border-radius: 999px !important;
  text-decoration: none;
  box-shadow: var(--rd-shadow-md);
  transition: all .2s ease;
}
body .main-heading a:hover {
  transform: translateY(-2px);
  box-shadow: var(--rd-shadow-lg);
}
@media (max-width: 576px) {
  .main-heading { padding: 1.4rem 1.2rem; width: 92%; }
  .main-heading h1 { font-size: 1.9rem; }
  .main-heading p { font-size: .95rem; }
  body .main-heading h1 {font-size: 32px;}
}

/* ---------------------------------------------------------------------------
   VISA TYPE CARDS (index .visa-grid / .visa-card)
   --------------------------------------------------------------------------- */
.visa-container { padding: 0; }
/* Scope to grids that contain .visa-card (index) so other .visa-grid
   layouts (e.g. contact page's .visa-item links) keep their own rules. */
.visa-grid:has(> .visa-card) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 10px;
}
@media (max-width: 992px) {
  .visa-grid:has(> .visa-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .visa-grid:has(> .visa-card) { grid-template-columns: 1fr; }
}
body .visa-card {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-sm);
  transition: all .22s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.visa-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--rd-primary), var(--rd-accent));
  opacity: 0;
  transition: opacity .22s ease;
}
.visa-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rd-shadow-md);
  border-color: var(--rd-primary);
}
.visa-card:hover::before { opacity: 1; }
.visa-header {
  padding: 1.1rem 1.25rem .35rem;
}
.visa-header .visa-type {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.visa-header .visa-type a {
  color: var(--rd-primary-dark);
  text-decoration: none;
}
.visa-header .visa-type a:hover { color: var(--rd-primary); }
.visa-content {
  padding: .15rem 1.25rem 1.2rem;
  color: var(--rd-text-soft);
  font-size: .97rem;
}
.visa-content p { margin: 0; }

/* ---------------------------------------------------------------------------
   STEP CARDS (index .minor-travel-info / .minor-info-grid)
   --------------------------------------------------------------------------- */
.minor-travel-info .minor-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0;
}
@media (max-width: 991px) {
  .minor-travel-info .minor-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .minor-travel-info .minor-info-grid { grid-template-columns: 1fr; }
}
body .minor-info-card {
  background: #fff !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: var(--rd-radius) !important;
  padding: 1.2rem 1rem !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: var(--rd-shadow-sm);
  transition: all .2s ease;
  height: 100%;
}
body .minor-info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rd-shadow-md);
  border-color: var(--rd-primary);
}
body .minor-travel-info .icon-wrap {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%) !important;
  color: #fff !important;
  width: 54px !important;
  height: 54px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 24px !important;
  box-shadow: var(--rd-shadow-sm);
  margin: 0 auto;
}
body .minor-travel-info h3 {
  margin: 0 !important;
  color: var(--rd-primary-dark) !important;
  font-size: 1.05rem !important;
  text-align: center;
  grid-column: 1 !important;
}
body .minor-travel-info p {
  margin: 0 !important;
  color: var(--rd-text-soft) !important;
  font-size: .92rem !important;
  text-align: center;
  grid-column: 1 !important;
}

/* Contact page .visa-item quick-link cards */
.visa-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--rd-shadow-sm);
  transition: all .2s ease;
}
.visa-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--rd-shadow-md);
  border-color: var(--rd-primary);
}
.visa-item h2 { margin: 0; font-size: 1.05rem; }
.visa-item h2 a {
  color: var(--rd-primary-dark);
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.visa-item h2 a i { color: var(--rd-primary); }
.visa-item h2 a:hover { color: var(--rd-primary); }
.visa-item p { color: var(--rd-text-soft); font-size: .92rem; margin: 0; }

/* Step cards from .process-steps (inner pages) */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr; }
}
.process-steps .step {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  padding: 1.4rem 1.2rem;
  text-align: center;
  box-shadow: var(--rd-shadow-sm);
  transition: all .2s ease;
}
.process-steps .step:hover {
  transform: translateY(-4px);
  box-shadow: var(--rd-shadow-md);
}
.process-steps .step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%);
  color: #fff;
  font-size: 24px;
}
.process-steps .step h3 {
  color: var(--rd-primary-dark);
  font-size: 1.1rem;
  margin-bottom: .4rem;
}
.process-steps .step p {
  color: var(--rd-text-soft);
  font-size: .95rem;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   DESTINATION / GALLERY CARDS (index .bw4-*, inner .gallery-*)
   --------------------------------------------------------------------------- */
.bw4-wrap { margin: 16px 0; }
.bw4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1024px) {
  .bw4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bw4-grid { grid-template-columns: 1fr; }
}
.bw4-card {
  background: #fff;
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-sm);
  transition: all .22s ease;
  border: 1px solid var(--rd-border);
}
.bw4-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rd-shadow-md);
}
.bw4-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--rd-surface-muted);
}
.bw4-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.bw4-card:hover .bw4-media img { transform: scale(1.05); }
.bw4-body {
  padding: 14px 16px 18px;
}
.bw4-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rd-primary-dark);
}
.bw4-text {
  margin: 0;
  font-size: .95rem;
  color: var(--rd-text-soft);
  line-height: 1.55;
}

/* Inner-page gallery */
.gallery-container { margin: 18px 0; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 992px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .gallery-grid { grid-template-columns: 1fr; }
}
.gallery-item {
  position: relative;
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-sm);
  aspect-ratio: 16 / 10;
  background: var(--rd-surface-muted);
}
.gallery-item .gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.gallery-item:hover .gallery-image { transform: scale(1.06); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 46, 59, .92) 0%, rgba(6, 46, 59, .55) 45%, transparent 75%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 18px;
  opacity: 0;
  transition: opacity .28s ease;
}
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay { opacity: 1; }
.gallery-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.gallery-text {
  color: #e8f1f4;
  font-size: .88rem;
  margin: 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   TABLES — modern styling
   --------------------------------------------------------------------------- */
.table,
.styled-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--rd-radius-sm);
  overflow: hidden;
  box-shadow: var(--rd-shadow-sm);
  background: #fff;
  font-size: .96rem;
}
.table thead tr,
.styled-table thead tr {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%);
  color: #fff;
}
.table th,
.styled-table th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  background: transparent;
  border: 0;
}
.table td,
.styled-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--rd-border);
  color: var(--rd-text);
}
.table tbody tr:last-child td,
.styled-table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even),
.styled-table tbody tr:nth-child(even) { background: var(--rd-surface-soft); }
.table tbody tr:hover,
.styled-table tbody tr:hover { background: var(--rd-surface-muted); }
.table td p { margin: 0; }
/* .table tbody tr td p strong, b { color: #fff; } */
.table-bordered {
  border: 1px solid var(--rd-border);
}
.table-bordered th,
.table-bordered td {
  border: 1px solid var(--rd-border) !important;
}

/* ---------------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------------- */
.form-control,
.form-control:focus,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
  /* padding: .65rem .9rem; */
  font-size: .98rem;
  color: var(--rd-text);
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px rgba(15, 93, 118, .14);
  outline: none;
}
.form-label,
label {
  font-weight: 600;
  color: var(--rd-text-soft);
  margin-bottom: .4rem;
}
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--rd-primary);
}

/* ---------------------------------------------------------------------------
   ALERTS / CARDS / PANELS
   --------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-sm);
}
.card-header {
  background: var(--rd-surface-soft);
  border-bottom: 1px solid var(--rd-border);
  font-weight: 700;
  color: var(--rd-primary-dark);
  padding: 1rem 1.2rem;
}
.alert {
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-border);
  box-shadow: var(--rd-shadow-sm);
}

/* ---------------------------------------------------------------------------
   ACCORDIONS
   --------------------------------------------------------------------------- */
.accordion-item,
.accordion-button {
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm) !important;
}
.accordion-button {
  font-weight: 600;
  color: var(--rd-primary-dark);
}
.accordion-button:not(.collapsed) {
  background: var(--rd-surface-soft);
  color: var(--rd-primary);
}

/* ---------------------------------------------------------------------------
   AUDIO / PODCAST SECTION (index)
   --------------------------------------------------------------------------- */
body .audio-section {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-lg) !important;
  padding: 1.4rem 1.5rem !important;
  box-shadow: var(--rd-shadow-md);
  max-width: 640px;
  margin: 30px auto 14px;
}
body .audio-title {
  font-weight: 700;
  color: var(--rd-primary-dark);
  font-size: 1.08rem;
  text-align: center;
  margin-bottom: 12px;
}
.audio_div audio { width: 100%; }

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
footer,
.container-fluid.border-top.bg-info,
.bg-info.mt-5 {
  background: var(--rd-primary-darker) !important;
  color: #cfe2ea;
}
.bg-info.mt-5 .text-white,
.bg-info.mt-5 a {
  color: #d9eaf0 !important;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
}
.bg-info.mt-5 a:hover {
  color: #fff !important;
  padding-left: 5px;
}
.bg-info.mt-5 .col-lg-3 h4,
.bg-info.mt-5 .col-lg-3 .text-white {
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff !important;
}

/* Footer link columns spacing */
.bg-info.mt-5 .row .col-lg-3,
.bg-info.mt-5 .row .col-md-6 {
  padding: 0 1.1rem;
}
.bg-info.mt-5 .row .col-lg-3 a,
.bg-info.mt-5 .row .col-md-6 a {
  display: inline-block;
  font-size: .92rem;
}

/* Footer legal / disclaimer bar */
.container-fluid.p-2.bg-black {
  background: var(--rd-primary-darker) !important;
  border-top: 1px solid rgba(255,255,255,.12);
}
.fb-legal-bar__inner {
  color: #b9cdd6;
}
.fb-legal-bar__copy,
.fb-legal-bar__copy a { color: #b9cdd6 !important; }
.fb-legal-bar__copy a { font-weight: 600; }
.fb-legal-bar__link {
  color: #b9cdd6 !important;
  font-weight: 600;
}
.fb-legal-bar__link:hover { color: #fff !important; }
.fb-legal-bar__sep { background: rgba(255,255,255,.25); }

/* Floating "Apply eVisa" button */
a.apply_btn_fix {
  background: var(--rd-accent) !important;
  color: #21313a !important;
  /* border-radius: 999px; */
  font-weight: 700;
  box-shadow: var(--rd-shadow-md);
  border: none;
  /* padding: .6rem 1.1rem !important; */
}
a.apply_btn_fix:hover {
  background: var(--rd-accent-dark) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   SAMPLE IMAGE PREVIEW (include/sample_image_common.php)
   --------------------------------------------------------------------------- */
/* .simg-core-wrapper {
  max-width: 605.9px;
  margin: 14px auto;
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-md);
  /* border: 1px solid var(--rd-border); *
} */
.simg-core-heading {
  background: var(--rd-primary-dark);
  color: #fff;
}
.simg-core-heading-text {
  font-family: var(--rd-font);
  letter-spacing: 1px;
}
.simg-core-zoom-trigger {
  background: var(--rd-primary-dark);
  color: #fff;
  border-radius: 10px;
  box-shadow: var(--rd-shadow-md);
}
.simg-core-image { border-radius: 0; }

/* ---------------------------------------------------------------------------
   VIDEO CONTAINER (inner eVisa pages)
   --------------------------------------------------------------------------- */
.bo_in_visa_content_main_wrapper .video-container-main {
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-md);
}
.video-container-wrapper { margin: 12px 0; }

/* ---------------------------------------------------------------------------
   SERVICE CARDS (inner eVisa pages .service-card)
   --------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
@media (max-width: 992px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .services-grid { grid-template-columns: 1fr; }
}
.service-card {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  padding: 1.3rem 1.1rem;
  box-shadow: var(--rd-shadow-sm);
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rd-shadow-md);
}
.service-card .service-title {
  color: var(--rd-primary-dark);
  font-size: 1.08rem;
  margin-bottom: .5rem;
}
.service-card .service-text {
  color: var(--rd-text-soft);
  font-size: .93rem;
  margin: 0;
}
.service-card .circle {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(15,93,118,.10), rgba(244,168,38,.12));
}

/* ---------------------------------------------------------------------------
   COUNTRY DIRECTORY (index eligibility) — keep layout, refine look
   --------------------------------------------------------------------------- */
.country-directory__card {
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-md);
}
.country-directory__header {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%);
}
.country-directory__header h2 {
  color: #fff;
  font-size: 1.4rem;
  margin: 0;
}
.country-directory__header #eligibilityIntro {
  color: #dbeaf0;
  font-size: .9rem;
}
.country-directory__search {
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--rd-shadow-sm);
}
.country-directory__search-input {
  border-radius: 999px;
  font-size: .95rem;
}

/* ---------------------------------------------------------------------------
   WRAPPED / FLOATING IMAGES
   --------------------------------------------------------------------------- */
.wrapped-image {
  clear: both;
  float: right;
  margin: 8px 0 12px 1.2rem;
  /* max-width: 440px;
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-md); */
}
.wrapped-image img,
.img-design {
  /* border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-md); */
}
@media (max-width: 900px) {
  .wrapped-image { float: none; display: block; margin: 12px auto; }
}

/* ---------------------------------------------------------------------------
   NAVIGATION LISTS / SITEMAP
   --------------------------------------------------------------------------- */
.sitemap-link ul {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.sitemap-link ul li {
  margin-bottom: 0;
}
.sitemap-link ul li a {
  display: block;
  padding: .55rem .9rem;
  background: var(--rd-surface-soft);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-primary-dark);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
  transition: all .15s ease;
}
.sitemap-link ul li a:hover {
  background: var(--rd-primary);
  color: #fff;
  border-color: var(--rd-primary);
}

/* ---------------------------------------------------------------------------
   MISC
   --------------------------------------------------------------------------- */
.badge { border-radius: 6px; font-weight: 700; }
.text-muted { color: var(--rd-muted) !important; }
.text-secondary { color: var(--rd-text-soft) !important; }

hr {
  border: 0;
  height: 1px;
  background: var(--rd-border);
  margin: 1.6rem 0;
}

/* Section spacing for main content */
.col-md-12 h2:first-child,
[role="main"] h2:first-of-type {
  margin-top: .4rem;
}

/* Back to top button */
#up {
  border: none;
  background: var(--rd-primary) !important;
  color: #fff;
  border-radius: 50px;
  box-shadow: var(--rd-shadow-md);
}
#up:hover { background: var(--rd-accent) !important; }

/* Utility overrides to keep consistency with new palette */
.bg-info-text { color: var(--rd-primary-dark) !important; }

/* ---------------------------------------------------------------------------
   HARMONIZATION — page-specific custom layouts that carry their own inline
   styles. These soften / align them to the new palette WITHOUT removing any
   content or behavior.
   --------------------------------------------------------------------------- */

/* List styles */
.list-unstyled { padding-left: 0; list-style: none; }
.list-unstyled > li { margin-bottom: .55rem; }
.list-group {
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-sm);
}
.list-group-item {
  border: 1px solid var(--rd-border);
  border-radius: 0 !important;
  background: #fff;
}

/* Alerts */
.alert { padding: 1rem 1.2rem; }
.alert-info {
  background: var(--rd-surface-soft);
  color: var(--rd-primary-dark);
  border-color: var(--rd-border);
}
.alert-success {
  background: #e7f6ec;
  color: #1b6b34;
  border-color: #c3e8cf;
}
.alert-warning {
  background: #fdf3e0;
  color: #8a5a06;
  border-color: #f0dca0;
}
.alert-danger {
  background: #fdecec;
  color: #8c1f1f;
  border-color: #f5c2c2;
}

/* Section header used on payment/demo pages */
.section-header {
  background: linear-gradient(135deg, var(--rd-surface-soft), #fff);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  padding: 1rem 1.2rem;
  box-shadow: var(--rd-shadow-sm);
  margin-bottom: 14px;
}
.section-header h2,
.section-header h3 {
  margin: 0;
  color: var(--rd-primary-dark);
}

/* Hero section custom (evisa-for-country pages) — keep layout, refine look */
.hero-section-custom,
.main-section {
  border-radius: var(--rd-radius-lg);
}
.hero-section-image,
.hero-section-image1 {
  max-width: 450px;
  width: 100%;
  height: auto;
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-sm);
}

/* Process grid / cards (evisa-for-country & fees pages) */
.process-grid { margin: 16px 0; }
.process-card {
  background: #fff !important;
  border: 1px solid var(--rd-border) !important;
  border-left: 5px solid var(--rd-primary) !important;
  border-radius: var(--rd-radius) !important;
  box-shadow: var(--rd-shadow-sm);
  transition: all .2s ease;
}
.process-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rd-shadow-md);
}
.process-card h3 {
  color: var(--rd-primary-dark) !important;
}

/* Flow steps (evisa-for-country & fees pages) */
.flow-step {
  background: #fff !important;
  border-radius: var(--rd-radius) !important;
  border-top: 4px solid var(--rd-primary) !important;
  box-shadow: var(--rd-shadow-sm) !important;
  transition: all .2s ease;
}
.flow-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--rd-shadow-md) !important;
}
.flow-title {
  color: var(--rd-primary-dark) !important;
  font-weight: 700;
}
.flow-header .fa,
.flow-icon { color: var(--rd-primary); }
.flow-description p { color: var(--rd-text-soft); }

/* Inline links inside content — keep readable but on-palette */
article a,
.col-md-12 a,
.content-column-custom a,
.hero-section-custom a {
  color: var(--rd-primary);
  font-weight: 500;
  text-decoration: none;
}
article a:hover,
.col-md-12 a:hover,
.content-column-custom a:hover,
.hero-section-custom a:hover {
  color: var(--rd-primary-dark);
  text-decoration: underline;
}

/* Content prose max-width for readability on wide screens */
[role="main"] p,
[role="main"] ul,
[role="main"] ol,
[role="main"] table {
  max-width: 920px;
}

/* ---------------------------------------------------------------------------
   BLOG / NEWS ARTICLE PAGES
   --------------------------------------------------------------------------- */
.news-item,
.blog-card,
article.post,
.news-post {
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-sm);
  transition: all .2s ease;
  overflow: hidden;
}
.news-item:hover,
.blog-card:hover,
article.post:hover,
.news-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--rd-shadow-md);
}
.news-item .news-thumb img,
.blog-card img,
article.post img,
.news-post img {
  width: 100%;
  /* border-radius: var(--rd-radius) var(--rd-radius) 0 0; */
  object-fit: cover;
}
.news-item .news-body,
.blog-card .news-body,
article.post .news-body {
  padding: 1rem 1.2rem;
}
.news-item h2,
.news-item h3,
.blog-card h2,
.blog-card h3,
article.post h2,
article.post h3 {
  color: var(--rd-primary-dark);
}
.news-item h2 a,
.blog-card h2 a,
article.post h2 a {
  color: var(--rd-primary-dark);
  text-decoration: none;
}
.news-item h2 a:hover,
.blog-card h2 a:hover,
article.post h2 a:hover {
  color: var(--rd-primary);
}

/* Recent posts sidebar heading */
h2.bg-info.text-white {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%) !important;
  border-radius: var(--rd-radius-sm);
  color: #fff;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
}
h2.bg-info.text-white::after { display: none; }

/* ---------------------------------------------------------------------------
   REGISTRATION / APPLICATION / PAYMENT FORM PAGES
   --------------------------------------------------------------------------- */
.registration-box,
.form-box,
.apply-box,
.card.p-3 {
  border-radius: var(--rd-radius) !important;
  box-shadow: var(--rd-shadow-md) !important;
  border: 1px solid var(--rd-border) !important;
}
.card.p-3 {
  background: #fff !important;
}

/* Field labels inside forms */
.label_container .label,
.form-group label {
  font-weight: 600;
  color: var(--rd-text-soft);
  font-size: .92rem;
}
.element_container .err {
  color: #c0392b;
  font-size: .82rem;
  font-weight: 600;
}
.input-error {
  border-color: #c0392b !important;
}

/* Success message */
#message_successful {
  background: #e7f6ec !important;
  color: #1b6b34 !important;
  border-radius: var(--rd-radius-sm);
  padding: .8rem 1rem !important;
  font-weight: 600;
}

/* Submit buttons in forms */
form .btn-primary,
#contact_of,
button[type="submit"] {
  border-radius: 999px;
  font-weight: 700;
}

/* Table headings on content pages */
.table thead th,
.table > :not(caption) > tr:first-child th,
.table > :not(caption) > tr:first-child td {
  background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-primary-dark) 100%);
  color: #fff;
}
.table > :not(caption) > tr:first-child td p { color: #fff; }
.table > :not(caption) > tr:first-child td p strong {color: #fff;}

/* Centered headings */
.text-center h1,
.text-center h2 {
  text-align: center;
}
.text-center h2::after {
  margin-left: auto;
  margin-right: auto;
}

/* Ensure tables inside narrow wrappers are readable */
.table-responsive { margin: 14px 0; }

/* Small helper: subtle background band for alternate sections */
section:nth-of-type(even) {
  /* no forced background; keep pages clean */
}