/*

*/
:root,
[data-bs-theme=light] {
  --bs-body-bg: #ffffff;
  --bs-body-color: #494B5B;
  --bs-primary: #c4161c;
  --bs-visa-primary: #c4161c;
  --bs-visa-secondary: #003a66;
  --bs-primary-rgb: 33, 92, 92;
  --bs-primary-hover: #c4161c;
  --bs-primary-hover-rgb: 20, 75, 75;
  --bs-secondary: #CCE8C9;
  --bs-secondary-rgb: 204, 232, 201;
  --bs-heading-color: #16181B;
  --inverse-color: #494B5B;
  --inverse-color-rgb: 73, 75, 91;
  --bs-link-color: var(--bs-primary);
  --nav-bg: #ffffff;
  --bg-black: #000000;
  --nav-color: #fff;
  --nav-hover-color: #1f6bff;
  --dropdown-bg: #ffffff;
  --dropdown-color: #1f6bff;
  --dropdown-hover-bg: #f7f7f7;
  --nav-inverse: #000000;
  --nav-inverse-alt: #ffffff;
}
html {
    overflow-y: scroll;
}
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-wrap {
  position: relative;
}

::-moz-selection {
  background-color: var(--bs-black);
  color: var(--bs-white);
}

::selection {
  background-color: var(--bs-black);
  color: var(--bs-white);
}

a {
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  color: var(--bs-primary);
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bs-heading-color);
}

.container {
  max-width: 1140px;
}

.section {
  padding: 50px 0;
  scroll-margin-top: 40px;
  box-shadow: 0 0.1875rem 0.375rem rgba(var(--bs-black-rgb), 0.05) !important;
}
@media (max-width: 767.98px) {
  .section {
    padding: 40px 0;
  }
}
.section.first-section {
  /* padding-top: 100px; */
}
@media (min-width: 992px) {
  .section.first-section {
    /* padding-top: 130px; */
  }
}

.text-heading-color {
  color: var(--bs-heading-color);
}

.shadow-sm {
  -webkit-box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--bs-black-rgb), 0.05) !important;
          box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--bs-black-rgb), 0.05) !important;
}

.shadow {
  -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(var(--bs-black-rgb), 0.05) !important;
          box-shadow: 0 0.5rem 1rem 0 rgba(var(--bs-black-rgb), 0.05) !important;
}

.shadow-lg {
  -webkit-box-shadow: 0 1rem 3rem 0 rgba(var(--bs-black-rgb), 0.05) !important;
          box-shadow: 0 1rem 3rem 0 rgba(var(--bs-black-rgb), 0.05) !important;
}

.list-checked {
  padding: 0;
  margin: 0;
  color: var(--bs-body-color);
}
.list-checked li {
  position: relative;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 10px;
}
.list-checked li i {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  border-radius: 50%;
  color: var(--bs-primary);
  font-size: 20px;
}
.list-checked li:before {
  position: absolute;
  display: inline-block;
  left: 0;
  content: "";
  vertical-align: -0.125em;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1.5625rem 1.5625rem;
  width: 1.5625rem;
  height: 1.5625rem;
}

.btn {
  padding: 12px 20px;
  border-radius: 7px;
  font-weight: 600;
  position: relative;
}
/* Solid red fill is the default look for a bare .btn — but Bootstrap's
   outline variants (.btn-outline-light/-danger/-primary, all used
   elsewhere in this project) carry the plain ".btn" class too, so this
   was forcing every one of them to a solid red background with a
   transparent border regardless of variant, via rules with !important
   that even Bootstrap's own more-specific outline CSS couldn't beat. On
   includes/appFooter.php's red CTA banner this made the ".btn-outline-
   light" "Send Email" button render as a solid-red button with an
   invisible (same-color-as-background) border, and hover changed nothing
   visible since both states were shades of the same red. Excluding any
   element with a "btn-outline-*" class restores Bootstrap's real outline
   behaviour (transparent bg + coloured border, inverting on hover) for
   every outline button site-wide, while every other (solid) button is
   completely unaffected. */
.btn:not([class*="btn-outline-"]) {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border: 1px solid transparent;
}
/* .btn-outline-primary specifically: Bootstrap's own compiled CSS hardcodes
   its --bs-btn-* local custom properties to Bootstrap's default blue
   (#0d6efd) rather than referencing the site's --bs-primary variable, so
   redefining --bs-primary at :root (above) never reached this variant —
   every outline-primary button rendered blue instead of brand red. This
   redefines the same local custom-property names Bootstrap's own
   .btn-outline-primary rule consumes, so its existing background/border/
   color/hover logic picks up the brand color correctly. Other outline
   variants (-danger, -light, -success, etc.) are untouched since they're
   meant to keep their own semantic colors. */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn:not([class*="btn-outline-"]):hover, .btn:not([class*="btn-outline-"]):focus {
  color: var(--bs-white);
  background-color: var(--bs-primary-hover) !important;
  border: 1px solid var(--bs-primary-hover) !important;
  outline: none !important;
  box-shadow: none !important;
}
/* General button active state - exclude submit buttons */
.btn:not([class*="btn-outline-"]):active:not(button[type="submit"]) {
  color: var(--bs-white);
  background-color: var(--bs-primary-hover) !important;
  border: 1px solid var(--bs-primary-hover) !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Remove blue focus ring from buttons */
.btn:focus-visible {
  outline: 2px solid var(--bs-primary) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem rgba(196, 22, 28, 0.25) !important;
}
/* Submit button specific styles */
button[type="submit"].btn-primary:focus,
button[type="submit"].btn-primary:focus-visible {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  outline: 2px solid var(--bs-primary) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem rgba(196, 22, 28, 0.25) !important;
}
/* Submit button active/click state - black with white text (highest specificity) */
button[type="submit"].btn.btn-primary:active,
button[type="submit"].btn-primary:active,
#submitBtn:active,
button[type="submit"]:active.btn-primary,
.btn-primary[type="submit"]:active,
form button[type="submit"].btn-primary:active,
form[data-ajax="true"] button[type="submit"]:active,
#inquiryForm button[type="submit"]:active {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn.btn-white.hover-outline {
  background-color: var(--bs-white) !important;
  color: var(--bs-black) !important;
  border: 1px solid transparent !important;
}
.btn.btn-white.hover-outline:hover {
  color: var(--bs-white) !important;
  background-color: transparent !important;
  border: 1px solid var(--bs-white) !important;
}
.btn.btn-white-outline {
  /* --inverse-color[-rgb] is meant to be the "inverse" of --bs-body-color for
     use on dark/colored backgrounds, but is wrongly set to the exact same
     dark value (#494B5B) as --bs-body-color — see :root above. Left as-is
     here rather than changed globally: --inverse-color is also relied on
     elsewhere (e.g. navbar text) where the dark value is correct. This
     button's only unpatched use (includes/appSlider.php's hero "Our
     Services" button) sits on a near-white background, where the existing
     dark, low-opacity border already reads fine. The other use
     (includes/appFooter.php's red-background "Send Email" button) needed a
     genuinely light/white border and now uses Bootstrap's own
     .btn-outline-light instead of a patched-up variant of this class. */
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2) !important;
  color: var(--inverse-color) !important;
  background-color: transparent;
}
.btn.btn-white-outline:hover, .btn.btn-white-outline:focus, .btn.btn-white-outline:active {
  background-color: transparent !important;
  border: 1px solid rgba(var(--inverse-color-rgb), 0.5) !important;
}

.block-squares {
  position: absolute;
  bottom: -12px;
  right: 0;
  z-index: 1;
  width: auto;
}

.form-control {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  border-width: 1px;
  font-size: 14px;
  line-height: 1.5;
  height: auto;
  min-height: 38px;
  background-color: transparent;
  border-color: rgba(var(--inverse-color-rgb), 0.1);
}

/* Contact form specific - reduce height */
#inquiryForm .form-control,
.contact_input_area .form-control,
.request-form .form-control {
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Textarea specific - reduce height */
#inquiryForm textarea.form-control,
.contact_input_area textarea.form-control,
.request-form textarea.form-control {
  height: 60px !important;
  min-height: 60px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  resize: vertical;
}

/* Contact form margin spacing */
.contact_input_area .mb-3,
.request-form .mb-3 {
  margin-bottom: 12px !important;
}

/* Keywords Section - Mobile Responsive */
.keywords-section {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.keywords-container p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 767.98px) {
  .keywords-section {
    padding: 15px !important;
    margin: 15px 0 !important;
  }
  
  .keywords-section h4 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }
  
  .keywords-container p {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 575.98px) {
  .keywords-section {
    padding: 12px !important;
  }
  
  .keywords-section h4 {
    font-size: 14px !important;
  }
  
  .keywords-container p {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

/* Header buttons - Mobile responsive */
@media (max-width: 767.98px) {
  .header-social .btn {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .header-social .btn i {
    font-size: 14px;
  }
}

/* Contact form - Mobile responsive */
@media (max-width: 767.98px) {
  .request-form,
  .contact_input_area {
    position: relative !important;
    top: auto !important;
    margin-top: 20px;
  }
  
  .col-lg-4 .request-form {
    position: relative !important;
  }
}

/* Category page layout - Mobile */
@media (max-width: 991.98px) {
  .about__v4 .col-lg-8,
  .about__v4 .col-lg-4 {
    margin-bottom: 30px;
  }
}

.form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: var(--bs-primary);
}

/* Select dropdown styling and hover effects */
select.form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23c4161c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  transition: all 0.3s ease;
}

.form-control:hover,
select.form-control:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(196, 22, 28, 0.1);
}

select.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(196, 22, 28, 0.25);
}

/* Select option hover effect */
select.form-control option {
  padding: 8px;
}

select.form-control option:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

select.form-control option:checked {
  background-color: var(--bs-primary);
  color: #fff;
}

.a-link i {
  font-size: 26px;
  margin-left: 10px;
  -webkit-transition: 0.25s all ease-in-out;
  transition: 0.25s all ease-in-out;
}
.a-link:hover i {
  margin-left: 15px;
}

.page-title {
  padding-top: 100px !important;
  padding-bottom: 50px !important;
  background-color: rgba(var(--inverse-color-rgb), 0.03);
}

.special-link .icons {
  display: inline-block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
}

.special-link .icons i {
  font-size: 25px;
  position: relative;
  display: inline-block;
  position: absolute;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.special-link .icons i.icon-1 {
  opacity: 1;
  visibility: visible;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.special-link .icons i.icon-2 {
  opacity: 0;
  visibility: hidden;
  top: 80%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.special-link:hover .icons .icon-1 {
  opacity: 0;
  visibility: hidden;
  top: 20%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.special-link:hover .icons .icon-2 {
  opacity: 1;
  visibility: visible;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

.fbs__net-navbar {
  position: absolute;
  top: 0;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  z-index: 999;
  width: 100%;
  /* background-color: transparent !important; */
  background-color: var(--nav-bg) !important;
  border: none;
}

@media (min-width: 992px) {
  .fbs__net-navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.fbs__net-navbar > .container {
  position: relative;
}
.fbs__net-navbar.relative {
  position: absolute;
}
.fbs__net-navbar .navbar-brand {
  color: var(--bs-white);
  font-size: 30px;
  font-weight: bold;
}
.fbs__net-navbar .navbar-brand .logo.dark {
  display: none;
}
.fbs__net-navbar .navbar-brand .logo.light {
  display: block;
}
.fbs__net-navbar .navbar-nav > li > .nav-link {
  position: relative;
  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(var(--bs-white-rgb), 1);
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  position: relative;
}
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav > li > .nav-link {
    color: var(--inverse-color);
  }
}
.fbs__net-navbar .navbar-nav > li > .nav-link:before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  border-radius: 5px;
  height: 1.5px;
  bottom: 0;
  left: 10px;
  /* background: currentcolor; */
  background: rgb(224 36 84);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transition: -webkit-transform 0.35s ease-out;
  transition: -webkit-transform 0.35s ease-out;
  transition: transform 0.35s ease-out;
  transition: transform 0.35s ease-out, -webkit-transform 0.35s ease-out;
}
.fbs__net-navbar .navbar-nav > li > .nav-link:hover::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.fbs__net-navbar .navbar-nav > li > .nav-link:hover, .fbs__net-navbar .navbar-nav > li > .nav-link:focus {
  color: var(--bs-white);
}
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav > li > .nav-link:hover, .fbs__net-navbar .navbar-nav > li > .nav-link:focus {
    color: var(--inverse-color) !important;
  }
}
@media (max-width: 767.98px) {
  .fbs__net-navbar .navbar-nav > li > .nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.fbs__net-navbar .navbar-nav > li > .nav-link.active {
  color: var(--bs-white);
}
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav > li > .nav-link.active {
    color: var(--inverse-color);
  }
}
.fbs__net-navbar .navbar-nav > li > .nav-link.active:before {
  content: "";
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.fbs__net-navbar .navbar-nav > li > .nav-link.dropdown-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.fbs__net-navbar .navbar-nav > li > .nav-link.dropdown-toggle::after {
  display: none;
  content: "";
}
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav > li > .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.fbs__net-navbar .navbar-nav .dropdown-menu {
  background-color: var(--nav-bg);
}
.fbs__net-navbar .navbar-nav .dropdown-menu .nav-link:hover {
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--inverse-color);
}
.fbs__net-navbar .navbar-nav .dropdown-toggle::after {
  display: none;
}
.fbs__net-navbar .navbar-nav .dropdown-toggle .bi-chevron-down {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  display: inline-block;
}
/* Rotate chevron when dropdown is open on mobile */
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav .dropdown.show .dropdown-toggle .bi-chevron-down,
  .fbs__net-navbar .navbar-nav .dropdown[aria-expanded="true"] .dropdown-toggle .bi-chevron-down {
    transform: rotate(180deg);
  }
}
.fbs__net-navbar .fbs__net-navbar-toggler {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  background-color: var(--bs-black);
  color: var(--bs-white);
  border: none;
  display: none;
}
@media (max-width: 991.98px) {
  .fbs__net-navbar .fbs__net-navbar-toggler {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.fbs__net-navbar .navbar-brand {
  margin-right: 0 !important;
}
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu,
.fbs__net-navbar .navbar-nav .dropend > .dropdown-menu,
.fbs__net-navbar .navbar-nav .dropstart > .dropdown-menu {
  border: none !important;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-shadow: 0 0.1875rem 0.375rem rgba(var(--bs-black-rgb), 0.1);
          box-shadow: 0 0.1875rem 0.375rem rgba(var(--bs-black-rgb), 0.1);
}
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu,
  .fbs__net-navbar .navbar-nav .dropend > .dropdown-menu,
  .fbs__net-navbar .navbar-nav .dropstart > .dropdown-menu {
    padding-left: 10px;
    padding-right: 10px;
    width: 300px;
    min-width: 300px;
    border: none;
  }
}
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu .dropdown-item,
.fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu .nav-link,
.fbs__net-navbar .navbar-nav .dropend > .dropdown-menu .dropdown-item,
.fbs__net-navbar .navbar-nav .dropend > .dropdown-menu .nav-link,
.fbs__net-navbar .navbar-nav .dropstart > .dropdown-menu .dropdown-item,
.fbs__net-navbar .navbar-nav .dropstart > .dropdown-menu .nav-link {
  font-size: 0.875rem;
  padding: 6px 10px;
  font-weight: 500;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  border-radius: 0.5rem;
}
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-nav .dropdown:hover > .dropdown-menu,
  .fbs__net-navbar .navbar-nav .dropend:hover > .dropdown-menu,
  .fbs__net-navbar .navbar-nav .dropstart:hover > .dropdown-menu {
    display: block;
    -webkit-animation: fadeInUp 0.3s ease;
            animation: fadeInUp 0.3s ease;
  }
}
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-nav .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    -webkit-animation: fadeInRight 0.3s ease;
            animation: fadeInRight 0.3s ease;
  }
}
@media (min-width: 992px) {
  .fbs__net-navbar .navbar-nav .dropstart:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    right: 100%;
    -webkit-animation: fadeInLeft 0.3s ease;
            animation: fadeInLeft 0.3s ease;
  }
}
.fbs__net-navbar .navbar-nav .dropdown-toggle::before {
  display: none;
}
.fbs__net-navbar .navbar-nav .dropdown-toggle::after {
  display: none;
}
.fbs__net-navbar .navbar-nav li.dropend > a,
.fbs__net-navbar .navbar-nav li.dropstart > a {
  position: relative;
}
.fbs__net-navbar .navbar-nav li.dropend > a .bi,
.fbs__net-navbar .navbar-nav li.dropstart > a .bi {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (max-width: 991.98px) {
  .fbs__net-navbar .navbar-nav li.dropend > a .bi,
  .fbs__net-navbar .navbar-nav li.dropstart > a .bi {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    margin-top: -10px;
  }
}
.fbs__net-navbar .navbar-nav li.dropend > a::after,
.fbs__net-navbar .navbar-nav li.dropstart > a::after {
  display: none;
}
.fbs__net-navbar .navbar-nav li.dropend > a {
  position: relative;
}
.fbs__net-navbar .navbar-nav li.dropend > a:hover {
  background-color: var(--dropdown-hover-bg) !important;
}
.fbs__net-navbar .navbar-nav li.dropend > a .caret {
  position: absolute;
  right: 10px;
}
.fbs__net-navbar .navbar-nav li.dropstart > a {
  position: relative;
}
.fbs__net-navbar .navbar-nav li.dropstart > a:hover {
  background-color: var(--dropdown-hover-bg) !important;
}
.fbs__net-navbar .navbar-nav li.dropstart > a .caret {
  position: absolute;
  left: 10px;
}
.fbs__net-navbar .navbar-toggler:hover, .fbs__net-navbar .navbar-toggler:focus, .fbs__net-navbar .navbar-toggler:active {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.fbs__net-navbar .header-social a {
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  color: var(--bs-white);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
  background-color: transparent;
}
.fbs__net-navbar .header-social a:hover {
  background-color: rgba(var(--bs-white-rgb), 0.1);
}
@media (min-width: 992px) {
  .fbs__net-navbar .header-social a {
    color: var(--bs-white);
  }
}
.fbs__net-navbar .header-social .btn {
  width: auto !important;
  height: auto !important;
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}
@media (max-width: 575.98px) {
  .fbs__net-navbar .header-social .btn {
    display: none;
  }
}
/* "Send Email" is deliberately the odd-one-out of the two header CTAs (black
   vs the red "Call" button, for visual distinction) — previously done with
   an inline style="background-color:#000!important" on the element itself,
   which "worked" only by virtue of inline styles outranking every external
   !important rule, in every navbar state, for the wrong reason (brittle,
   and impossible to reason about alongside the .dark/.active navbar-state
   rules above). A dedicated, more-specific class here does the same job
   through the normal cascade instead. */
.fbs__net-navbar .header-social .btn.btn-header-dark,
.fbs__net-navbar.dark .header-social .btn.btn-header-dark,
.fbs__net-navbar.active .header-social .btn.btn-header-dark {
  background-color: #000 !important;
  color: var(--bs-white) !important;
}
.fbs__net-navbar .header-social .btn.btn-header-dark:hover {
  background-color: #1a1a1a !important;
}
.fbs__net-navbar.active {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: var(--nav-bg) !important;
  -webkit-box-shadow: 0 0.1875rem 0.375rem rgba(var(--bs-black-rgb), 0.05) !important;
          box-shadow: 0 0.1875rem 0.375rem rgba(var(--bs-black-rgb), 0.05) !important;
}
.fbs__net-navbar.active .navbar-brand {
  color: rgba(var(--inverse-color-rgb), 1) !important;
}
.fbs__net-navbar.active .navbar-brand .logo.dark {
  display: block;
}

.fbs__net-navbar.active .navbar-brand .logo.light {
  display: none;
}

.fbs__net-navbar.active .nav-link {
  color: rgba(var(--inverse-color-rgb), 1) !important;
}
.fbs__net-navbar.active .nav-link:hover {
  color: rgba(var(--inverse-color-rgb), 1) !important;
}
/* :not(.btn) throughout this block — the "Send Email"/"Call" CTA buttons in
   .header-social carry their own solid-fill colour (via .btn-header-dark or
   the sitewide .btn rule) and shouldn't also be targeted by this generic
   "any link in the scrolled navbar's social area" text-colour rule; the two
   were only resolved correctly by a fragile specificity tie-break against
   the ".header-social .btn" rule further down, which is exactly the kind of
   silent conflict that made these buttons look right in one navbar state
   and wrong in the other. */
.fbs__net-navbar.active .header-social a:not(.btn) {
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  color: var(--inverse-color);
}
.fbs__net-navbar.active .header-social a:not(.btn):hover {
  background-color: rgba(var(--inverse-color-rgb), 0.1);
}
@media (min-width: 992px) {
  .fbs__net-navbar.active .header-social a:not(.btn) {
    color: rgba(var(--inverse-color-rgb), 1) !important;
  }
}
.fbs__net-navbar.active .header-social .btn {
  width: auto !important;
  height: auto !important;
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}
.fbs__net-navbar.active .navbar-nav > li > .dropdown-toggle:hover {
  color: var(--inverse-color) !important;
}
.fbs__net-navbar.active .navbar-nav > li > .nav-link.dropdown-toggle::after {
  display: none;
  content: "";
}
/* This rule's specificity (li + a element chain, on top of the classes) is
   actually HIGHER than the dedicated ".dropdown-item:hover" colour rule
   further down in this file, because it's not scoped with :not(.dropdown-item)
   like every other dark/scrolled-navbar rule already is — it was still
   winning the fight for dropdown items' hover text colour specifically in
   the scrolled (.active) navbar state, forcing dark text onto the red hover
   background. Excluding .dropdown-item here (this rule is meant for the
   top-level "Our Services"/"Countries" dropdown TOGGLE links only, not the
   items inside their menus) is the actual fix. */
.fbs__net-navbar.active .navbar-nav li.dropdown a:not(.dropdown-item):hover,
.fbs__net-navbar.active .navbar-nav li.dropend a:not(.dropdown-item):hover,
.fbs__net-navbar.active .navbar-nav li.dropstart a:not(.dropdown-item):hover {
  color: var(--inverse-color) !important;
}
.fbs__net-navbar .fbs__net-icon-menu {
  display: block;
}
.fbs__net-navbar .fbs__net-icon-close {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.offcanvas-active .fbs__net-navbar .fbs__net-icon-menu {
  display: none;
}
.offcanvas-active .fbs__net-navbar .fbs__net-icon-close {
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fbs__net-navbar.dark {
  -webkit-box-shadow: 0 0px 2px rgba(var(--inverse-color-rgb), 0.15);
          box-shadow: 0 0px 2px rgba(var(--inverse-color-rgb), 0.15);
}
.fbs__net-navbar.dark .navbar-brand .logo.dark {
  display: block;
  max-height: 55px;
}
.footer-logo img{
    max-height: 60px;
    margin-bottom: 1rem;
    mix-blend-mode: darken;
}

.fbs__net-navbar.dark .navbar-brand .logo.light {
  display: none;
}

/* :not(.dropdown-item):not(.btn) on all four of these — dropdown/mega-menu
   links have their own dedicated colour + hover/active rule (".fbs__net-navbar
   .navbar-nav .dropdown-menu .dropdown-item..." further down), and the
   "Send Email"/"Call" header CTA buttons (.btn, in .header-social) have
   their own solid-fill colour that a generic dark-navbar link-colour rule
   has no business overriding either. Without :not(.btn), this rule's
   !important text-colour was fighting the CTA buttons' own white text on
   every dark-navbar page, and without :not(.dropdown-item), it was
   fighting the dropdown-item hover/active rule (see comment history below)
   — both symptoms the user reported as "buttons/menu turning black". */
.fbs__net-navbar.dark a:not(.dropdown-item):not(.btn) {
  color: var(--inverse-color) !important;
}
.fbs__net-navbar.dark a:not(.dropdown-item):not(.btn):hover {
  color: var(--inverse-color);
}
.fbs__net-navbar.dark .header-social a:hover {
  background-color: rgba(var(--inverse-color-rgb), 0.05);
}

.fbs__net-navbar.dark ul li a:not(.dropdown-item):not(.btn) {
  color: rgba(var(--inverse-color-rgb), 1) !important;
}
.fbs__net-navbar.dark ul li a:not(.dropdown-item):not(.btn):hover {
  color: var(--inverse-color) !important;
}
.fbs__net-navbar .offcanvas-header .offcanvas-header-logo .logo-link .logo.dark {
  display: block;
  max-height: 50px;
}

.fbs__net-navbar .offcanvas-header .offcanvas-header-logo .logo-link .logo.light {
  display: none;
  max-height: 50px;
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.hero__v6 {
    padding: 8rem 0 3rem 0 !important;
    box-shadow: 0 0.1875rem 0.375rem rgba(var(--bs-black-rgb), 0.05) !important;
}
.hero__v6 .hero-subtitle {
  /* background: color-mix(in srgb, var(--bs-secondary), transparent 70%); */
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}
.hero__v6 .hero-subtitle-link {
  color: inherit;
  text-decoration: none;
}
.hero__v6 .hero-subtitle-link:hover {
  text-decoration: underline;
}
.hero__v6 .hero-title {
  font-size: 48px;
}
@media (max-width: 1199.98px) {
  .hero__v6 .hero-title {
    font-size: 40px;
  }
}
@media (max-width: 991.98px) {
  .hero__v6 .hero-title {
    font-size: 30px;
  }
}
.hero__v6 .logos .logos-title {
  font-size: 12px;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--bs-primary), transparent 10%);
}

.hero__v6 .logos img {
  width: 140px;
}
.hero__v6 .hero-img {
  position: relative;
}
.hero__v6 .hero-img .img-main {
  position: relative;
  z-index: 9;
}
.hero__v6 .hero-img .img-card {
  z-index: 10;
  border-radius: 20px;
  -webkit-box-shadow: 0 15px 40px 0 rgba(var(--bs-black-rgb), 0.1);
          box-shadow: 0 15px 40px 0 rgba(var(--bs-black-rgb), 0.1);
  position: absolute;
  max-width: 280px;
  bottom: -40px;
  left: -60px;
}
@media (max-width: 991.98px) {
  .hero__v6 .hero-img .img-card {
    left: 10px;
    max-width: 380px;
  }
}
@media (max-width: 575.98px) {
  .hero__v6 .hero-img .img-card {
    left: 10px;
    max-width: 280px;
  }
}

/* ======= Hero Stats ======= */
.hero-stats-wrap { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px; padding: 14px 20px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.hero-stat { flex: 1; text-align: center; }
.hero-stat-num { font-size: 1.75rem; font-weight: 800; color: #c4161c; line-height: 1.1; letter-spacing: -.5px; }
.hero-stat-lbl { font-size: .72rem; color: #777; font-weight: 500; margin-top: 3px; line-height: 1.3; }
.hero-stat-div { width: 1px; background: rgba(0,0,0,.09); margin: 4px 12px; }

/* ======= Hero Urgency Badge ======= */
.hero-urgency-badge { position: absolute; top: 18px; right: 12px; z-index: 12; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 32px rgba(0,0,0,.13); border: 1px solid rgba(0,0,0,.06); display: flex; align-items: center; gap: 10px; animation: badge-float 3s ease-in-out infinite; }
@keyframes badge-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero-badge-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg,#c4161c,#e63030); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
.hero-badge-lbl { font-size: .68rem; color: #999; font-weight: 500; }
.hero-badge-val { font-size: .88rem; font-weight: 700; color: #16181B; line-height: 1.2; }
.hero-badge-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 4px; animation: dot-pulse 1.8s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (max-width: 991.98px) { .hero-urgency-badge { top: 10px; right: 6px; } }

.features__v2 .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: var(--bs-secondary);
  color: var(--bs-primary);
}

.features__v2 .content {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
}

.features__v2 .btn-play i {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background-color: var(--bs-white);
  color: var(--bs-primary);
}

.about__v4 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.about__v4 .features li .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
.about__v4 .mission-statement {
  background-color: var(--bs-primary);
  position: relative;
  bottom: -20px;
  width: 100%;
}
.about__v4 .mission-statement h3 {
  font-size: 10px;
  color: var(--bs-secondary);
}
.about__v4 .mission-statement p {
  color: var(--bs-white);
}
.about__v4 .mission-icon {
  width: 50px;
  height: 50px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
  line-height: 50px;
  display: inline-block;
  background-color: rgba(var(--bs-secondary-rgb), 0.1);
}
.about__v4 .mission-icon i {
  color: var(--bs-secondary);
}

.pricing__v2 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.pricing__v2 .price-table {
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
}
.pricing__v2 .price-table .price {
  color: var(--bs-heading-color);
}
.pricing__v2 .price-table .price strong {
  font-size: 40px;
}
.pricing__v2 .price-table .icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid rgba(var(--bs-white-rgb), 0.2);
}
.pricing__v2 .popular {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
.pricing__v2 .popular .price {
  color: var(--bs-secondary);
}
.pricing__v2 .popular h3 {
  color: var(--bs-white);
}
.pricing__v2 .popular p {
  color: var(--bs-white);
}
.pricing__v2 .popular .pricing-features h4 {
  font-size: 12px;
  color: var(--bs-secondary);
}

.stats__v3 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.howitworks__v1 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.howitworks__v1 .step-card {
  position: relative;
}
.howitworks__v1 .step-card .step-number {
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: inline-block;
  color: var(--bs-secondary);
  background-color: var(--bs-primary);
  font-size: 18px;
}
.howitworks__v1 .arch-line {
  position: absolute;
  top: 15px;
  width: 150px;
  right: 0;
  left: calc(100% + 24px);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media (max-width: 991.98px) {
  .howitworks__v1 .arch-line {
    display: none;
  }
}
.howitworks__v1 .arch-line.reverse {
  top: 20px;
}

.services__v3 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.services__v3 .icon {
  display: inline-block;
  position: relative;
  color: var(--bs-primary) !important;
}

.services__v3 .icon:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 40px;
  height: 40px;
  right: -10px;
  bottom: 0px;
  border-radius: 50%;
  background-color: rgba(var(--bs-secondary-rgb), 1);
}

.services__v3 .icon svg {
  width: 50px;
}
.services__v3 .service-card {
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
}

.faq__v2 {
  background-color: rgba(var(--inverse-color-rgb), 0.02);
}

.faq__v2 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.faq__v2 .custom-accordion {
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-btn-icon: url("");
  --bs-accordion-btn-active-icon: url("");
}

.faq__v2 .custom-accordion .accordion-button {
  position: relative;
  padding-right: 50px;
}
.faq__v2 .custom-accordion .accordion-button::after {
  content: "\f4fe";
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  right: 20px;
  top: 15px;
  width: 18px;
  height: 14px;
  font-size: 30px;
  color: var(--inverse-color);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  line-height: 1;
  position: absolute;
  -webkit-font-smoothing: antialiased;
}

.faq__v2 .custom-accordion .accordion-button:not(.collapsed)::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  content: "\f2ea";
}
.faq__v2 .custom-accordion .accordion-item {
  border: none;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}
.faq__v2 .custom-accordion .accordion-item .accordion-header .accordion-button {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 18px;
  font-weight: 500;
  color: var(--bs-heading-color);
  padding-top: 20px;
  padding-bottom: 20px;
  border: none;
}
.faq__v2 .custom-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--inverse-color);
  -webkit-box-shadow: 0 1px 1px rgba(var(--inverse-color-rgb), 0.05);
          box-shadow: 0 1px 1px rgba(var(--inverse-color-rgb), 0.05);
}
.faq__v2 .custom-accordion .accordion-item .accordion-body {
  border-top: none;
}

.stats__v3 .content {
  padding-top: 70px;
  padding-bottom: 70px;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  overflow: hidden;
  position: relative;
}
.stats__v3 .content h3 {
  color: var(--bs-secondary);
}
.stats__v3 .content .rounded-borders {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 500px;
  height: 500px;
}
.stats__v3 .content .rounded-borders .rounded-border-1,
.stats__v3 .content .rounded-borders .rounded-border-2,
.stats__v3 .content .rounded-borders .rounded-border-3 {
  border: 1px solid var(--bs-secondary);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: absolute;
}
.stats__v3 .content .rounded-borders .rounded-border-1 {
  right: 20px;
  top: 20px;
}
.stats__v3 .content .rounded-borders .rounded-border-2 {
  right: 40px;
  top: 40px;
}

.testimonials__v2 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.testimonials__v2 .testimonial {
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
}
.testimonials__v2 .testimonial-author .author-img {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
}

.contact__v2 .subtitle {
  background-color: rgba(var(--bs-secondary-rgb), 0.2);
  color: var(--bs-primary);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.contact__v2 .icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
  border-radius: 50%;
}

.footer {
  background-color: rgba(var(--inverse-color-rgb), 0.02);
  font-size: 15px;
}

.footer h2, .footer h3, .footer h4 {
  font-size: 16px;
  position: relative;
  padding-bottom: 12px;
}
/* Short red underline beneath each footer column heading (Quick Links,
   Company, Contact). */
.footer h2::after, .footer h3::after, .footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--bs-visa-primary, #c4161c);
}
.footer ul li {
  padding: 0;
  margin: 0 0 10px 0;
}
.footer a {
  color: rgba(var(--inverse-color-rgb), 1);
  text-decoration: none;
  font-weight: 500;
}
.footer a:hover {
  color: var(--inverse-color);
}
/* Quick Links / Company columns — icon + label per row */
.footer-link-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform .2s ease;
}
.footer-link-list li a i {
  font-size: .95rem;
  color: var(--bs-visa-primary, #c4161c);
  opacity: .75;
  transition: opacity .2s ease;
  flex-shrink: 0;
}
.footer-link-list a:hover {
  transform: translateX(3px);
}
.footer-link-list a:hover i {
  color: var(--bs-visa-primary, #c4161c);
  opacity: 1;
}
.footer a .badge {
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}
.footer a:hover .badge {
  background-color: rgba(var(--bs-primary-rgb), 1);
  color: var(--bs-white);
}
.footer .quick-contact i {
  color: var(--inverse-color);
}
.footer .credits {
    font-size: 1rem;
    border-top: 1px solid #dedede;
}
#back-to-top {
  position: fixed;
  bottom: 0px;
  right: 20px;
  visibility: hidden;
  opacity: 0;
  background-color: var(--bs-primary);
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
  width: 40px;
  height: 40px;
}
#back-to-top i {
  font-size: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#back-to-top.show {
  bottom: 20px;
  opacity: 1;
  visibility: visible;
}

.request-form {
    /* background-color: #fff; */
    /* padding: 1rem 2rem; */
    /* border-radius: 10px; */
    box-shadow: 0 0 16px #7d7c7c36;
    /* color: #333; */
    border: 1px solid rgba(var(--inverse-color-rgb), 0.2);
    padding: 1.5rem !important;
    border-radius: var(--bs-border-radius-xl)!important;
    text-align: center;
    /* max-width: 380px; */
    /* float: right; */
    width: 100%;
}
.request-form .title {    
    font-size: 1.6rem;
    line-height: 16px;
    font-weight: 500;
    text-align: center;
    margin: 10px 0px;
    color: #16181B;
}
.request-form p {
    font-size: 0.6rem;
    font-weight: 600;
    margin: 10px 0px 15px 0px;
    text-transform: uppercase;
    background-color: #c4161c17;
    color: #c4161c;
    padding: 5px;
    border-radius: 15px;
}

.theme-color-primary{
  color: var(--bs-visa-primary) !important;
}
.theme-color-secondary{
  color: var(--bs-visa-secondary) !important;
}

.hero__v6{
  background-color: rgba(var(--inverse-color-rgb), 0.02);
}
.howitworks__v1{
  background-color: rgba(var(--inverse-color-rgb), 0.02);
}
.services__v3{
  background-color: rgba(var(--inverse-color-rgb), 0.02);
}

.pagetitle__v1 {
    padding-top: 140px;
    padding-bottom: 2.8rem;
    background-color: rgba(var(--inverse-color-rgb), 0.05);
    position: relative;
    overflow: hidden;
}
/* Title + breadcrumb stay centered here — that's the project standard (the
   markup's own ".container.d-flex.flex-column.align-items-center" and
   ".breadcrumb.justify-content-center" utility classes already do this by
   default on every page template that uses .pagetitle__v1). A left-align
   override was tried and reverted — center is correct, keep it that way. */
.pagetitle__v1 .breadcrumb {
    font-size: .82rem;
}
.pagetitle__v1 h1 {
    font-weight: 700;
}
/* Clickable breadcrumb links: brand red + semibold + underline (the current/
   active page segment stays muted gray with no underline, unchanged below). */
.pagetitle__v1 .breadcrumb-item a {
    color: var(--bs-visa-primary, #c4161c);
    text-decoration: underline;
    font-weight: 600;
    opacity: 1;
}
.pagetitle__v1 .breadcrumb-item a:hover { opacity: .75; }
.pagetitle__v1 .breadcrumb-item.active { opacity: .55; }
.pagetitle__v1 .breadcrumb-item + .breadcrumb-item::before { opacity: .4; }
.pagetitle__v1 .breadcrumb-item i { opacity: .85; }

/* ======= Red left-border accent — section headings site-wide ======= */
/* Main section h2 headings */
.about__v4 h2.fw-bold,
.proc__section h2.fw-bold,
.eeat__section h2.fw-bold,
.howitworks__v1 h2.fw-bold { border-left: 4px solid #c4161c; padding-left: .8rem; }

/* Content sub-headings h3 */
.about__v4 h3.fw-bold,
.proc__section h3.fw-bold,
.eeat__section .info-block h3,
.eeat__section .scope-block h3 { border-left: 3px solid #c4161c; padding-left: .65rem; }

/* AEO/FAQ section sub-headings */
.aeo__section .sub-h { border-left: 3px solid #c4161c; padding-left: .6rem; }

/* Policy pages (Privacy, Cookie, T&C, Disclaimer, Refund) */
.content__v3 h3.fw-bold { border-left: 3px solid #c4161c; padding-left: .65rem; }

.sticky-top {
    z-index: 998
}

/* SweetAlert2 sets overflow:hidden on <body> while any alert (even a small
   validation warning) is open, to lock background scrolling. But per CSS spec,
   ANY ancestor with overflow != visible breaks position:sticky for descendants —
   so the sticky request-form sidebar was un-sticking and jumping/vanishing every
   time an alert appeared mid-scroll. Forcing body overflow back to visible while
   SweetAlert is shown fixes the sticky sidebar; the alert's own backdrop already
   blocks interaction with the page underneath, so this has no real downside. */
body.swal2-shown {
    overflow: visible !important;
}

.blog__v1 .blog-entry .thumbnail {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 370px;
          flex: 0 0 370px;
}
.blog__v1 .blog-entry .thumbnail a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media (max-width: 767.98px) {
  .blog__v1 .blog-entry .thumbnail {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}
.blog__v1 .blog-entry .thumbnail img {
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  width: 370px;
  height: 250px;
  -webkit-transform: scale(1);
          transform: scale(1);
}
@media (max-width: 767.98px) {
  .blog__v1 .blog-entry .thumbnail img {
    width: 100%;
  }
}
.blog__v1 .blog-entry h3 a {
  color: var(--bs-heading-color);
  text-decoration: none;
}
.blog__v1 .blog-entry .post-author {
  color: var(--bs-heading-color);
  text-decoration: none;
  font-size: 14px;
}
.blog__v1 .blog-entry .post-author img {
  width: 50px;
  height: 50px;
}
.blog__v1 .blog-entry .post-author strong {
  margin-bottom: 6px;
}
.blog__v1 .blog-entry .post-author .date {
  color: rgba(var(--inverse-color-rgb), 0.8);
}
.blog__v1 .blog-entry:hover .thumbnail img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.blog__v2 .blog-entry .thumbnail {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.blog__v2 .blog-entry .thumbnail a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
}
@media (max-width: 767.98px) {
  .blog__v2 .blog-entry .thumbnail {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}
.blog__v2 .blog-entry .thumbnail img {
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
          transform: scale(1);
}
@media (max-width: 767.98px) {
  .blog__v2 .blog-entry .thumbnail img {
    width: 100%;
  }
}
.blog__v2 .blog-entry h3 a {
  color: var(--bs-heading-color);
  text-decoration: none;
}
.blog__v2 .blog-entry .post-author {
  color: var(--bs-heading-color);
  text-decoration: none;
  font-size: 14px;
}
.blog__v2 .blog-entry .post-author img {
  width: 50px;
  height: 50px;
}
.blog__v2 .blog-entry .post-author strong {
  margin-bottom: 6px;
}
.blog__v2 .blog-entry .post-author .date {
  color: rgba(var(--inverse-color-rgb), 0.8);
}
.blog__v2 .blog-entry:hover .thumbnail > a > img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.blog__v2 .category a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(var(--inverse-color-rgb), 0.1);
  color: rgba(var(--inverse-color-rgb), 0.7);
}
.blog__v2 .category a:hover {
  -webkit-box-shadow: 0 2px 5px 0px rgba(var(--inverse-color-rgb), 0.2);
          box-shadow: 0 2px 5px 0px rgba(var(--inverse-color-rgb), 0.2);
  border: 1px solid rgba(var(--inverse-color-rgb), 0.25);
  color: rgba(var(--inverse-color-rgb), 1);
}
.blog__v2 .highlight-post {
  position: relative;
  z-index: 2;
}
.blog__v2 .highlight-post:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(var(--bs-black-rgb), 0.3);
}
.blog__v2 .highlight-post .post-content {
  z-index: 4;
  z-index: 99;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
.blog__v2 .highlight-post .post-content h3 {
  color: var(--bs-white);
}
.blog__v2 .highlight-post .post-content .post-author strong, .blog__v2 .highlight-post .post-content .post-author span {
  color: var(--bs-white);
}

.blog__v3 .blog-entry .thumbnail {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 270px;
          flex: 0 0 270px;
}
.blog__v3 .blog-entry .thumbnail a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media (max-width: 767.98px) {
  .blog__v3 .blog-entry .thumbnail {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}
.blog__v3 .blog-entry .thumbnail img {
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  width: 270px;
  height: 250px;
  -webkit-transform: scale(1);
          transform: scale(1);
}
@media (max-width: 767.98px) {
  .blog__v3 .blog-entry .thumbnail img {
    width: 100%;
  }
}
.blog__v3 .blog-entry h3 a {
  color: var(--bs-heading-color);
  text-decoration: none;
}
.blog__v3 .blog-entry .post-author {
  color: var(--bs-heading-color);
  text-decoration: none;
  font-size: 14px;
}
.blog__v3 .blog-entry .post-author img {
  width: 50px;
  height: 50px;
}
.blog__v3 .blog-entry .post-author strong {
  margin-bottom: 6px;
}
.blog__v3 .blog-entry .post-author .date {
  color: rgba(var(--inverse-color-rgb), 0.8);
}
.blog__v3 .blog-entry:hover .thumbnail img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.aside__v1 .border-top {
  border-color: rgba(var(--inverse-color-rgb), 0.1) !important;
}
.aside__v1 .post-entry {
  text-decoration: none;
}
.aside__v1 .post-entry .thumbnail {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100px;
          flex: 0 0 100px;
}
.aside__v1 .post-entry .thumbnail img {
  width: 100px;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
.aside__v1 .post-entry .date {
  color: rgba(var(--inverse-color-rgb), 0.7);
  font-size: 14px;
}
.aside__v1 .post-entry:hover .thumbnail img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.aside-subscribe-sticky {
  top: 65px;
}
.content__v1 .share {
    top: 100px !important;
}
.content__v1 .article figure figcaption {
    text-align: center;
    font-size: 12px;
    color: rgba(var(--inverse-color-rgb), 0.7);
}


.page404__v1 {
  background-size: cover;
  background-position: center center;
  height: 100vh;
  min-height: 550px;
  position: relative;
}
.page404__v1 > .container {
  position: relative;
}
.page404__v1 .astronaut {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  width: 200px;
}
@media (max-width: 767.98px) {
  .page404__v1 .astronaut {
    width: 120px;
  }
}
@media (max-width: 575.98px) {
  .page404__v1 .astronaut {
    width: 100px;
  }
}
.page404__v1 h1 {
  font-size: 18rem;
}
@media (max-width: 991.98px) {
  .page404__v1 h1 {
    font-size: 15rem;
  }
}
@media (max-width: 767.98px) {
  .page404__v1 h1 {
    font-size: 10rem;
  }
}
@media (max-width: 575.98px) {
  .page404__v1 h1 {
    font-size: 8rem;
  }
}

/* ✅ Shake animation */
@keyframes shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-15deg);
    }
    30% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(0deg);
    }
}

/* ✅ Apply shake to the icon only */
.animation i {
    animation: shake 2s infinite;
    display: inline-block;
    transform-origin: center;
}
.bg-dark {
    background-color: var(---bg-black) !important;
}
.dropdown-item.active, .dropdown-item:active a{
    text-decoration: none;
    background-color: var(--dropdown-hover-bg) !important;
    color: var(--bs-white) !important;
}
.list-style-type-none{
    list-style: none!important;
}


/* Add this to your stylesheet */

/* Modal backdrop with blur effect */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

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

/* Add blur effect to backdrop */
.modal-backdrop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.1);
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Smooth modal transitions */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
}

/* Ensure modal content stays sharp */
.modal-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Custom close button styling */
.modal-header .btn-close {
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    opacity: 0.7;
    transition: all 0.3s ease;
    position: relative;
}

.modal-header .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.modal-header .btn-close:focus {
    box-shadow: none;
    outline: none;
}

/* Make the close icon white */
.modal-header .btn-close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: white;
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-header .btn-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: white;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hide the default close icon */
.modal-header .btn-close span {
    display: none;
}

.modal-footer {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;    
}

/* Mobile Responsive Fixes */
@media (max-width: 991.98px) {
    /* Location pages - stack sidebar on mobile */
    .location-agent .col-lg-8,
    .location-agent .col-lg-4 {
        width: 100%;
        max-width: 100%;
    }
    
    /* Dropdown menu full width on mobile */
    .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /* Location content sections */
    .location-intro,
    .about-location,
    .why-choose-us,
    .services-offered,
    .areas-covered,
    .process-section,
    .documents-section {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* CTA section mobile */
    .cta-section {
        padding: 20px 15px !important;
    }
    
    .cta-section h3 {
        font-size: 20px !important;
    }
    
    .cta-section a {
        font-size: 22px !important;
    }
    
    /* Sticky sidebar remove on mobile */
    .request-form.sticky-top {
        position: relative !important;
        top: 0 !important;
    }
}

/* Mobile Responsive Fixes */
@media (max-width: 991.98px) {
    /* Location pages - stack sidebar on mobile */
    .location-agent .col-lg-8,
    .location-agent .col-lg-4 {
        width: 100%;
        max-width: 100%;
    }
    
    /* Dropdown menu full width on mobile */
    .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /* Location content sections */
    .location-intro,
    .about-location,
    .why-choose-us,
    .services-offered,
    .areas-covered,
    .process-section,
    .documents-section {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* CTA section mobile */
    .cta-section {
        padding: 20px 15px !important;
    }
    
    .cta-section h3 {
        font-size: 20px !important;
    }
    
    .cta-section a {
        font-size: 22px !important;
    }
    
    /* Sticky sidebar remove on mobile */
    .request-form.sticky-top {
        position: relative !important;
        top: 0 !important;
    }
}

.thankyou__v1 {
  background-size: cover;
  background-position: center center;
  height: 100vh;
  min-height: 550px;
  position: relative;
}

/* Submit button active state override - must be at end to override Bootstrap */
button[type="submit"]:active,
#submitBtn:active,
button.btn-primary[type="submit"]:active,
.btn.btn-primary[type="submit"]:active,
form button[type="submit"].btn-primary:active,
form[data-ajax="true"] button[type="submit"].btn-primary:active,
#inquiryForm button[type="submit"].btn-primary:active {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  background: #000000 !important;
}

/* ============================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Keywords Section - Mobile Responsive */
@media (max-width: 767.98px) {
  .keywords-section {
    padding: 15px !important;
    margin: 15px 0 !important;
  }
  
  .keywords-section h4 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }
  
  .keywords-container p {
    font-size: 11px !important;
    line-height: 1.6 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (max-width: 575.98px) {
  .keywords-section {
    padding: 12px !important;
  }
  
  .keywords-section h4 {
    font-size: 14px !important;
  }
  
  .keywords-container p {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

/* Header Buttons - Mobile Responsive */
@media (max-width: 767.98px) {
  .header-social .btn {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .header-social .btn i {
    font-size: 14px;
  }
}

/* Contact Form - Mobile Responsive */
@media (max-width: 991.98px) {
  .request-form.sticky-top,
  .col-lg-4 .request-form.sticky-top {
    position: relative !important;
    top: auto !important;
  }
  
  .about__v4 .col-lg-8,
  .about__v4 .col-lg-4 {
    margin-bottom: 30px;
  }
}

/* Images - Ensure Responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent Horizontal Scroll */
@media (max-width: 575.98px) {
  body {
    overflow-x: hidden;
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ============================================================
   NAV DROPDOWN — hover
   ============================================================ */
/* Same bold hover treatment as the country mega menu (solid primary
   background + white text, see .mega-menu-grid a:hover) instead of the
   previous faint tint — one consistent hover style across both menus.
   Needs the full ".fbs__net-navbar .navbar-nav" prefix chain (not just
   ".dropdown-menu .dropdown-item:hover") to outrank the sitewide
   ".fbs__net-navbar.dark ul li a:hover { color: ... !important }" rule
   (~line 905) — that one has more class+element selectors, so a shorter
   selector here silently lost the text-color fight and hover text stayed
   the dark theme color instead of turning white. Same fix already applied
   to #countryMegaMenuPanel's hover rule via an ID anchor instead. */
.fbs__net-navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.fbs__net-navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.fbs__net-navbar .navbar-nav .dropdown-menu .dropdown-item.active,
.fbs__net-navbar .navbar-nav .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-visa-primary, #c4161c) !important;
    color: #fff !important;
    /* Force a flush rectangle, not a rounded pill with gaps either side —
       Bootstrap's own .dropdown-item border-radius variable, or the older
       ".dropdown-item.active" rule elsewhere in this file (~line 1955, a
       leftover gray #f7f7f7 style meant for a different context) could
       otherwise still round/shrink this specific state even after the
       color above is corrected. */
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
/* Text + "→" pairing shared by the Our Services dropdown items and the
   country mega-menu grid — arrow sits right after the text (not stretched
   to the far edge of the row) and brightens on hover. */
.nav-arrow {
    display: inline-block;
    margin-left: 4px;
    opacity: .55;
    transition: opacity .15s, transform .15s;
}
.dropdown-item:hover .nav-arrow,
.dropdown-item:focus .nav-arrow,
.mega-menu-grid a:hover .nav-arrow,
.mega-menu-grid a.active .nav-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Category labels vary in length (e.g. "Guest Speakers, Artists & Film Crew"
   vs "Schengen Tourist Visa") — a fixed 300px squeezed the longer ones onto
   a second line, wrapping awkwardly around the trailing "→" instead of
   keeping it snug against the text. Auto-width lets the dropdown grow to
   fit its longest single-line item instead (min-width keeps short menus
   from looking cramped, max-width still caps it on narrow viewports). */
@media (min-width: 992px) {
    .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu {
        width: auto;
        min-width: 300px;
        max-width: 92vw;
    }
}
.fbs__net-navbar .navbar-nav .dropdown-menu .dropdown-item {
    white-space: nowrap;
    line-height: 1.3;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(var(--inverse-color-rgb), 0.06);
}
/* No trailing line right before the next divider/heading, or on the very
   last item in a menu — those already have their own visual break. */
.fbs__net-navbar .navbar-nav .dropdown-menu .dropdown-item:last-child,
.fbs__net-navbar .navbar-nav .dropdown-menu li:last-child .dropdown-item,
.fbs__net-navbar .navbar-nav .dropdown-menu li:has(+ .dropdown-divider) .dropdown-item {
    border-bottom: none;
}
.fbs__net-navbar .navbar-nav .dropdown-menu .dropdown-item.d-flex {
    align-items: center;
}

/* ============================================================
   UK VISITOR VISA GUIDE SECTION
   ============================================================ */

/* Subtitle */
.guide__section .subtitle {
    background-color: rgba(var(--bs-secondary-rgb), 0.2);
    color: var(--bs-primary);
    display: inline-block;
    padding: 5px 14px;
    border-radius: 7px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

/* Image frame */
.guide__section .guide-img-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    background: #f8f9fa;
}
.guide__section .guide-img-link {
    display: block;
    position: relative;
    text-decoration: none;
}
.guide__section .guide-img-link img {
    width: 100%;
    height: auto;
    display: block;
}
.guide__section .guide-img-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background .2s;
}
.guide__section .guide-img-link:hover .guide-img-zoom { background: rgba(0,0,0,.35); }
.guide__section .guide-img-zoom-btn {
    color: #fff;
    background: var(--bs-visa-primary, #c4161c);
    border: 0;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: .82rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.guide__section .guide-img-link:hover .guide-img-zoom-btn {
    opacity: 1;
    transform: translateY(0);
}
.guide__section .guide-img-caption {
    padding: 10px 16px;
    background: var(--bs-visa-primary, #c4161c);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
}
.guide__section .guide-img-caption span { opacity: .75; font-weight: 400; }

/* Info cards */
.guide__section .guide-info-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: box-shadow .2s;
}
.guide__section .guide-info-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); }
.guide__section .guide-info-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.guide__section .guide-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .86rem;
}
.guide__section .guide-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding-bottom: 8px;
    line-height: 1.5;
}
.guide__section .guide-check-list li:last-child { padding-bottom: 0; }
.guide__section .guide-check-icon { color: var(--bs-primary); flex-shrink: 0; margin-top: 2px; }
.guide__section .guide-error-icon { color: #e65100; flex-shrink: 0; margin-top: 2px; }
.guide__section .guide-text { font-size: .86rem; color: var(--bs-body-color); line-height: 1.65; }

/* Site-wide primary button */
.btn-visa-primary {
    background: var(--bs-visa-primary, #c4161c);
    color: #fff;
    border: 0;
}
.btn-visa-primary:hover, .btn-visa-primary:focus { background: #a81218; color: #fff; }

/* ============================================================
   EEAT TRUST SECTION
   ============================================================ */
.eeat__section .subtitle {
    background-color: rgba(var(--bs-secondary-rgb),.2);
    color: var(--bs-primary);
    display: inline-block;
    padding: 5px 14px;
    border-radius: 7px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.eeat__section .eeat-card {
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    padding: 20px;
    height: 100%;
    transition: box-shadow .2s;
}
.eeat__section .eeat-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.eeat__section .eeat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 12px;
}
.eeat__section .eeat-card h3 { font-size: .9rem; font-weight: 700; color: var(--bs-heading-color); margin-bottom: 6px; }
.eeat__section .eeat-card p { font-size: .82rem; color: var(--bs-body-color); margin: 0; line-height: 1.65; }
.eeat__section .info-block {
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 12px;
    padding: 20px 24px;
    height: 100%;
}
.eeat__section .info-block h3 { font-size: .9rem; font-weight: 700; color: var(--bs-heading-color); margin-bottom: 12px; }
.eeat__section .scope-block {
    border-left: 3px solid var(--bs-primary);
    background: rgba(var(--bs-primary-rgb),.04);
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    height: 100%;
}
.eeat__section .scope-block h3 { font-size: .9rem; font-weight: 700; color: var(--bs-heading-color); margin-bottom: 12px; }
.eeat__section .step-item {
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    height: 100%;
}
.eeat__section .step-num { font-size: 1.3rem; font-weight: 800; color: var(--bs-primary); line-height: 1; flex-shrink: 0; min-width: 28px; }
.eeat__section .step-item h4 { font-size: .88rem; font-weight: 700; color: var(--bs-heading-color); margin-bottom: 4px; }
.eeat__section .step-item p { font-size: .8rem; color: var(--bs-body-color); margin: 0; line-height: 1.6; }

/* ============================================================
   PROCESSING TIERS SECTION
   ============================================================ */
.proc__section .subtitle {
    background-color: rgba(var(--bs-secondary-rgb),.2);
    color: var(--bs-primary);
    display: inline-block;
    padding: 5px 14px;
    border-radius: 7px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.proc__section .variant-card {
    border: 1px solid rgba(0,0,0,.07);
    border-top: 3px solid var(--bs-primary);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: box-shadow .2s;
}
.proc__section .variant-card:hover { box-shadow: 0 6px 24px rgba(196,22,28,.1); }
.proc__section .variant-card-active {
    border-color: var(--bs-visa-primary, #c4161c);
    border-top-width: 3px;
    box-shadow: 0 6px 24px rgba(196,22,28,.15);
}
.proc__section .tier-card {
    border: 1px solid rgba(0,0,0,.07);
    border-left: 4px solid var(--bs-primary);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: box-shadow .2s;
    height: 100%;
}
.proc__section .tier-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.proc__section .tier-card.tier-urgent   { border-left-color: #e65100; }
.proc__section .tier-card.tier-super    { border-left-color: var(--bs-primary); }
.proc__section .tier-card.tier-express  { border-left-color: var(--bs-visa-secondary, #003a66); }
.proc__section .tier-card.tier-emergency{ border-left-color: #b71c1c; }
.proc__section .tier-card.tier-weekend  { border-left-color: #1565c0; }
.proc__section .tier-badge { font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.proc__section .tier-time { font-size: .8rem; font-weight: 700; color: var(--bs-heading-color); }
.proc__section .cmp-table th { background: var(--bs-primary); color: #fff; font-weight: 600; font-size: .82rem; padding: 10px 14px; border: none; }
.proc__section .cmp-table td { font-size: .82rem; padding: 9px 14px; color: var(--bs-body-color); border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: middle; }
.proc__section .cmp-table tr:last-child td { border-bottom: none; }
.proc__section .cmp-table tbody tr:hover td { background: rgba(196,22,28,.03); }
.proc__section .cmp-table td:first-child { font-weight: 600; color: var(--bs-heading-color); }
.proc__section .compare-toggle-btns .btn-compare {
    background: transparent;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 7px;
    padding: 6px 18px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: all .2s;
}
.proc__section .compare-toggle-btns .btn-compare.active,
.proc__section .compare-toggle-btns .btn-compare:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* ============================================================
   DELHI NCR LOCATIONS SECTION
   ============================================================ */
.delhi-ncr-locations__v1 .subtitle {
    background-color: rgba(var(--bs-secondary-rgb),0.2);
    color: var(--bs-primary);
    display: inline-block;
    padding: 5px 12px;
    border-radius: 7px;
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 10px;
}
.locations-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; line-height: normal; font-size: initial; text-align: left; }
.locations-list::after { display: none; }
.location-item { display: inline-flex; padding: 0; }
.location-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 20px;
    transition: all .2s;
    white-space: nowrap;
}
.location-link::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bs-primary); opacity: .5; flex-shrink: 0; }
.location-link:hover { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(196,22,28,.04); }
.location-link:hover::before { opacity: 1; }
#showMoreLocations { color: #c4161c !important; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; }
#showMoreLocations:hover, #showMoreLocations:focus, #showMoreLocations:active { color: #c4161c !important; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; }
#showMoreLocations span, #showMoreLocations i { color: #c4161c !important; }
#showMoreLocations:hover span, #showMoreLocations:hover i,
#showMoreLocations:focus span, #showMoreLocations:focus i,
#showMoreLocations:active span, #showMoreLocations:active i { color: #c4161c !important; }

/* ============================================================
   SCHENGEN COUNTRIES SECTION
   ============================================================ */
.schengen-countries__v1 .subtitle {
    background-color: rgba(var(--bs-secondary-rgb),0.2);
    color: var(--bs-primary);
    display: inline-block;
    padding: 5px 12px;
    border-radius: 7px;
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 10px;
}

/* ============================================================
   COUNTRY PAGE TABS (Overview / Visa Type / Documents / Photo /
   Process / Common Concerns) — city-panel/city-panel.php +
   city-panel/country-panel.php
   ============================================================ */
/* This component sits in a "row mt-4" wrapper, but that alone wasn't a
   reliable enough gap above the tabs on every page type (e.g. a bare
   category page, where a short teaser paragraph sits directly above it) —
   an explicit margin here guarantees the breathing room regardless of what
   precedes it in the DOM. */
.country-tabs-wrap {
    margin-top: 1.5rem;
}
.country-tabs-wrap .country-tabs {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.country-tabs-wrap .country-tabs .nav-link {
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: .85rem;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 10px 16px;
}
.country-tabs-wrap .country-tabs .nav-link:hover {
    color: var(--bs-primary);
}
.country-tabs-wrap .country-tabs .nav-link.active {
    color: #fff;
    background: var(--bs-visa-primary, #c4161c);
    border-color: var(--bs-visa-primary, #c4161c) var(--bs-visa-primary, #c4161c) transparent;
    border-radius: 8px 8px 0 0;
}
.country-tabs-wrap .country-tab-content {
    background: #fff;
    border-color: rgba(0,0,0,.1) !important;
}

/* ============================================================
   BLOG POST — SHARE PREVIEW CARD + SHARE BUTTONS
   ============================================================ */
.vv-share-wrap {
    border: 1px solid #ececef;
    border-radius: 16px;
    padding: 18px;
    background: #fafafb;
}
.vv-share-preview {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid #e7e7ea;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 16px;
}
.vv-share-preview img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.vv-share-preview-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.vv-share-preview-domain { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9a9da3; font-weight: 600; }
.vv-share-preview-title { font-size: 15px; font-weight: 700; color: #16181B; margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-share-preview-desc { font-size: 12.5px; color: #6c6f75; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-share-label { font-size: 15px; font-weight: 700; color: #16181B; margin-right: 6px; }
.vv-share-bar { flex-wrap: wrap; }
.vv-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.vv-share-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.vv-share-whatsapp { background: #25D366; }
.vv-share-facebook { background: #1877F2; }
.vv-share-linkedin { background: #0A66C2; }
.vv-share-twitter  { background: #000000; }
.vv-share-instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    padding: 0;
}
.vv-share-toast {
    display: none;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #16181B;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}
.vv-share-toast.show { display: block; animation: vvFadeIn .2s ease; }
@keyframes vvFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575.98px) {
    .vv-share-preview img { width: 72px; height: 72px; }
}

/* ============================================================
   BLOG POST — "USEFUL LINKS" CARD
   ============================================================ */
.vv-useful-links {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.vv-article-body .vv-useful-links-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 18px;
    padding-left: 0;
    padding-bottom: 14px;
    border-left: none;
    border-bottom: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: center;
}
.vv-useful-links-title .bi {
    color: var(--bs-visa-primary, #c4161c);
    margin-right: 8px;
    font-size: 1.2rem;
}
.vv-useful-links-heading {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a8a8a;
    margin-bottom: 10px;
}
.vv-useful-links-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vv-useful-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--bs-body-color);
    transition: background .15s ease, transform .15s ease;
}
.vv-useful-link-row:hover {
    background: rgba(196,22,28,.06);
    transform: translateX(3px);
    color: var(--bs-visa-primary, #c4161c);
}
.vv-useful-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(196,22,28,.08);
    color: var(--bs-visa-primary, #c4161c);
    font-size: .85rem;
    flex-shrink: 0;
}
.vv-useful-link-text {
    font-size: .9rem;
    font-weight: 500;
    flex: 1;
}
.vv-useful-link-arrow {
    font-size: .75rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}
.vv-useful-link-row:hover .vv-useful-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================================
   AEO FAQ SECTION
   ============================================================ */
.aeo__section .subtitle-pill {
    background-color: rgba(var(--bs-secondary-rgb),.2);
    color: var(--bs-primary);
    display: inline-block;
    padding: 5px 14px;
    border-radius: 7px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.aeo__section .featured-answer { border-left: 4px solid var(--bs-primary); background: rgba(var(--bs-primary-rgb),.03); padding: 16px 20px; border-radius: 0 8px 8px 0; }
.aeo__section .tier-featured { border-left: 4px solid var(--bs-visa-secondary, #003a66); background: rgba(0,58,102,.03); padding: 16px 20px; border-radius: 0 8px 8px 0; }
.aeo__section .accordion-item { border: 1px solid rgba(0,0,0,.07) !important; border-radius: 8px !important; overflow: hidden; }
.aeo__section .accordion-button { font-size: .88rem; font-weight: 600; color: var(--bs-heading-color); background: #fff; }
.aeo__section .accordion-button:not(.collapsed) { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.04); box-shadow: none; }
.aeo__section .accordion-button::after { filter: none; }
.aeo__section .accordion-body { font-size: .88rem; color: var(--bs-body-color); line-height: 1.7; }
.aeo__section .entity-def { border-left: 3px solid var(--bs-primary); padding: 10px 12px; background: #f8f9fa; border-radius: 0 6px 6px 0; height: 100%; }
.aeo__section .entity-def .term { font-size: .8rem; font-weight: 700; color: var(--bs-primary); margin-bottom: 4px; }
.aeo__section .entity-def .def { font-size: .78rem; color: var(--bs-body-color); margin: 0; }
.aeo__section .sub-h { font-size: .95rem; font-weight: 700; color: var(--bs-heading-color); margin-bottom: 12px; }

/* ============================================================
   CITY SERVICE CONTENT UTILITIES — category.php new sections
   ============================================================ */
.svc-tag-pill {
    background: rgba(196,22,28,.08);
    color: var(--bs-visa-primary);
    border: 1px solid rgba(196,22,28,.18);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.svc-advice-block {
    border-left: 3px solid var(--bs-visa-primary);
    background: rgba(196,22,28,.04);
    border-radius: 0 6px 6px 0;
}
.svc-tip-callout {
    background: #fffbf0;
    border: 1px solid #ffe58f;
}
.svc-issue-callout {
    background: #fff8f8;
    border: 1px solid #ffc9cc;
}
.svc-label { font-size: .85rem; font-weight: 600; color: var(--bs-heading-color); }
.svc-body  { font-size: .82rem; line-height: 1.65; }
.svc-xs    { font-size: .78rem; }
.btn.svc-xs { padding: .15rem .45rem; line-height: 1.4; }
.svc-badge-sm { font-size: .77rem; font-weight: 500; }

/* ======= Blog Listing Card ======= */
.vv-blog-card { transition: box-shadow .22s, transform .22s; }
.vv-blog-card:hover { box-shadow: 0 10px 36px rgba(0,0,0,.13) !important; transform: translateY(-4px); }
.vv-blog-img { height: 200px; overflow: hidden; position: relative; }
.vv-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s ease; display: block; }
.vv-blog-card:hover .vv-blog-img img { transform: scale(1.07); }
.vv-blog-overlay { position: absolute; inset: 0; pointer-events: none; }
.vv-blog-num { position: absolute; top: 12px; right: 12px; background: #c4161c; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; z-index: 2; letter-spacing: .5px; }
.vv-blog-title { color: var(--bs-heading-color); text-decoration: none; }
.vv-blog-title:hover { color: #c4161c; }
.vv-blog-desc { font-size: .82rem; color: #6c757d; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ======= Blog Search ======= */
.blog-search-form { position: relative; }
.blog-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 50px;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
    padding: 6px 6px 6px 20px;
    gap: 10px;
}
.blog-search-box .bi-search { color: #9aa0a8; font-size: .95rem; flex-shrink: 0; }
.blog-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: .92rem;
    min-width: 0;
    color: var(--bs-heading-color);
}
.blog-search-clear {
    color: #9aa0a8;
    font-size: .8rem;
    flex-shrink: 0;
    text-decoration: none;
    padding: 4px;
}
.blog-search-clear:hover { color: #c4161c; }
.blog-search-submit {
    background: #c4161c;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 22px;
    font-size: .85rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background-color .15s;
}
.blog-search-submit:hover { background: #a01217; }

/* Live-suggest dropdown, shown while typing (see blogs.php's inline script) */
.blog-suggest-list {
    display: none;
    list-style: none;
    margin: 8px 0 0;
    padding: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 380px;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
    border: 1px solid rgba(0,0,0,.06);
}
.blog-suggest-list.is-open { display: block; }
.blog-suggest-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--bs-heading-color);
    transition: background-color .12s;
}
.blog-suggest-list li[role="option"]:hover .blog-suggest-row,
.blog-suggest-list li[role="option"].is-highlighted .blog-suggest-row {
    background: rgba(196,22,28,.07);
}
.blog-suggest-row img {
    width: 52px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.blog-suggest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blog-suggest-title {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.blog-suggest-date { font-size: .74rem; color: #9aa0a8; }
.blog-suggest-empty {
    padding: 16px 10px;
    text-align: center;
    color: #9aa0a8;
    font-size: .85rem;
    font-style: italic;
}

/* ======= Blog Pagination ======= */
.blog-pagination .page-link {
    border: none;
    background: #fff;
    color: var(--bs-heading-color);
    margin: 0 4px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    padding: 8px 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.blog-pagination .page-item.active .page-link {
    background: #c4161c;
    color: #fff;
}
.blog-pagination .page-item.disabled .page-link {
    color: #c5c9d0;
    box-shadow: none;
    background: transparent;
}
.blog-pagination .page-link:hover:not(.active) { background: rgba(196,22,28,.08); }

/* ======= Blog Sidebar ======= */
.vv-sb-wrap { top: 100px; max-height: 84vh; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: #c4161c #f1f1f1; }
.vv-sb-wrap::-webkit-scrollbar { width: 5px; }
.vv-sb-wrap::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.vv-sb-wrap::-webkit-scrollbar-thumb { background: #c4161c; border-radius: 10px; }
.vv-sb-head { padding: 16px 18px 12px; border-bottom: 1px solid #e9ecef; background: #fff; position: sticky; top: 0; z-index: 5; flex-shrink: 0; }
.vv-sb-body { overflow-y: auto; flex: 1; padding: 12px 14px 16px; }
.vv-sb-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 8px; margin-bottom: 4px; transition: background .16s; text-decoration: none; }
.vv-sb-item:hover { background: #fff5f5; }
.vv-sb-item.active { background: #fff0f0; }
.vv-sb-num { min-width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #e9ecef; color: #666; margin-top: 3px; }
.vv-sb-item.active .vv-sb-num { background: #c4161c; color: #fff; }
.vv-sb-thumb { width: 48px; height: 36px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.vv-sb-label { font-size: 12.5px; line-height: 1.4; color: #444; }
.vv-sb-item:hover .vv-sb-label, .vv-sb-item.active .vv-sb-label { color: #c4161c; font-weight: 600; }

/* ======= Article Body Typography ======= */
.vv-article-body h3 { font-size: 1.08rem; font-weight: 700; color: #16181B; margin-top: 2rem; margin-bottom: .55rem; padding-left: .65rem; border-left: 3px solid #c4161c; }
.vv-article-body p { font-size: .9375rem; line-height: 1.82; color: #3a3a3a; }
.vv-article-body ul, .vv-article-body ol { font-size: .9375rem; line-height: 1.75; color: #3a3a3a; padding-left: 1.4rem; }
.vv-article-body li { margin-bottom: .45rem; }
.vv-article-body a { color: #c4161c; text-decoration: none; }
.vv-article-body a:hover { color: #a01217; text-decoration: underline; }
.vv-article-body .table th { font-size: .82rem; font-weight: 600; }
.vv-article-body .table td { font-size: .84rem; }

/* Blog content table */
.blog-cmp-table th { background: var(--bs-primary); color: #fff; font-weight: 600; font-size: .82rem; padding: 10px 14px; border: none; }
.blog-cmp-table td { font-size: .82rem; padding: 9px 14px; color: var(--bs-body-color); border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: middle; }
.blog-cmp-table tr:last-child td { border-bottom: none; }
.blog-cmp-table tbody tr:hover td { background: rgba(196,22,28,.03); }
.blog-cmp-table td:first-child { font-weight: 600; color: var(--bs-heading-color); }

/* ============================================================
   "APPLY BY COUNTRY" MEGA MENU (navbar)
   ============================================================
   Replaces the old flat 29-item flyout submenu: a flyout-per-item list is
   slow to scan for a 29-country set, so this is a searchable grid instead
   (same pattern proven on a sister project's 50+-country mega menu, adapted
   down to a single grid since every Schengen country is one "group" —
   no region tabs needed here).

   IMPORTANT: this theme has a sitewide base rule —
   .fbs__net-navbar .navbar-nav .dropdown > .dropdown-menu { width: 300px; }
   (~line 2344) — that is MORE specific than a plain ".mega-menu-wrap
   .mega-menu" selector, so it silently wins and clamps the panel to 300px
   unless overridden with an equal-or-higher-specificity selector. Every
   sizing rule below repeats that same ".fbs__net-navbar .navbar-nav" prefix
   + !important specifically to guarantee it wins that fight.
   ============================================================ */
@media (min-width: 992px) {
    .fbs__net-navbar .navbar-nav .dropdown.mega-menu-wrap > .dropdown-menu.mega-menu {
        width: 640px !important;
        min-width: 640px !important;
        max-width: 92vw !important;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16);
    }
    /* This dropdown has its own dedicated open/close script (appHeader.php,
       #countryMegaMenuToggle) instead of the sitewide hover-JS/Bootstrap
       Dropdown, specifically so it can stay open while the search box has
       focus. The sitewide ".dropdown:hover > .dropdown-menu { display:
       block }" rule (~line 686) would undo that: pure CSS :hover reverts
       display the instant the pointer leaves, with no delay and no
       awareness of focus, so it would re-close the panel mid-search the
       same way the original bug did. Override it so ONLY the .show class
       that script controls decides visibility here. */
    .fbs__net-navbar .navbar-nav .dropdown.mega-menu-wrap:hover > .dropdown-menu {
        display: none;
    }
    .fbs__net-navbar .navbar-nav .dropdown.mega-menu-wrap > .dropdown-menu.show {
        display: block !important;
    }
}
@media (max-width: 991.98px) {
    .fbs__net-navbar .navbar-nav .dropdown.mega-menu-wrap > .dropdown-menu.mega-menu {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.015);
    }
}

.mega-menu-search-wrap {
    padding: 14px 16px 0;
}
.mega-search-box {
    position: relative;
}
.mega-search-box .bi-search {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: var(--bs-body-color);
    opacity: .5;
    pointer-events: none;
}
.fbs__net-navbar.dark .mega-menu-search {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid rgba(var(--inverse-color-rgb), 0.15);
    border-radius: 8px;
    font-size: .85rem;
    background: rgba(var(--inverse-color-rgb), 0.03);
    color: var(--bs-body-color) !important;
}
.mega-menu-search:focus {
    outline: none;
    border-color: var(--bs-visa-primary, #c4161c);
    background: #fff;
    box-shadow: none;
}

.mega-menu-panel {
    padding: 14px 18px 6px;
    /* Fixed height, not max-height — this dropdown opens on hover (see
       custom.js addHoverEvents, tracked via mouseover/mouseleave on the
       parent <li>), and the search box below filters the grid live. A
       shrink-to-fit max-height meant the panel's rendered box got shorter
       as fewer countries matched, so a stationary cursor mid-search could
       end up outside the new, smaller box — the browser correctly read
       that as the pointer leaving the element and fired mouseleave,
       closing the menu while typing. A constant height keeps the hoverable
       area's footprint the same no matter how many results match (fewer
       results just leave blank space below them, scrolling still works via
       overflow-y for the rare case of more results than fit). */
    height: 340px;
    overflow-y: auto;
}
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px 14px;
}
@media (max-width: 575.98px) {
    .mega-menu-grid { grid-template-columns: repeat(2, 1fr); }
}
.mega-menu-grid a {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .15s, color .15s;
}
/* .fbs__net-navbar.dark forces `ul li a` text color with !important, and a
   class-chain selector doesn't reliably beat it. #countryMegaMenuPanel is an
   ID already on this exact element (see appHeader.php) — ID selectors
   outrank ANY number of chained classes in CSS specificity, so anchoring to
   it here is what guarantees these win no matter what else targets `a`
   elsewhere in this stylesheet. */
#countryMegaMenuPanel .mega-menu-grid a {
    color: var(--bs-body-color) !important;
}
#countryMegaMenuPanel .mega-menu-grid a:hover,
#countryMegaMenuPanel .mega-menu-grid a.active {
    background: var(--bs-visa-primary, #c4161c) !important;
    color: #fff !important;
}
#countryMegaMenuPanel .mega-menu-grid a[data-hidden="1"] { display: none; }
/* Matches reflow to the top as you type (display:none, not visibility:
   hidden — the earlier attempt kept every item pinned to its original
   alphabetical slot so an already-typed match like "Sweden" just sat wherever
   S falls in a 29-country grid instead of surfacing near the top). Reflowing
   under a stationary cursor mid-keystroke can flicker :hover on whatever item
   lands there, so hover/click are suspended on the whole grid for a moment
   after each keystroke instead (JS adds this class, removes it ~150ms after
   the last one) — nothing is "hoverable" while the layout is still settling,
   so there's nothing for the browser to flicker. */
#countryMegaMenuPanel .mega-menu-grid.is-filtering a {
    pointer-events: none;
}

.mega-menu-no-results {
    display: none;
    padding: 24px 8px;
    text-align: center;
    color: var(--bs-body-color);
    opacity: .55;
    font-size: .85rem;
}

.mega-menu-footer {
    border-top: 1px solid rgba(var(--inverse-color-rgb), 0.1);
    padding: 12px 18px;
    background: rgba(var(--inverse-color-rgb), 0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.mega-menu-footer .mega-menu-count {
    font-size: .76rem;
    color: var(--bs-body-color);
    opacity: .55;
}
#countryMegaMenuPanel .mega-menu-footer a {
    font-weight: 700;
    font-size: .84rem;
    color: var(--bs-visa-primary, #c4161c) !important;
    text-decoration: none;
}
.mega-menu-footer a:hover { text-decoration: underline; }

/* ============================================================
   SEARCHABLE "SERVICE" COMBOBOX (contact forms)
   ============================================================
   Replaces a plain <select> for "Select Service" with a type-to-filter text
   input + dropdown list — easier to scan/search than a native select with
   17 options. The real <select name="contact-service"> stays in the DOM
   (visually hidden) so form submission and the existing city/service URL
   auto-fill script keep working unchanged.
   ============================================================ */
.service-combobox {
  position: relative;
}
.service-combobox-control {
  position: relative;
}
.service-combobox-control .bi-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  color: rgba(var(--inverse-color-rgb), 0.45);
  pointer-events: none;
}
.service-combobox-input {
  padding-left: 34px !important;
  padding-right: 34px !important;
  text-align: left !important;
  cursor: text;
}
/* #inquiryForm .form-control (an ID selector) outranks a plain-class
   .service-combobox-input rule no matter what order they're declared in —
   CSS specificity always prefers an ID over any number of classes — so it
   was silently winning and collapsing the padding back down, pushing the
   input text on top of/under the search icon. Repeat the same ID/class
   prefixes here so this rule actually wins that fight. */
#inquiryForm .service-combobox-input,
.contact_input_area .service-combobox-input,
.request-form .service-combobox-input {
  padding-left: 34px !important;
  padding-right: 34px !important;
}
.service-combobox-control .service-combobox-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  color: rgba(var(--inverse-color-rgb), 0.45);
  pointer-events: none;
  transition: transform .2s ease;
}
.service-combobox-input[aria-expanded="true"] ~ .service-combobox-caret {
  transform: translateY(-50%) rotate(180deg);
}
.service-combobox-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  /* position:fixed (not absolute) + JS-computed top/left/width — an
     absolutely-positioned dropdown still counts towards its scrolling
     ancestor's scrollHeight even though it's out of normal flow, which
     inside a Bootstrap modal (itself scrollable) produces a second,
     redundant scrollbar right next to the dropdown's own one. Fixed
     positioning removes it from that calculation entirely. */
  position: fixed;
  z-index: 1090;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(var(--inverse-color-rgb), 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  display: none;
}
.service-combobox-list.is-open {
  display: block;
}
.service-combobox-list li {
  padding: 8px 10px;
  font-size: .85rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
  display: flex;
  align-items: center;
}
.service-combobox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  margin-right: 8px;
  flex-shrink: 0;
  color: var(--bs-visa-primary, #c4161c);
}
.service-combobox-list li[data-value]:hover .service-combobox-icon,
.service-combobox-list li[data-value].is-highlighted .service-combobox-icon {
  color: #fff;
}
.service-combobox-list li[data-value]:hover,
.service-combobox-list li[data-value].is-highlighted {
  background-color: var(--bs-primary);
  color: #fff;
}
.service-combobox-list li.service-combobox-empty {
  color: rgba(var(--inverse-color-rgb), 0.5);
  cursor: default;
  text-align: center;
  font-style: italic;
}
.service-combobox-list li.service-combobox-empty:hover {
  background: none;
}