@import "../css/fonts.css";
/* FontAwesome @import removed (PERF) — it is loaded async via preload-swap in every page head; this @import made it render-blocking on every page. */

/* Disable text selection and copy across the site */
*, *::before, *::after {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
img {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  pointer-events: auto;
  max-width: 100%;
  height: auto;
}

*:focus {
  outline: none;
}

/* ITS A MUST IN CUSTOM.CSS */

/* ESG SPINNER SHOULD BE REMOVED */

@media (min-width: 992px) {
  .navbar-nav .nav-item:hover > .nav-link {
    color: #ffffff;
  }
  .navbar-nav .nav-item:hover > .dropdown-menu {
    display: block;
  }
}
.dropdown-item:hover {
  background-color: #335596;
  color: #ffffff;
}

/* ITS A MUST IN CUSTOM.CSS */

button:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.form-control:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Stabilize layout across page navigations: always reserve the vertical
   scrollbar gutter so the sticky header never shifts horizontally when a
   short page loads before a long one. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  /* overflow: hidden; */
  padding: 0 !important;
  margin: 0 !important;
  background: white;
  font-family: "Poppins";
  font-weight: normal;
  overflow-x: clip;
  background-image: url(../img/bg.png);
  background-repeat: no-repeat;
  background-position: top 25% center;
  /*&:before{
    content: "";
      background-image: url(../img/ship1.png);
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      left: -109px;
      bottom: -61px;
      display: block;
      height: 50%;
      width: 45%;
      background-size: contain;
  }

  &:after{
    content: "";
      background-image: url(../img/ship2.png);
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      right: -109px;
      bottom: -36px;
      display: block;
      height: 50%;
      width: 45%;
      background-size: contain;
  }*/
}

header {
  /*padding: 10px 0;*/
  border-bottom: 1px solid #d6d6d6;
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: #fff;
  /* Do NOT use transform/contain here — they create a containing block and
     clip descendants, which hides the VS Solutions / Resources / Language
     mega dropdowns that extend outside the header box. The scrollbar-gutter
     fix on <html> is what actually stops the page-load shake. */
}

/* Prevent the header bar itself from running entry animations (wow.js etc.)
   — this kills the 'shake' on navigation without disabling the animations
   that descendants like the language switcher, VS Solutions mega, and
   Resources mega rely on to become visible. */
header.navbar-container,
header > .container-fluid,
header > .container-fluid > .navbar,
header .navbar-brand {
  animation: none !important;
  transform: none;
}
header.wow,
header > .container-fluid.wow,
header > .container-fluid > .navbar.wow {
  visibility: visible !important;
  animation: none !important;
}

header .navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
header .navbar .navbar-brand {
  margin-right: 20px;
  width: 200px;
  flex-shrink: 0;
}
/* Desktop only: flex layout for navbar collapse and nav items */
@media (min-width: 992px) {
  header .navbar .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header .navbar ul.navbar-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1;
    margin: 0 auto !important;
  }
}
/* Mobile: let Bootstrap collapse handle show/hide */
@media (max-width: 991px) {
  header .navbar .navbar-collapse {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  header .navbar .navbar-collapse.show,
  header .navbar .navbar-collapse.collapsing {
    display: block !important;
  }
  header .navbar ul.navbar-nav {
    flex-direction: column;
    width: 100%;
    margin: 0 !important;
  }
  header .navbar ul.navbar-nav li.nav-item {
    width: 100%;
  }
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
}

@media (max-width: 575px) {
  header .navbar .navbar-brand {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .loginSec .w-75 {
    width: 95% !important;
  }
}

header .navbar .navbar-brand img {
  max-width: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  header .navbar .form-inline {
    margin-top: 10px;
  }
}

header .navbar .form-inline .btn {
  border-radius: 20px;
  background: #74c5b5;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  padding: 10px 14px;
}

header .navbar .form-inline span {
  font-size: 12px;
}

header .navbar .form-inline a {
  font-weight: bold;
  color: #335596;
  font-size: 12px;
}

header .navbar ul.navbar-nav li.nav-item a.nav-link {
  color: #335596;
  /*text-transform: capitalize;*/
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  border-bottom: 2px solid white;
  padding: 10px;
  font-size: 14px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

@media (max-width: 991px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    padding: 10px 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    padding: 10px 12px;
  }
}

header .navbar ul.navbar-nav li.nav-item.active a.nav-link {
  border-bottom: 2px solid #74c5b5;
  color: #74c5b5;
}

header .navbar ul.navbar-nav li.nav-item:hover a.nav-link {
  border-bottom: 2px solid #335596;
  color: #335596;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

header .navbar-toggler-icon {
  background-image: url(../img/navbaricon.svg) !important;
}

header .navbar-toggler {
  padding: 0 !important;
}

header ul.dropdown-menu {
  padding: 10px;
}

header ul.dropdown-menu a {
  display: block;
  color: #335596;
  margin-bottom: 5px;
}

header ul.dropdown-menu a:hover {
  text-decoration: none;
  color: #74c5b5;
}

.middlepart {
  /*padding: 30px 0 0 0;*/
}

.middlepart #particles-js {
  z-index: 1;
}

.middlepart .container {
  position: relative;
}

.middlepart .container #display_box,
.middlepart .container #display_box1 {
  display: none;
  min-height: 85px;
  width: 300px;
  border: 2px dotted #335596;
  position: absolute;
  top: 50px;
  left: auto;
  right: 0;
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  padding: 10px;
  z-index: 11;
}

@media (min-width: 992px) and (max-width: 1199px) {

  .middlepart .container #display_box,
  .middlepart .container #display_box1 {
    width: 225px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  .middlepart .container #display_box,
  .middlepart .container #display_box1 {
    margin-bottom: 5%;
    bottom: -20px;
    top: auto;
  }
}

/* Mobile: constrain display_box to viewport */
@media (max-width: 767px) {
  .middlepart .container #display_box,
  .middlepart .container #display_box1 {
    position: relative !important;
    width: 90% !important;
    max-width: 90vw !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 10px auto !important;
  }
}

.middlepart .container #display_box .links,
.middlepart .container #display_box1 .links {
  width: 50%;
  display: inline-block;
  position: relative;
  font-size: 14px;
  height: 30px;
  vertical-align: bottom;
}

.middlepart .container #display_box .links.r_auto,
.middlepart .container #display_box1 .links.r_auto {
  right: auto;
}

.middlepart .container #display_box .btn,
.middlepart .container #display_box1 .btn {
  background: #74c5b5;
  color: #fff;
  text-transform: capitalize;
}

.middlepart .container #display_box .btn:hover,
.middlepart .container #display_box1 .btn:hover {
  background: #335596;
}

.middlepart .container #display_box label,
.middlepart .container #display_box1 label {
  color: #335596;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  display: block;
}

.middlepart .container #display_box label.input,
.middlepart .container #display_box1 label.input {
  color: #74c5b5;
}

.middlepart .container #display_box1 {
  justify-content: center;
  align-items: center;
  display: flex;
  left: 0;
  right: auto;
}

.middlepart .h75 {
  min-height: 80vh;
  height: auto;
  overflow: visible;
}

@media (min-width: 1200px) and (max-width: 1280px) {
  .middlepart .h75 {
    height: 90vh;
  }
}

@media (min-width: 900px) and (max-width: 998px) {
  .middlepart .h75 {
    height: 52vh !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .middlepart .h75 {
    margin-top: 50px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .middlepart .h75 {
    height: 100vh;
  }
}

@media (max-width: 767px) {
  .middlepart .h75 {
    height: 63vh;
    margin-top: 130px;
  }
}

@media only screen and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: portrait) {
  .middlepart .h75 {
    height: 40vh !important;
  }
}

.middlepart #main_circle {
  height: 440px;
  width: 440px;
  margin-top: 54px;
  border: 1px solid #74c5b5;
  border-radius: 50%;
  /*transform: rotate(0deg);*/
  /* transition: transform 3s linear !important;*/
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 5;
}

.middlepart #main_circle #child-1,
.middlepart #main_circle #child-2,
.middlepart #main_circle #child-3,
.middlepart #main_circle #child-4,
.middlepart #main_circle #child-5,
.middlepart #main_circle #child-6,
.middlepart #main_circle #child-7,
.middlepart #main_circle #child-8,
.middlepart #main_circle #child-9 {
  position: absolute;
  width: 85px;
  height: 85px;
  /* transform: rotate(0deg); */
  transition: transform 0.7s linear;
  top: -20px;
  left: 176px;
  line-height: 1;
  /*left: 0px;
  right: 0;
  margin: 0 auto;*/
}

.middlepart #main_circle #child-1 img,
.middlepart #main_circle #child-2 img,
.middlepart #main_circle #child-3 img,
.middlepart #main_circle #child-4 img,
.middlepart #main_circle #child-5 img,
.middlepart #main_circle #child-6 img,
.middlepart #main_circle #child-7 img,
.middlepart #main_circle #child-8 img,
.middlepart #main_circle #child-9 img {
  max-width: 100%;
  width: 30px;
  height: 30px;
}

.middlepart #main_circle #child-1 span,
.middlepart #main_circle #child-2 span,
.middlepart #main_circle #child-3 span,
.middlepart #main_circle #child-4 span,
.middlepart #main_circle #child-5 span,
.middlepart #main_circle #child-6 span,
.middlepart #main_circle #child-7 span,
.middlepart #main_circle #child-8 span,
.middlepart #main_circle #child-9 span {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

.middlepart #main_circle #child-1 .short_des,
.middlepart #main_circle #child-2 .short_des,
.middlepart #main_circle #child-3 .short_des,
.middlepart #main_circle #child-4 .short_des,
.middlepart #main_circle #child-5 .short_des,
.middlepart #main_circle #child-6 .short_des,
.middlepart #main_circle #child-7 .short_des,
.middlepart #main_circle #child-8 .short_des,
.middlepart #main_circle #child-9 .short_des {
  display: none;
  font-size: 11px;
  margin-top: 15px;
  font-weight: bold;
  -webkit-animation: fade-in 3.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 3.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.middlepart #main_circle #child-1 .short_des label.input,
.middlepart #main_circle #child-2 .short_des label.input,
.middlepart #main_circle #child-3 .short_des label.input,
.middlepart #main_circle #child-4 .short_des label.input,
.middlepart #main_circle #child-5 .short_des label.input,
.middlepart #main_circle #child-6 .short_des label.input,
.middlepart #main_circle #child-7 .short_des label.input,
.middlepart #main_circle #child-8 .short_des label.input,
.middlepart #main_circle #child-9 .short_des label.input {
  color: #335596;
}

.middlepart #main_circle #child-1 .short_des label.output,
.middlepart #main_circle #child-2 .short_des label.output,
.middlepart #main_circle #child-3 .short_des label.output,
.middlepart #main_circle #child-4 .short_des label.output,
.middlepart #main_circle #child-5 .short_des label.output,
.middlepart #main_circle #child-6 .short_des label.output,
.middlepart #main_circle #child-7 .short_des label.output,
.middlepart #main_circle #child-8 .short_des label.output,
.middlepart #main_circle #child-9 .short_des label.output {
  color: #74c5b5;
}

.middlepart #main_circle #child-2 {
  top: 21px;
  left: auto;
  right: 44px;
  transform: rotate(45deg);
}

.middlepart #main_circle #child-3 {
  top: 182px;
  left: auto;
  right: -20px;
  transform: rotate(80deg);
}

.middlepart #main_circle #child-4 {
  top: auto;
  left: auto;
  right: -1px;
  bottom: 80px;
  transform: rotate(116deg);
}

.middlepart #main_circle #child-5 {
  top: auto;
  left: auto;
  right: 90px;
  bottom: -9px;
  transform: rotate(152deg);
}

.middlepart #main_circle #child-6 {
  top: auto;
  left: 102px;
  right: auto;
  bottom: -15px;
  transform: rotate(202deg);
}

.middlepart #main_circle #child-7 {
  top: auto;
  left: 0px;
  right: auto;
  bottom: 68px;
  transform: rotate(241deg);
}

.middlepart #main_circle #child-8 {
  top: 145px;
  left: -24px;
  right: auto;
  bottom: auto;
  transform: rotate(280deg);
}

.middlepart #main_circle #child-9 {
  top: 26px;
  left: 43px;
  right: auto;
  bottom: auto;
  transform: rotate(315deg);
}

/* ESG RADIAL MENU : BEGIN */

/* ESG RADIAL MENU : END */

.middlepart #main_circle .circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid #74c5b5;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px;
  flex-direction: column;
  margin: 0 auto;
  cursor: pointer;
}

.middlepart #main_circle .circle:hover {
  border: 1px solid #335596;
  background-color: #e0f9f4;
}

.middlepart .block_details {
  display: none;
}

.middlepart #inner_circle {
  height: 275px;
  width: 275px;
  background-image: url(../img/inner-circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 132px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -2;
}
/* Abdullah's */
.middlepart #inner_rotator {
  height: 275px;
  width: 275px;
  background-image: url(../img/esg_iconpack/inner-rotator.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 132px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -2;
}

.middlepart #center_circle {
  height: 130px;
  width: 130px;
  background-image: url(../img/center-circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translate(0px, 187px);
}

.middlepart #esg {
  height: 250px;
  width: 250px;
  background-image: url(../img/esg_iconpack/esg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translate(0px, 145px);
  border-radius: 100%;
  z-index: 1;
}

.middlepart #esgtest {
  height: 250px;
  width: 250px;
  background-image: url(../img/esg_iconpack/esgtest.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translate(0px, 145px);
  border-radius: 100%;
  z-index: 1;
}

.middlepart #center_circle:before {
  content: "";
  height: 140px;
  width: 140px;
  background-image: url(../img/dotted-center.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: -5px;
  left: -5px;
  right: 0;
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  -webkit-animation: flower 30s infinite linear;
  animation: flower 30s infinite linear;
}

.middlepart #center_circle:after {
  content: "";
  position: absolute;
  box-shadow: 0px 0px 50px #335596;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: hvr-ripple-out 2s infinite;
  animation: hvr-ripple-out 2s infinite;
  border-radius: 100%;
}

.middlepart #hover_effect {
  height: 211px;
  width: 131px;
  background-image: url(../img/hover-effect2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 3px;
  left: -12px;
  right: 0;
  margin: 0 auto;
  transform: rotate(4deg);
  z-index: -1;
}

.middlepart #hover_effect:before {
  content: "";
  background-image: url(../img/dotted-hover.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 194px;
  width: 126px;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 7px;
  position: absolute;
  -webkit-animation: blink-1 5s 3s infinite alternate both;
  animation: blink-1 5s 3s infinite alternate both;
}
/* Abdullah's edit */
.middlepart #dotted_effect {
  content: "";
  background-image: url(../img/dotted_line.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 194px;
  width: 126px;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 7px;
  position: absolute;
  -webkit-animation: blink-1 5s 3s infinite alternate both;
  animation: blink-1 5s 3s infinite alternate both;
}

.middlepart #hover_effect #mydot {
  position: relative;
  height: 7px;
  width: 7px;
  display: block;
  z-index: 1;
  background: #74c5b5;
  left: 0;
  right: 0;
  display: block;
  top: 4px;
  margin: 0 auto;
  border-radius: 50%;
}

.middlepart #hover_effect #mydot2 {
  position: absolute;
  height: 7px;
  width: 7px;
  display: block;
  z-index: 1;
  background: #335596;
  left: 0;
  right: -20px;
  display: block;
  bottom: 12px;
  margin: 0 auto;
  border-radius: 50%;
}

.links {
  text-transform: uppercase;
  color: #74c5b5;
  position: relative;
  top: 0px;
  right: 10px;
  left: auto;
}

.links:hover {
  color: #335596;
  text-decoration: none;
}

@media (max-width: 991px) {
  .links {
    right: 0px;
  }
}

.calender_sec>.container {
  position: relative;
  -webkit-box-shadow: 0px 2px 13px 2px rgba(43, 43, 43, 0.5);
  -moz-box-shadow: 0px 2px 13px 2px rgba(43, 43, 43, 0.5);
  box-shadow: 0px 2px 13px 2px rgba(43, 43, 43, 0.5);
  overflow: hidden;
  background-color: transparent;
}

.calender_sec>.container.h80 {
  height: 90vh;
}

.calender_sec>.container .v-dialog__content {
  display: flex !important;
  align-items: center;
  height: 100%;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 1ms;
  width: 100%;
  z-index: 202;
  outline: none;
}

.calender_sec>.container .v-dialog {
  box-shadow: none;
  margin-top: 65px;
  width: 80%;
}

.calender_sec>.container .v-overlay {
  display: none;
}

.common>.container {
  position: relative;
}

@media (min-width: 992px) {
  .common>.container {
    min-height: 550px;
  }
}

.common>.container img {
  max-width: 100%;
}

.common>.container #particles-js {
  z-index: -1;
}

.common>.container h3 {
  color: #74c5b5;
  text-transform: capitalize;
  display: block;
  font-weight: bold;
}

.common>.container .style1 {
  font-size: 14px;
}

.common>.container .terms-conditions,
.common>.container-fluid .terms-conditions {
  text-align: left;
  margin-top: 30px;
  display: block;
  width: 100%;
  font-size: 14px;
}

.common>.container .terms-conditions .card:hover .card-header,
.common>.container-fluid .terms-conditions .card:hover .card-header {
  background: #74c5b5;
}

.common>.container .terms-conditions .card:hover .btn.btn-link,
.common>.container-fluid .terms-conditions .card:hover .btn.btn-link {
  color: #fff;
}

.common>.container .terms-conditions h1 {
  font-size: 24px;
  color: #335596;
  font-weight: 600;
}

.common>.container .terms-conditions h2 {
  font-size: 17px;
  color: #335596;
  font-weight: 600;
  letter-spacing: 1px;
}

.common>.container .terms-conditions h5 {
  color: #393636;
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: 15px;
  font-weight: bold;
}

.common>.container .terms-conditions p {
  color: #393636;
  font-size: 14px;
}

.common>.container .terms-conditions a {
  color: #74c5b5;
}

.common>.container .terms-conditions a:hover {
  color: #335596;
}

.common>.container .terms-conditions .btn-link,
.common>.container-fluid .terms-conditions .btn-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  text-align: left !important;
  color: #335596 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.5 !important;
  padding: 2px 0 !important;
  text-decoration: none !important;
}

.common>.container .terms-conditions .btn-link:hover,
.common>.container-fluid .terms-conditions .btn-link:hover {
  text-decoration: none !important;
}

.common>.container .terms-conditions .btn-link i,
.common>.container-fluid .terms-conditions .btn-link i {
  flex-shrink: 0 !important;
  font-size: 16px !important;
  margin-left: 12px !important;
  float: none !important;
  transition: transform 0.3s ease;
}

.common>.container .terms-conditions .btn-link:not(.collapsed) i,
.common>.container-fluid .terms-conditions .btn-link:not(.collapsed) i {
  transform: rotate(180deg);
}

/* ===== Enhanced FAQ Accordion Styles ===== */
.terms-conditions .accordion .card,
.common .terms-conditions .accordion .card {
  border: none !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 3px 14px rgba(51, 85, 150, 0.07) !important;
  overflow: visible !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.terms-conditions .accordion .card:hover {
  box-shadow: 0 6px 24px rgba(51, 85, 150, 0.13) !important;
  transform: translateY(-2px);
}
.terms-conditions .accordion .card-header,
.common .terms-conditions .accordion .card-header {
  background: #fff !important;
  border-bottom: 1px solid #eef2f7 !important;
  padding: 18px 24px !important;
  border-radius: 12px 12px 0 0 !important;
  transition: background 0.25s ease;
}
.terms-conditions .accordion .card:hover .card-header {
  background: linear-gradient(135deg, #335596, #74c5b5) !important;
}
.terms-conditions .accordion .card:hover .card-header .btn-link,
.terms-conditions .accordion .card:hover .card-header .btn.btn-link {
  color: #fff !important;
}
/* Force all FAQ btn-link to flex, no clipping */
.terms-conditions .accordion .btn-link,
.terms-conditions .accordion .btn.btn-link,
.common .terms-conditions .btn-link,
.common .terms-conditions .btn.btn-link,
.common>.container-fluid .terms-conditions .btn-link,
.common>.container .terms-conditions .btn-link {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #335596 !important;
  padding: 2px 0 !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.5 !important;
  max-height: none !important;
  height: auto !important;
  letter-spacing: 0 !important;
}
/* Icon: flex-shrink, never float */
.terms-conditions .accordion .btn-link i,
.terms-conditions .accordion .btn.btn-link i,
.common .terms-conditions .btn-link i,
.common .terms-conditions .btn.btn-link i,
.common>.container-fluid .terms-conditions .btn-link i,
.common>.container .terms-conditions .btn-link i {
  flex-shrink: 0 !important;
  float: none !important;
  font-size: 16px !important;
  margin-left: 14px !important;
  margin-top: 3px;
  transition: transform 0.3s ease;
}
.terms-conditions .accordion .btn-link:not(.collapsed) i,
.common .terms-conditions .btn-link:not(.collapsed) i {
  transform: rotate(180deg);
}
.terms-conditions .accordion .card-body,
.common .terms-conditions .accordion .card-body {
  padding: 20px 24px !important;
  font-size: 14px;
  line-height: 1.8;
  color: #444;
  background: #fafbfd;
  border-radius: 0 0 12px 12px;
  overflow: visible !important;
}
.terms-conditions .accordion .card-body p {
  margin-bottom: 14px;
}
.terms-conditions .accordion .card-body ol,
.terms-conditions .accordion .card-body ul {
  padding-left: 24px;
  margin-bottom: 14px;
}
.terms-conditions .accordion .card-body h5 {
  color: #335596;
  font-size: 15px;
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 10px;
}
.terms-conditions .accordion .card-body img {
  border-radius: 8px;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .terms-conditions .accordion .card-header,
  .common .terms-conditions .accordion .card-header { padding: 14px 16px !important; }
  .terms-conditions .accordion .btn-link,
  .common .terms-conditions .btn-link,
  .common>.container-fluid .terms-conditions .btn-link { font-size: 14px !important; }
  .terms-conditions .accordion .card-body,
  .common .terms-conditions .accordion .card-body { padding: 16px !important; font-size: 13px; }
}
@media (max-width: 480px) {
  .terms-conditions .accordion .card-header,
  .common .terms-conditions .accordion .card-header { padding: 12px 12px !important; }
  .terms-conditions .accordion .btn-link,
  .common .terms-conditions .btn-link,
  .common>.container-fluid .terms-conditions .btn-link { font-size: 13px !important; line-height: 1.4 !important; }
  .terms-conditions .accordion .card-body,
  .common .terms-conditions .accordion .card-body { padding: 12px !important; font-size: 12.5px; line-height: 1.7; }
}

.change-password {
  margin-bottom: 10%;
}

.change-password .passinst {
  font-size: 11px;
}

.change-password .codealert {
  font-size: 12px;
}

.change-password .box-h {
  max-height: 385px;
  min-height: 350px;
  padding: 20px;
  height: 100%;
  align-items: center;
}

.change-password .form-control {
  font-size: 14px;
}

.pswd-part {
  display: none;
  width: 100%;
}

.change-password-part {
  display: none;
  width: 100%;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 9px;
  position: relative;
  z-index: 2;
}

.change-password .box-h .bodysec {
  padding: 24px;
  margin-top: 15%;
  text-align: center;
}

.change-password .box-h.title_sec {
  display: flex;
  margin-top: 0;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.change-password .box-h.title_sec .bodysec {
  margin-top: 0;
}

.change-password .box-h .loginform .btn {
  background-color: #74c5b5;
  border: none;
}

.change-password .box-h .loginform .btn:hover {
  background-color: #335596;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

.loginSec {
  margin-bottom: 10% !important;
}

.loginSec .box-h {
  /* max-height: 350px; */
  min-height: 350px;
  padding: 20px;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
}

.loginSec .box-h .bodysec {
  padding: 24px;
  /* margin-top: 15%; */
  text-align: center;
}

.loginSec .box-h .bodysec.change-password-part{
  padding: 0;
}

.loginSec .box-h .bodysec h2 {
  color: #335596;
}

@media (min-width: 768px) {
  .loginSec .box-h .bodysec h2 {
    font-size: 4rem;
  }

  .change-password .box-h .bodysec h2 {
    font-size: 4rem;
  }
}

.loginSec .box-h .bodysec a {
  color: #335596;
  margin-top: 10px;
  display: inline-block;
}

.loginSec .box-h .loginform .btn, .changePasswordform .btn {
  background-color: #74c5b5;
  border: none;
}

.loginSec .box-h .loginform .btn:hover , .changePasswordform .btn:hover{
  background-color: #335596;
}

.loginSec h3 {
  text-transform: capitalize;
  border-bottom: 1px solid #74c5b5;
  width: 50%;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.loginSec p {
  display: block;
  width: 100%;
  color: #000;
  font-size: 14px;
}

.loginSec.common>.container {
  min-height: 365px;
}

.loginSec.common h3 {
  border-bottom: none;
  text-align: center;
}

.loginSec.common .btn {
  background-color: #74c5b5;
  border: none;
  color: #fff;
  font-weight: bold;
}

.loginSec.common .btn:hover {
  background-color: #335596;
}

.loginSec *::placeholder {
  font-size: 14px;
}

.loginSec .form-control {
  font-size: 14px;
}

.loginSec .form-control:focus {
  border: 1px solid #ced1d4;
}

.blink-1 {
  -webkit-animation: blink-1 2.5s infinite alternate both;
  animation: blink-1 2.5s infinite alternate both;
}

@-webkit-keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.zeroposition1 {
  transform: rotate(0deg);
  animation: spin 1s linear !important;
}

.zeroposition2 {
  transform: rotate(-41deg);
  animation: spin2 1s linear !important;
}

.zeroposition2 #child-2 {
  transform: rotate(41deg) !important;
}

.zeroposition3 {
  transform: rotate(-78deg);
  animation: spin3 1s linear !important;
}

.zeroposition4 {
  transform: rotate(-119deg);
  animation: spin4 1s linear !important;
}

.zeroposition4 #child-4 {
  transform: rotate(119deg) !important;
}

.zeroposition5 {
  transform: rotate(-155deg);
  animation: spin5 1s linear !important;
}

.zeroposition5 #child-5 {
  transform: rotate(155deg) !important;
}

.zeroposition6 {
  transform: rotate(158deg);
  animation: spin6 1s linear !important;
}

.zeroposition6 #child-6 {
  transform: rotate(203deg) !important;
}

.zeroposition7 {
  transform: rotate(121deg);
  animation: spin7 1s linear !important;
}

.zeroposition7 #child-7 {
  transform: rotate(238deg);
}

.zeroposition8 {
  transform: rotate(80deg);
  animation: spin8 1s linear !important;
}

.zeroposition9 {
  transform: rotate(41deg);
  animation: spin9 1s linear !important;
}

.zeroposition9 #child-9 {
  transform: rotate(319deg) !important;
}

@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(45deg);
  }

  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-41deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-41deg);
  }
}

@-webkit-keyframes spin3 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-78deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-78deg);
  }
}

@-webkit-keyframes spin4 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-119deg);
  }
}

@keyframes spin4 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-119deg);
  }
}

@-webkit-keyframes spin5 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-155deg);
  }
}

@keyframes spin5 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-155deg);
  }
}

@-webkit-keyframes spin6 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(158deg);
  }
}

@keyframes spin6 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(158deg);
  }
}

@-webkit-keyframes spin7 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(121deg);
  }
}

@keyframes spin7 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(121deg);
  }
}

@-webkit-keyframes spin8 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(80deg);
  }
}

@keyframes spin8 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(80deg);
  }
}

@-webkit-keyframes spin9 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(41deg);
  }
}

@keyframes spin9 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(41deg);
  }
}

.circle-rotation {
  -webkit-animation: circle-rotation 30s infinite linear;
  animation: circle-rotation 30s infinite linear;
}

@-webkit-keyframes circle-rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-359deg);
  }
}

@keyframes circle-rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-359deg);
  }
}

.flower {
  -webkit-animation: flower 63s infinite linear;
  animation: flower 63s infinite linear;
}

@-webkit-keyframes flower {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

@keyframes flower {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.pulse {
  -webkit-animation: pulse 1s cubic-bezier(0.39, 0.575, 0.565, 1) 1s infinite alternate-reverse both;
  animation: pulse 1s cubic-bezier(0.39, 0.575, 0.565, 1) 1s infinite alternate-reverse both;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.aboutus_sec {
  z-index: 11;
  position: relative;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.aboutus_sec label {
  display: block;
  text-transform: capitalize;
  font-size: 16px;
  color: #000;
  font-weight: 600;
  margin: 2rem 0;
}

.aboutus_sec p {
  font-size: 14px;
}

.aboutus_sec h5 {
  font-size: 18px;
  color: #74c5b5;
  font-weight: bold;
  margin-bottom: 5px;
}

.aboutus_sec #cont {
  font-size: 14px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.aboutus_sec #bt {
  border: none;
  background-color: transparent;
  color: #74c5b5;
  font-size: 14px;
  font-weight: bold;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#tsparticles,
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#tsparticles canvas,
#particles-js canvas {
  background-color: transparent !important;
  pointer-events: none;
}

.fade-in {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

footer {
  position: static;  /* was sticky — sticky footer wasted viewport on mobile and clashed with chatbot launcher */
  width: 100%;
  z-index: 50;
  background: #fff;
  padding: 14px 0 18px;
  border-top: 1px solid #e3e8f0;
  background-image: linear-gradient(180deg, #fafcff 0%, #ffffff 60%);
}

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

footer ul li {
  display: inline-block;
  color: black;
  font-size: 12px;
  font-weight: normal;
}

footer ul li:after {
  content: "|";
  color: black;
  font-size: 12px;
  margin: 0 5px;
}

footer ul li:last-child:after {
  display: none;
}

footer ul li a {
  color: black;
  font-size: 12px;
  text-transform: capitalize;
}

footer ul li a:hover {
  color: #74c5b5;
}

/* =====================================================================
   Follow-Us social icons — themed (#335596 / #74c5b5), animated, responsive
   ===================================================================== */
footer ul.social {
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

footer ul.social li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

footer ul.social li:after { display: none; }

footer ul.social li:first-child {
  font-size: 13px;
  color: #335596;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-right: 8px;
  align-self: center;
}

/* Base icon chip */
footer ul.social li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 16px;
  text-decoration: none;
  color: #335596;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(51,85,150,0.12), inset 0 0 0 1px rgba(51,85,150,0.08);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.35s ease,
              background 0.35s ease,
              color 0.35s ease;
  overflow: hidden;
  isolation: isolate;
  animation: vs-social-float 6s ease-in-out infinite;
}

/* Icon sits above ripple */
footer ul.social li a > i { position: relative; z-index: 2; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }

/* Ripple pseudo-element that expands on hover */
footer ul.social li a::before {
  content: "";
  position: absolute;
  inset: 50% 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  z-index: 1;
  transition: width 0.45s cubic-bezier(.2,.8,.2,1),
              height 0.45s cubic-bezier(.2,.8,.2,1),
              inset 0.45s cubic-bezier(.2,.8,.2,1),
              opacity 0.35s ease;
}

/* Brand-tinted idle halo, staggered so icons don't pulse in unison */
footer ul.social li:nth-child(2) a { animation-delay: 0s; }
footer ul.social li:nth-child(3) a { animation-delay: .4s; }
footer ul.social li:nth-child(4) a { animation-delay: .8s; }
footer ul.social li:nth-child(5) a { animation-delay: 1.2s; }
footer ul.social li:nth-child(6) a { animation-delay: 1.6s; }
footer ul.social li:nth-child(7) a { animation-delay: 2s; }
footer ul.social li:nth-child(8) a { animation-delay: 2.4s; }

/* Brand idle colors */
footer ul.social li a.in { color: #0077B5; }
footer ul.social li a.fb { color: #1877F2; }
footer ul.social li a.ig { color: #E1306C; }
footer ul.social li a.tw { color: #111111; }

/* X (Twitter) — replace legacy bird glyph with X mark via SVG mask, no FA6 upgrade needed */
footer ul.social li a.tw i.fa-twitter,
footer ul.social li a.tw i.fab.fa-twitter {
  position: relative;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>") no-repeat center / 62% auto;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>") no-repeat center / 62% auto;
}
footer ul.social li a.tw i.fa-twitter::before,
footer ul.social li a.tw i.fab.fa-twitter::before { content: ""; display: none; }
footer ul.social li a.yt { color: #FF0000; }
footer ul.social li a.wa { color: #25D366; font-size: 18px; }
footer ul.social li a.ph { color: #335596; }

/* Instagram chip sits on gradient background even at rest (subtle) */
footer ul.social li a.ig {
  background: linear-gradient(135deg, #ffffff 0%, #fff6fb 100%);
}

/* WhatsApp "Recommended" badge */
footer ul.social li a.wa::after {
  content: 'Recommended';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  background: #25D366;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(37,211,102,0.35);
}

/* Hover — lift, glow, spin icon, ripple fill */
footer ul.social li a:hover,
footer ul.social li a:focus-visible {
  transform: translateY(-5px) scale(1.08);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(51,85,150,0.25), 0 0 0 2px rgba(116,197,181,0.35);
  outline: none;
  animation-play-state: paused;
}

footer ul.social li a:hover > i,
footer ul.social li a:focus-visible > i {
  transform: rotate(-12deg) scale(1.12);
}

footer ul.social li a:hover::before,
footer ul.social li a:focus-visible::before {
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: 1;
}

footer ul.social li a.in:hover,  footer ul.social li a.in:focus-visible  { color: #fff; box-shadow: 0 10px 18px rgba(0,119,181,0.35), 0 0 0 2px rgba(116,197,181,0.35); }
footer ul.social li a.fb:hover,  footer ul.social li a.fb:focus-visible  { color: #fff; box-shadow: 0 10px 18px rgba(24,119,242,0.35), 0 0 0 2px rgba(116,197,181,0.35); }
footer ul.social li a.tw:hover,  footer ul.social li a.tw:focus-visible  { color: #fff; box-shadow: 0 10px 18px rgba(0,0,0,0.35), 0 0 0 2px rgba(116,197,181,0.35); }
footer ul.social li a.yt:hover,  footer ul.social li a.yt:focus-visible  { color: #fff; box-shadow: 0 10px 18px rgba(255,0,0,0.35), 0 0 0 2px rgba(116,197,181,0.35); }
footer ul.social li a.wa:hover,  footer ul.social li a.wa:focus-visible  { color: #fff; box-shadow: 0 10px 18px rgba(37,211,102,0.4), 0 0 0 2px rgba(116,197,181,0.35); }
footer ul.social li a.ph:hover,  footer ul.social li a.ph:focus-visible  { color: #fff; box-shadow: 0 10px 18px rgba(51,85,150,0.4), 0 0 0 2px rgba(116,197,181,0.35); }

/* Instagram needs the signature multi-color gradient on hover */
footer ul.social li a.ig:hover,
footer ul.social li a.ig:focus-visible {
  color: #fff;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 10px 18px rgba(220,39,67,0.35), 0 0 0 2px rgba(116,197,181,0.35);
}
footer ul.social li a.ig:hover::before,
footer ul.social li a.ig:focus-visible::before { opacity: 0; }

/* Keyframes */
@keyframes vs-social-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Responsive */
@media (max-width: 768px) {
  footer ul.social {
    justify-content: center;
    gap: 8px;
  }
  footer ul.social li:first-child {
    flex-basis: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: 4px;
  }
}

@media (max-width: 480px) {
  footer ul.social li a { width: 34px; height: 34px; font-size: 14px; }
  footer ul.social li a.wa { font-size: 16px; }
  footer ul.social li a.wa::after { font-size: 6px; padding: 1px 4px; top: -12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  footer ul.social li a,
  footer ul.social li a > i,
  footer ul.social li a::before { animation: none !important; transition: color 0.2s ease, background 0.2s ease; }
  footer ul.social li a:hover,
  footer ul.social li a:focus-visible { transform: none; }
  footer ul.social li a:hover > i { transform: none; }
}

/* Footer Quick Stats */
.vs-footer-stats {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vs-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}

.vs-stat i {
  font-size: 18px;
  color: #74c5b5;
  flex-shrink: 0;
}

.vs-stat strong {
  display: block;
  font-size: 12px;
  color: #335596;
  line-height: 1.3;
}

.vs-stat span {
  display: block;
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .vs-footer-stats {
    justify-content: center;
    margin-top: 12px;
  }
  .vs-stat {
    font-size: 11px;
  }
  footer ul.social {
    text-align: center;
  }
  footer ul.social li a.wa::after {
    font-size: 7px;
    top: -16px;
  }
}

/* ============================================================
   VS SOLUTIONS MEGA DROPDOWN MENU
   3 items per row, animated, icons + labels
   ============================================================ */

/* Mega dropdown container */
/* ============================================================
   VS SOLUTIONS MEGA DROPDOWN - DESKTOP PRESENTATION
   Icon centered on top, title below, 3 columns
   ============================================================ */

/* ===== VS Solutions Dropdown (mirrors Resources dropdown pattern) ===== */

/* Dropdown container — left-aligned to stay within viewport */
.vs-solutions-mega {
  min-width: 520px !important;
  max-width: min(580px, 95vw) !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #e0e8f0 !important;
  box-shadow: 0 15px 50px rgba(51, 85, 150, 0.18) !important;
  background: #fff !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1050 !important;
}

/* Narrow-desktop safety: shrink grid when header has less room */
@media (min-width: 992px) and (max-width: 1199px) {
  .vs-solutions-mega {
    min-width: 440px !important;
    max-width: 480px !important;
  }
  .vs-solutions-grid .vs-solution-item {
    flex: 0 0 calc(33.33% - 10px) !important;
    max-width: calc(33.33% - 10px) !important;
  }
}

/* Grid: 4 columns */
.vs-solutions-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
}
.vs-solutions-grid .vs-solution-item {
  flex: 0 0 calc(25% - 10px) !important;
  max-width: calc(25% - 10px) !important;
}

/* Shared item card style (used by both VS Solutions & Resources grids) */
.vs-solution-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #335596 !important;
  background: #f5f8fc !important;
  border: 1px solid #e8eef5 !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.vs-solution-item i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: #74c5b5 !important;
  margin: 0 auto 8px !important;
  width: 46px !important;
  height: 46px !important;
  line-height: 1 !important;
  text-align: center !important;
  background: rgba(116, 197, 181, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}
.vs-solution-item span {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #335596 !important;
  font-family: 'Poppins', sans-serif !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}
.vs-solution-item:hover {
  background: #fff !important;
  border-color: #74c5b5 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(116, 197, 181, 0.25) !important;
}
.vs-solution-item:hover i {
  color: #fff !important;
  background: linear-gradient(135deg, #335596, #74c5b5) !important;
  transform: scale(1.08) !important;
}
.vs-solution-item:hover span {
  color: #74c5b5 !important;
}

/* Trigger button */
.vs-solutions-dropdown > a.nav-link {
  /* font-weight inherited from base nav-link rule */
}

/* Explore All button at bottom of dropdowns */
.vs-explore-all-btn {
  display: block !important;
  text-align: center !important;
  margin: 12px 0 4px !important;
  padding: 9px 16px !important;
  background: linear-gradient(135deg, #335596, #74c5b5) !important;
  color: #fff !important;
  border-radius: 25px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  letter-spacing: 0.3px;
}
.vs-explore-all-btn:hover {
  background: linear-gradient(135deg, #74c5b5, #335596) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(51, 85, 150, 0.3) !important;
  text-decoration: none !important;
}

/* Show on hover - desktop only (touch devices use click via Bootstrap) */
@media (min-width: 992px) {
  .vs-solutions-dropdown:hover > .vs-solutions-mega {
    display: block !important;
  }
}

/* ===== Tablet (max-width: 991px) ===== */
@media (max-width: 991px) {
  .vs-solutions-mega {
    display: none !important;
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    left: 0 !important;
    transform: none !important;
  }
  .vs-solutions-dropdown.open > .vs-solutions-mega,
  .vs-solutions-dropdown.show > .vs-solutions-mega,
  .vs-solutions-mega.show {
    display: block !important;
  }
  .vs-solutions-grid {
    justify-content: center !important;
    gap: 8px !important;
  }
  .vs-solutions-grid .vs-solution-item {
    flex: 0 0 calc(33.33% - 8px) !important;
    max-width: calc(33.33% - 8px) !important;
  }
}

/* ===== Small mobile (max-width: 480px) ===== */
@media (max-width: 480px) {
  .vs-solutions-grid .vs-solution-item {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
  .vs-solutions-grid {
    gap: 6px !important;
  }
}

/* ===== Resources Mega Dropdown (same style as VS Solutions) ===== */
.vs-resources-dropdown { position: relative; }
.vs-resources-dropdown > a.nav-link { /* font-weight inherited from base nav-link rule */ }
@media (min-width: 992px) {
  .vs-resources-dropdown:hover > .vs-resources-mega { display: block !important; }
}
.vs-resources-mega {
  min-width: 520px !important;
  max-width: min(640px, 96vw) !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid #e0e8f0 !important;
  box-shadow: 0 15px 50px rgba(51, 85, 150, 0.18) !important;
  background: #fff !important;
  animation: vs-scale-up 0.3s ease both;
  transform-origin: top center;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1050 !important;
}
.vs-resources-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  justify-items: stretch !important;
}

/* Staggered entrance for resources grid (up to 12 items) */
.vs-resources-grid .vs-solution-item:nth-child(1)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.04s; }
.vs-resources-grid .vs-solution-item:nth-child(2)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.08s; }
.vs-resources-grid .vs-solution-item:nth-child(3)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.12s; }
.vs-resources-grid .vs-solution-item:nth-child(4)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.16s; }
.vs-resources-grid .vs-solution-item:nth-child(5)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.20s; }
.vs-resources-grid .vs-solution-item:nth-child(6)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.24s; }
.vs-resources-grid .vs-solution-item:nth-child(7)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.28s; }
.vs-resources-grid .vs-solution-item:nth-child(8)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.32s; }
.vs-resources-grid .vs-solution-item:nth-child(9)  { animation: vs-scale-up 0.2s ease both; animation-delay: 0.36s; }
.vs-resources-grid .vs-solution-item:nth-child(10) { animation: vs-scale-up 0.2s ease both; animation-delay: 0.40s; }
.vs-resources-grid .vs-solution-item:nth-child(11) { animation: vs-scale-up 0.2s ease both; animation-delay: 0.44s; }
.vs-resources-grid .vs-solution-item:nth-child(12) { animation: vs-scale-up 0.2s ease both; animation-delay: 0.48s; }

/* Dark mode */
body.vs-dark .vs-resources-mega {
  background: #1a2640 !important;
  border-color: #253550 !important;
}

/* Mobile: full width */
@media (max-width: 991px) {
  .vs-resources-mega {
    display: none !important;
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    left: 0 !important;
    transform: none !important;
  }
  .vs-resources-dropdown.open > .vs-resources-mega,
  .vs-resources-dropdown.show > .vs-resources-mega,
  .vs-resources-mega.show {
    display: block !important;
  }
  body.vs-dark .vs-resources-mega { background: #0f1724 !important; }
  .vs-resources-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    justify-items: stretch !important;
  }
}
@media (max-width: 480px) {
  .vs-resources-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

.contactus ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 50px;
}

.contactus ul li {
  display: inline-block;
  color: black;
  font-size: 12px;
}

.contactus ul.social {
  text-align: center;
}

.contactus ul.social li:after {
  display: none;
}

.contactus ul.social li a {
  display: block;
  font-size: 15px;
  border-radius: 4px;
  height: 30px;
  width: 30px;
  line-height: 2;
  margin-left: 5px;
}

.contactus ul.social li a:hover {
  color: #74c5b5;
  background-color: transparent !important;
  border: 1px solid #74c5b5;
}

.contactus ul.social li a.fb {
  background-color: #3b5998;
  color: #fff;
}

.contactus ul.social li a.tw {
  background-color: #26a6d1;
  color: #fff;
}

.contactus ul.social li a.in {
  color: #fff;
  background-color: #016197;
}

.contactus ul.social li a.you {
  color: #dc472e;
}

.contactus ul.social li a.pin {
  color: #c8232c;
}

.contactus ul.social li a.insta {
  color: #c536a4;
  font-size: 16px;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #74c5b5;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index: 1001;
}

.logoimg {
  position: fixed;
  z-index: 1001;
  display: block;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 48%;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #74c5b5;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #74c5b5;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #ffffff;
  color: #000000;
  z-index: 1000;
  -webkit-transform: translateX(0);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(0);
  /* IE 9 */
  transform: translateX(0);
  /* Firefox 16+, IE 10+, Opera */
}

p.loadingtext {
  position: fixed;
  z-index: 1001;
  display: block;
  text-align: center;
  width: 100%;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateY(-100%);
  /* IE 9 */
  transform: translateY(-100%);
  /* Firefox 16+, IE 10+, Opera */
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

/* JavaScript Turned Off */
.no-js #loader-wrapper {
  display: none;
}

.no-js h1 {
  color: #222222;
}

#content {
  margin: 0 auto;
  padding-bottom: 50px;
  width: 80%;
  max-width: 978px;
}

.change-password {
  margin-bottom: 10% !important;
}

.change-password .passinst {
  font-size: 11px;
}

.change-password .codealert {
  font-size: 12px;
}

.change-password .box-h {
  max-height: 385px;
  min-height: 350px;
  padding: 20px;
  height: 100%;
  align-items: center;
}

.change-password .form-control {
  font-size: 14px;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 9px;
  position: relative;
  z-index: 2;
}

.change-password .box-h .bodysec {
  padding: 0px 18px 0px 18px;
  margin-top: 15%;
  text-align: center;
}

.change-password .box-h.title_sec {
  display: flex;
  margin-top: 0;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.change-password .passinst {
  font-size: 12px;
}

.change-password .codealert {
  font-size: 11px;
  text-align: left;
}

.change-password .box-h.title_sec .bodysec {
  margin-top: 0;
}

.change-password .box-h .loginform .btn {
  background-color: #74c5b5;
  border: none;
}

.change-password .box-h .loginform .btn:hover {
  background-color: #335596;
}

.change-password .box-h .bodysec h2 {
  color: #335596;
}

@media (min-width: 768px) {
  .loginSec .box-h .bodysec h2 {
    font-size: 4rem;
  }

  .change-password .box-h .bodysec h2 {
    font-size: 4rem;
  }
}

.cme_part.common>.container #particles-js {
  z-index: 0;
}

.cmr_sec {
  position: relative;
}

.cmr_sec .block_details {
  display: none;
}

.cmr_sec #display_box {
  /*display: none;*/
  min-height: 85px;
  width: 300px;
  border: 2px dotted #335596;
  position: absolute;
  top: -17px;
  left: auto;
  right: -85%;
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  padding: 10px;
  z-index: 11;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .cmr_sec #display_box {
    width: 225px;
    right: -54%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cmr_sec #display_box {
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 10%;
  }
}

/* Mobile: constrain cmr display_box to viewport */
@media (max-width: 767px) {
  .cmr_sec #display_box {
    position: relative !important;
    width: 90% !important;
    max-width: 90vw !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 10px auto !important;
  }
}

.cmr_sec #display_box .links {
  width: 50%;
  display: inline-block;
  position: relative;
  font-size: 14px;
  height: 30px;
  vertical-align: bottom;
}

.cmr_sec #display_box .links.r_auto {
  right: auto;
}

.cmr_sec #display_box .btn {
  background: #74c5b5;
  color: #fff;
  text-transform: capitalize;
}

.cmr_sec #display_box .btn:hover {
  background: #335596;
}

.cmr_sec #display_box label {
  color: #335596;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  display: block;
}

.cmr_sec #display_box label.input {
  color: #74c5b5;
}

.cmr_sec #main_circle {
  height: 440px;
  width: 440px;
  margin-top: 30px;
  border: 1px solid #74c5b5;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 5;
}

.cmr_sec #main_circle .circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid #74c5b5;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 9px;
  flex-direction: column;
  margin: 0 auto;
  cursor: pointer;
}

.cmr_sec #main_circle .circle:hover {
  border: 1px solid #335596;
  background-color: #e0f9f4;
}

.cmr_sec #main_circle #child-1,
.cmr_sec #main_circle #child-2,
.cmr_sec #main_circle #child-3,
.cmr_sec #main_circle #child-4,
.cmr_sec #main_circle #child-5,
.cmr_sec #main_circle #child-6,
.cmr_sec #main_circle #child-7,
.cmr_sec #main_circle #child-8,
.cmr_sec #main_circle #child-9,
.cmr_sec #main_circle #child-10,
.cmr_sec #main_circle #child-11,
.cmr_sec #main_circle #child-12,
.cmr_sec #main_circle #child-13,
.cmr_sec #main_circle #child-14,
.cmr_sec #main_circle #child-15,
.cmr_sec #main_circle #child-16,
.cmr_sec #main_circle #child-17 {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -30px;
  left: 200px;
  line-height: 1;
  /* &:hover{
    @include trans;
      cursor: pointer;
    &:before{
      opacity:0.6;
    }
   }*/
}

.cmr_sec #main_circle #child-1 img,
.cmr_sec #main_circle #child-2 img,
.cmr_sec #main_circle #child-3 img,
.cmr_sec #main_circle #child-4 img,
.cmr_sec #main_circle #child-5 img,
.cmr_sec #main_circle #child-6 img,
.cmr_sec #main_circle #child-7 img,
.cmr_sec #main_circle #child-8 img,
.cmr_sec #main_circle #child-9 img,
.cmr_sec #main_circle #child-10 img,
.cmr_sec #main_circle #child-11 img,
.cmr_sec #main_circle #child-12 img,
.cmr_sec #main_circle #child-13 img,
.cmr_sec #main_circle #child-14 img,
.cmr_sec #main_circle #child-15 img,
.cmr_sec #main_circle #child-16 img,
.cmr_sec #main_circle #child-17 img {
  max-width: 100%;
  margin-top: -3px;
}

.cmr_sec #main_circle #child-1:before,
.cmr_sec #main_circle #child-2:before,
.cmr_sec #main_circle #child-3:before,
.cmr_sec #main_circle #child-4:before,
.cmr_sec #main_circle #child-5:before,
.cmr_sec #main_circle #child-6:before,
.cmr_sec #main_circle #child-7:before,
.cmr_sec #main_circle #child-8:before,
.cmr_sec #main_circle #child-9:before,
.cmr_sec #main_circle #child-10:before,
.cmr_sec #main_circle #child-11:before,
.cmr_sec #main_circle #child-12:before,
.cmr_sec #main_circle #child-13:before,
.cmr_sec #main_circle #child-14:before,
.cmr_sec #main_circle #child-15:before,
.cmr_sec #main_circle #child-16:before,
.cmr_sec #main_circle #child-17:before {
  content: "";
  height: 169px;
  width: 137px;
  background-image: url(../img/hover-effect.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  margin: 0 auto;
  transform: rotate(6deg);
  top: -22px;
  left: -49px;
  right: 0;
  z-index: -1;
  opacity: 0;
}

.cmr_sec #main_circle #child-1.active:before,
.cmr_sec #main_circle #child-2.active:before,
.cmr_sec #main_circle #child-3.active:before,
.cmr_sec #main_circle #child-4.active:before,
.cmr_sec #main_circle #child-5.active:before,
.cmr_sec #main_circle #child-6.active:before,
.cmr_sec #main_circle #child-7.active:before,
.cmr_sec #main_circle #child-8.active:before,
.cmr_sec #main_circle #child-9.active:before,
.cmr_sec #main_circle #child-10.active:before,
.cmr_sec #main_circle #child-11.active:before,
.cmr_sec #main_circle #child-12.active:before,
.cmr_sec #main_circle #child-13.active:before,
.cmr_sec #main_circle #child-14.active:before,
.cmr_sec #main_circle #child-15.active:before,
.cmr_sec #main_circle #child-16.active:before,
.cmr_sec #main_circle #child-17.active:before {
  opacity: 1;
}

.cmr_sec #main_circle #child-2 {
  left: 284px;
  top: -5px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-2.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-2.active:before {
  top: -33px;
  left: -63px;
  right: 0;
  transform: rotate(29deg);
}

.cmr_sec #main_circle #child-3 {
  left: auto;
  right: 36px;
  top: 40px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-3.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-3.active:before {
  top: -39px;
  left: -71px;
  transform: rotate(51deg);
}

.cmr_sec #main_circle #child-4 {
  left: auto;
  right: -8px;
  top: 103px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-4.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-4.active:before {
  top: -47px;
  left: -79px;
  transform: rotate(70deg);
}

.cmr_sec #main_circle #child-5 {
  left: auto;
  right: -23px;
  top: 180px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-5.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-5.active:before {
  top: -65px;
  left: -79px;
  transform: rotate(91deg);
}

.cmr_sec #main_circle #child-6 {
  left: auto;
  right: -17px;
  top: auto;
  bottom: 128px;
  /*&:hover ,*/
}

.cmr_sec #main_circle #child-6.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-6.active:before {
  top: -77px;
  left: -81px;
  transform: rotate(114deg);
}

.cmr_sec #main_circle #child-7 {
  left: auto;
  right: 22px;
  top: auto;
  bottom: 58px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-7.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-7.active:before {
  top: -85px;
  left: -75px;
  transform: rotate(133deg);
}

.cmr_sec #main_circle #child-8 {
  left: auto;
  right: 83px;
  top: auto;
  bottom: 4px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-8.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-8.active:before {
  top: -100px;
  left: -61px;
  transform: rotate(153deg);
}

.cmr_sec #main_circle #child-9 {
  left: auto;
  right: 163px;
  top: auto;
  bottom: -24px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-9.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-9.active:before {
  top: -103px;
  left: -45px;
  transform: rotate(175deg);
}

.cmr_sec #main_circle #child-10 {
  left: auto;
  right: 248px;
  top: auto;
  bottom: -19px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-10.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-10.active:before {
  top: -101px;
  left: -30px;
  transform: rotate(198deg);
}

.cmr_sec #main_circle #child-11 {
  left: 58px;
  right: auto;
  top: auto;
  bottom: 17px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-11.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-11.active:before {
  top: -90px;
  left: -11px;
  transform: rotate(-138deg);
}

.cmr_sec #main_circle #child-12 {
  left: 5px;
  right: auto;
  top: auto;
  bottom: 81px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-12.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-12.active:before {
  top: -75px;
  left: -4px;
  transform: rotate(-118deg);
}

.cmr_sec #main_circle #child-13 {
  left: -18px;
  right: auto;
  top: auto;
  bottom: 155px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-13.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-13.active:before {
  top: -60px;
  left: -8px;
  transform: rotate(-98deg);
}

.cmr_sec #main_circle #child-14 {
  left: -22px;
  right: auto;
  top: auto;
  bottom: 230px;
  /*&:hover, */
}

.cmr_sec #main_circle #child-14.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-14.active:before {
  top: -53px;
  left: -8px;
  transform: rotate(-77deg);
}

.cmr_sec #main_circle #child-15 {
  left: 3px;
  right: auto;
  top: 82px;
  bottom: auto;
  /*&:hover, */
}

.cmr_sec #main_circle #child-15.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-15.active:before {
  top: -39px;
  left: -13px;
  transform: rotate(-57deg);
}

.cmr_sec #main_circle #child-16 {
  left: 51px;
  right: auto;
  top: 25px;
  bottom: auto;
  /*&:hover, */
}

.cmr_sec #main_circle #child-16.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-16.active:before {
  top: -30px;
  left: -24px;
  transform: rotate(-37deg);
}

.cmr_sec #main_circle #child-17 {
  left: 118px;
  right: auto;
  top: -12px;
  bottom: auto;
}

.cmr_sec #main_circle #child-17:hover,
.cmr_sec #main_circle #child-17.active {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.cmr_sec #main_circle #child-17:hover:before,
.cmr_sec #main_circle #child-17.active:before {
  top: -27px;
  left: -37px;
  transform: rotate(-17deg);
}

.cmr_sec #inner_circle {
  background-image: url(../img/crm-inner-circle1.png);
  height: 345px;
  width: 345px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 74px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -2;
}

.cmr_sec #center_circle {
  height: 200px;
  width: 200px;
  background-image: url(../img/crm2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 145px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.cmr_sec #center_circle:after {
  content: "";
  position: absolute;
  box-shadow: 0px 0px 50px #335596;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: hvr-ripple-out 2s infinite;
  animation: hvr-ripple-out 2s infinite;
  border-radius: 100%;
}

#passwordRule p {
  padding-bottom: 0 !important;
  margin-bottom: 5px !important;
  font-size: 11px !important;
}

#passwordRule {
  padding: 4px 10px !important;
}

#passwordform label.error {
  font-size: 11px !important;
  text-align: left;
  color: red;
  margin-bottom: 0 !important;
  display: block;
}

#changePasswordform label.error {
  font-size: 11px !important;
  text-align: left;
  color: red;
  margin-bottom: 0 !important;
  display: block;
}

#passwordform .form-group {
  margin-bottom: 0.7rem !important;
}

.passwordMessageArea {
  margin-top: .5rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 11px !important;
  padding: 5px !important;
  ;
}

.loginform.reg input:focus:required:invalid,
.loginform.reg textarea:focus:required:invalid,
.loginform.reg select:focus:required:invalid {
  border: 1px solid red;
  outline: none;
}

.loginform.reg input:required {
  box-shadow: none;
}

.loginform.reg input:invalid,
.loginform.reg textarea:invalid {
  box-shadow: none;
}

.form-group.ps-fields{
  display: inline-block;
  width: 49.5% !important;
  vertical-align: text-top;
}

.changePasswordform .btn-primary:focus{
  box-shadow: none !important;
}


/* ========================================
   VS PORTALS DROPDOWN STYLES
   ======================================== */

.vs-portals-dropdown {
  display: inline-block;
  margin-left: 10px;
  position: relative;
}

/* Show dropdown on hover */
.vs-portals-dropdown:hover > .dropdown-menu {
  display: block !important;
  margin-top: 0;
  z-index: 1050;
}

/* Also support click toggle via Bootstrap JS */
.vs-portals-dropdown .dropdown-menu.show {
  display: block !important;
  z-index: 1050;
}

.vs-portals-dropdown .btn {
  border-radius: 20px;
  background: #335596;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  padding: 10px 18px;
  border: none;
  transition: all 0.3s ease;
}

.vs-portals-dropdown .btn:hover,
.vs-portals-dropdown .btn:focus {
  background: #74c5b5;
  color: white;
  box-shadow: 0 2px 8px rgba(51, 85, 150, 0.3);
}

.vs-portals-dropdown .btn .fa-lock {
  margin-right: 6px;
}

.vs-portals-dropdown .dropdown-menu {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 4px 0 !important;
  min-width: fit-content !important;
  max-width: fit-content !important;
  width: fit-content !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 2px !important;
}

.vs-portals-dropdown .dropdown-menu .dropdown-item {
  color: #335596;
  font-size: 12px;
  padding: 6px 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.vs-portals-dropdown .dropdown-menu .dropdown-item:hover {
  background-color: #335596;
  color: #ffffff;
}

.vs-portals-dropdown .dropdown-menu .dropdown-item i {
  margin-right: 6px;
  width: 14px;
  text-align: center;
}

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

/* Mobile-first responsive fixes */
@media (max-width: 575px) {
  header .navbar .navbar-brand {
    width: 150px;
  }

  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    font-size: 13px;
    padding: 8px 0;
  }

  .vs-portals-dropdown {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }

  .vs-portals-dropdown .btn {
    width: 100%;
    text-align: center;
  }

  .vs-portals-dropdown .dropdown-menu {
    width: 100%;
  }

  footer ul li {
    display: block;
    margin-bottom: 5px;
  }

  footer ul li:after {
    display: none;
  }

  footer ul.social {
    text-align: center;
    margin-top: 10px;
  }

  .links {
    display: block;
    text-align: center;
    right: 0;
    margin-bottom: 10px;
  }

  .titleheader {
    font-size: 22px !important;
  }

  .module-container {
    flex-direction: column !important;
    padding: 0 10px !important;
  }

  .module-card {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .management-container {
    flex-direction: column !important;
  }

  .management-photo {
    width: 100% !important;
  }

  .management-text {
    width: 100% !important;
  }

  .mr {
    flex-direction: column !important;
  }

  .mr-text,
  .mr-image {
    width: 100% !important;
  }

  .blogcards-container {
    grid-template-columns: 1fr !important;
    padding: 0 10px !important;
  }

  .certifications-header h3 {
    font-size: 20px !important;
  }

  .certification-card {
    padding: 15px !important;
  }

  .certification-content {
    flex-direction: column !important;
  }

  .certification-text,
  .certification-badge {
    width: 100% !important;
  }
}

/* Tablet responsive fixes */
@media (min-width: 576px) and (max-width: 767px) {
  .module-container {
    flex-direction: column !important;
    padding: 0 15px !important;
  }

  .module-card {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .blogcards-container {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 15px !important;
  }

  .management-container {
    flex-direction: column !important;
  }

  .management-photo,
  .management-text {
    width: 100% !important;
  }

  .mr {
    flex-direction: column !important;
  }

  .mr-text,
  .mr-image {
    width: 100% !important;
  }

  .certification-content {
    flex-direction: column !important;
  }

  .certification-text,
  .certification-badge {
    width: 100% !important;
  }
}

/* Medium tablet to small desktop */
@media (min-width: 768px) and (max-width: 991px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    font-size: 12px;
    padding: 8px 5px;
  }

  .vs-portals-dropdown {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }

  .vs-portals-dropdown .btn {
    width: 100%;
    text-align: center;
  }

  .links {
    display: block;
    text-align: center;
    right: 0;
    margin-bottom: 10px;
  }

  .blogcards-container {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Large desktop nav fit */
@media (min-width: 992px) and (max-width: 1199px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    font-size: 12px;
    padding: 10px 6px;
  }

  .vs-portals-dropdown .btn {
    font-size: 11px;
    padding: 8px 12px;
  }
}

/* Ensure images are responsive globally */
img {
  max-width: 100%;
  height: auto;
}

/* Ensure iframes are responsive */
iframe {
  max-width: 100%;
}

/* Footer responsive improvements */
@media (max-width: 767px) {
  footer .col-md-8,
  footer .col-md-4 {
    text-align: center;
  }

  footer ul.social {
    text-align: center;
    margin-top: 10px;
  }
}

/* Navbar collapse improvements for mobile */
@media (max-width: 991px) {
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
  }

  header .navbar .form-inline {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  header .navbar .form-inline .btn {
    margin-bottom: 5px;
  }
}

/* ===== Global Responsive Enhancements ===== */

/* Responsive table wrapper utility */
.table-responsive-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Smooth scroll-reveal animation base */
.wow {
  visibility: hidden;
}

/* Enhanced hover transitions for cards site-wide */
.card, .blog-card, .certification-card, .map-card, .terms-conditions .card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Global section heading animation line */
.section-heading-animated {
  position: relative;
  display: inline-block;
}
.section-heading-animated::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #74c5b5, #335596);
  margin: 10px auto 0;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.section-heading-animated:hover::after {
  width: 100px;
}

/* Fade-in-up animation for scroll-triggered elements */
@keyframes fadeInUpSmooth {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer full mobile stacking */
@media (max-width: 575px) {
  footer .row {
    flex-direction: column;
    text-align: center;
  }
  footer .col-md-8,
  footer .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  footer ul {
    padding-left: 0;
    justify-content: center;
    flex-wrap: wrap;
  }
  footer ul li {
    margin-bottom: 5px;
  }
  footer ul.social {
    justify-content: center;
    margin-top: 10px;
  }

  /* Global small mobile typography */
  .common > .container h3 {
    font-size: 1.3rem;
  }
  .terms-conditions h5 {
    font-size: 13px;
  }
  .terms-conditions p {
    font-size: 12px;
  }
}

/* Tablet improvements */
@media (min-width: 576px) and (max-width: 991px) {
  .common > .container {
    min-height: auto;
    padding-bottom: 40px;
  }
}

/* Inline table responsiveness for blog posts */
.common table,
.csrdpart table,
.terms-conditions table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

@media (max-width: 767px) {
  .common table,
  .csrdpart table,
  .terms-conditions table {
    font-size: 13px;
  }
  .common table td,
  .common table th,
  .csrdpart table td,
  .csrdpart table th {
    padding: 6px 8px;
    word-break: break-word;
  }
}

/* ============================================================
   COMPREHENSIVE RESPONSIVE & VISUAL POLISH
   ============================================================ */

/* --- Better font rendering & base --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

/* --- Smooth transitions on interactive elements --- */
a,
.btn,
.nav-link,
.dropdown-item,
.card,
.blog-card {
  transition: all 0.3s ease;
}

/* --- Enhanced dropdown menu animation --- */
header ul.dropdown-menu {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #e8e8e8;
  margin-top: 0;
}

/* --- Better nav link hover effect (underline) - NOT on dropdowns (they use ::after for arrow) --- */
header .navbar ul.navbar-nav li.nav-item:not(.dropdown) a.nav-link {
  position: relative;
}
header .navbar ul.navbar-nav li.nav-item:not(.dropdown) a.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #74c5b5, #335596);
  transition: width 0.3s ease, left 0.3s ease;
}
header .navbar ul.navbar-nav li.nav-item:not(.dropdown):hover a.nav-link::after,
header .navbar ul.navbar-nav li.nav-item:not(.dropdown).active a.nav-link::after {
  width: 100%;
  left: 0;
}
header .navbar ul.navbar-nav li.nav-item:hover a.nav-link {
  border-bottom-color: transparent;
}
header .navbar ul.navbar-nav li.nav-item.active a.nav-link {
  border-bottom-color: transparent;
}

/* --- Better global button styles --- */
.btn {
  border-radius: 25px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(51, 85, 150, 0.25);
}
.btn:active {
  transform: translateY(0);
}

/* --- Enhanced card hover everywhere --- */
.card:hover,
.blog-card:hover,
.certification-card:hover,
.map-card:hover,
.card-chosen:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(51, 85, 150, 0.15);
}

/* --- Better section spacing --- */
section {
  position: relative;
}

/* --- Improved form styling --- */
.form-control {
  border-radius: 8px;
  border: 1px solid #dde2e8;
  padding: 10px 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus {
  border: 1px solid #74c5b5 !important;
  box-shadow: 0 0 0 3px rgba(116, 197, 181, 0.15) !important;
}

/* --- Better separator/divider styling --- */
.separator {
  background: linear-gradient(90deg, transparent, #74c5b5, transparent);
  height: 2px;
  margin: 15px 0;
}
.green-separator {
  background: linear-gradient(90deg, transparent, #74c5b5, transparent);
}
.blue-separator {
  background: linear-gradient(90deg, transparent, #335596, transparent);
}

/* --- Footer enhancements --- */
footer {
  background: #f9fafb;
  border-top: 2px solid #e8e8e8;
  padding: 15px 0;
}
footer ul li a {
  transition: color 0.3s ease;
  position: relative;
}
footer ul li a:hover {
  color: #335596;
  text-decoration: none;
}
/* --- CMR circle responsive scaling (ihmmaintenance/circulareconomy) --- */
@media (max-width: 767px) {
  .cmr_sec #main_circle {
    height: 300px !important;
    width: 300px !important;
    margin: 20px auto !important;
  }
  .cmr_sec #inner_circle {
    height: 230px !important;
    width: 230px !important;
    top: 55px !important;
  }
  .cmr_sec #center_circle {
    height: 140px !important;
    width: 140px !important;
    top: 100px !important;
  }
  .cmr_sec #display_box {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 20px auto !important;
  }
  .cmr_sec #main_circle #child-1,
  .cmr_sec #main_circle #child-2,
  .cmr_sec #main_circle #child-3,
  .cmr_sec #main_circle #child-4,
  .cmr_sec #main_circle #child-5,
  .cmr_sec #main_circle #child-6,
  .cmr_sec #main_circle #child-7,
  .cmr_sec #main_circle #child-8,
  .cmr_sec #main_circle #child-9,
  .cmr_sec #main_circle #child-10,
  .cmr_sec #main_circle #child-11,
  .cmr_sec #main_circle #child-12,
  .cmr_sec #main_circle #child-13,
  .cmr_sec #main_circle #child-14,
  .cmr_sec #main_circle #child-15,
  .cmr_sec #main_circle #child-16,
  .cmr_sec #main_circle #child-17 {
    width: 38px !important;
    height: 38px !important;
  }
  .cmr_sec #main_circle .circle {
    height: 36px !important;
    width: 36px !important;
    padding: 5px !important;
  }
  .cmr_sec #main_circle .circle img {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 480px) {
  .cmr_sec #main_circle {
    height: 240px !important;
    width: 240px !important;
  }
  .cmr_sec #inner_circle {
    height: 180px !important;
    width: 180px !important;
    top: 45px !important;
  }
  .cmr_sec #center_circle {
    height: 110px !important;
    width: 110px !important;
    top: 80px !important;
  }
}

/* --- Contact page map responsiveness --- */
.map-wrapper iframe,
.contactus iframe {
  width: 100%;
  border-radius: 8px;
}
@media (max-width: 576px) {
  .map-wrapper iframe,
  .contactus iframe {
    height: 220px !important;
  }
}

/* --- Login/Registration form mobile improvements --- */
@media (max-width: 576px) {
  .loginSec .w-75 {
    width: 95% !important;
  }
  .loginSec .box-h {
    min-height: auto;
    padding: 15px;
  }
  .loginSec .box-h .bodysec h2 {
    font-size: 1.8rem;
  }
  .loginSec .box-h .bodysec {
    padding: 15px;
  }
  .change-password .box-h {
    min-height: auto;
    max-height: none;
  }
  .form-group.ps-fields {
    display: block !important;
    width: 100% !important;
  }
}

/* --- FAQ/Accordion improvements --- */
.terms-conditions .card {
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.terms-conditions .card:hover {
  box-shadow: 0 4px 16px rgba(51, 85, 150, 0.1);
}
/* FAQ card-header/body base styles (overridden by .accordion rules above) */

/* --- Certification page responsive improvements --- */
@media (max-width: 480px) {
  .certification-card {
    padding: 20px 15px !important;
    margin-bottom: 20px !important;
  }
  .certifications-header h3,
  .page-title {
    font-size: 1.8rem !important;
  }
  .certification-logo {
    width: 80px !important;
    height: 80px !important;
  }
  .certification-content {
    gap: 15px !important;
  }
}

/* --- Better scrollbar styling --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #74c5b5, #335596);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #335596;
}

/* --- Loading/skeleton animation --- */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* --- Better link styling in content areas --- */
.common p a,
.terms-conditions a,
.csrdpart a {
  color: #335596;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.common p a:hover,
.terms-conditions a:hover,
.csrdpart a:hover {
  color: #74c5b5;
  border-bottom-color: #74c5b5;
  text-decoration: none;
}

/* --- Contact page improvements --- */
.contactus h3 {
  color: #335596;
  font-weight: 700;
  margin-bottom: 20px;
}
.contactus .form-control {
  margin-bottom: 15px;
}

@media (max-width: 767px) {
  .contactus .col-md-6 {
    margin-bottom: 30px;
  }
}

/* --- Schedule meeting link improvements --- */
.links {
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 20px;
}
.links:hover {
  background: rgba(116, 197, 181, 0.1);
}
.links .fa-calendar {
  margin-right: 4px;
}

/* Right-side navbar cluster — keeps schedule-meeting link, theme toggle,
   language switcher and portals dropdown aligned on desktop; stacks cleanly
   on mobile. The language switcher (#vs-language-switcher) is injected by
   i18n.js after the theme toggle, so it participates in this flex row. */
@media (min-width: 992px) {
  header .navbar .navbar-collapse > .links,
  header .navbar .navbar-collapse > .vs-theme-toggle,
  header .navbar .navbar-collapse > #vs-language-switcher,
  header .navbar .navbar-collapse > .vs-portals-dropdown {
    flex-shrink: 0;
    align-self: center;
  }
  header .navbar .navbar-collapse > .vs-theme-toggle,
  header .navbar .navbar-collapse > #vs-language-switcher,
  header .navbar .navbar-collapse > .vs-portals-dropdown {
    margin-left: 8px;
  }
}
@media (max-width: 991px) {
  header .navbar .navbar-collapse > .links,
  header .navbar .navbar-collapse > .vs-portals-dropdown,
  header .navbar .navbar-collapse > #vs-language-switcher {
    display: flex !important;
    width: 100%;
    margin: 8px 0 0 !important;
    justify-content: center;
  }
  header .navbar .navbar-collapse > .vs-theme-toggle {
    margin: 10px auto 0;
  }
  .vs-portals-dropdown {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }
  .vs-portals-dropdown .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    box-shadow: none;
    border: 1px solid #e8eef5;
    margin-top: 6px;
  }
  /* Language switcher mobile: keep in-flow inside the expanded navbar and
     neutralise the legacy floating-button coords from i18n.css */
  #vs-language-switcher {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 10px auto 0 !important;
    display: flex !important;
    justify-content: center;
    width: auto;
  }
  #vs-language-switcher .vs-i18n-trigger {
    border-radius: 50px !important;
    width: auto !important;
    height: auto !important;
    padding: 10px 18px !important;
  }
  #vs-language-switcher .vs-i18n-current-name {
    display: inline !important;
  }
  /* Dropdown positioning is owned by i18n.js (position: fixed with JS-computed
     top/left) so it escapes .navbar-collapse overflow:auto and never clips. */
}

/* --- About page improvements --- */
.aboutus_sec {
  padding: 40px 0;
}
.aboutus_sec p {
  line-height: 1.8;
  color: #444;
}

/* --- Global responsive typography using clamp --- */
@media (max-width: 767px) {
  h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
  h2 { font-size: clamp(1.3rem, 4vw, 2rem); }
  h3 { font-size: clamp(1.1rem, 3.5vw, 1.75rem); }
  p { font-size: clamp(0.85rem, 2.5vw, 1rem); }
}

/* --- Better display box styling --- */
.middlepart .container #display_box,
.middlepart .container #display_box1,
.middlepart-esg .container-esg #display_box,
.cmr_sec #display_box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(51, 85, 150, 0.1);
  color: #333;
  pointer-events: auto;
}

/* Ensure display_box content from block_details is readable */
#display_box label {
  color: #335596;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
#display_box label.input {
  color: #74c5b5;
}
#display_box .smallboxp {
  color: #444;
  font-size: 13px;
  line-height: 1.6;
}
#display_box h4 {
  color: #335596;
  margin-bottom: 8px;
}

/* --- Hover effect for page sections with background images --- */
.blog-header,
.monitor-background {
  transition: background-color 0.5s ease;
}

/* --- VS Portals dropdown animation --- */
.vs-portals-dropdown .dropdown-menu {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* --- Better navbar toggler for mobile --- */
header .navbar-toggler {
  border: 2px solid #335596;
  border-radius: 6px;
  padding: 5px 8px !important;
  transition: all 0.3s ease;
}
header .navbar-toggler:hover {
  background: rgba(51, 85, 150, 0.08);
}

/* --- Mobile navbar open state --- */
@media (max-width: 991px) {
  .navbar-collapse {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    border: 1px solid #e8e8e8;
  }
  .navbar-collapse .navbar-nav {
    padding: 10px 0;
  }
  .navbar-collapse .navbar-nav .nav-item {
    border-bottom: 1px solid #f0f0f0;
  }
  .navbar-collapse .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  .navbar-collapse .navbar-nav .nav-item a.nav-link {
    padding: 12px 10px !important;
    font-size: 14px;
  }
  .navbar-collapse .navbar-nav .nav-item:not(.dropdown) a.nav-link::after {
    display: none;
  }

  /* --- Mobile dropdown expand fix: JS toggles .open class --- */
  .vs-solutions-dropdown.open > .vs-solutions-mega,
  .vs-resources-dropdown.open > .vs-resources-mega {
    display: block !important;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Also ensure Bootstrap .show class works for mega dropdowns on mobile */
  .vs-solutions-dropdown .vs-solutions-mega.show,
  .vs-resources-dropdown .vs-resources-mega.show {
    display: block !important;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* VS Portals dropdown mobile fix */
  .vs-portals-dropdown .dropdown-menu.show {
    display: block !important;
  }

  /* Dropdown toggle arrow indicator for mobile */
  .vs-solutions-dropdown.open > a .fa-th-large,
  .vs-resources-dropdown.open > a .fa-book {
    color: #74c5b5;
  }
}

/* --- Ensure no horizontal overflow on any device --- */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* --- Better heading styles for content pages --- */
.common > .container .terms-conditions h1 {
  position: relative;
  padding-bottom: 12px;
}
.common > .container .terms-conditions h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #74c5b5, #335596);
  border-radius: 2px;
}

/* --- Responsive adjustments for 1024px tablets (iPad landscape) --- */
@media (min-width: 992px) and (max-width: 1024px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link {
    font-size: 11px;
    padding: 10px 5px;
  }
  .vs-portals-dropdown .btn {
    font-size: 10px;
    padding: 7px 10px;
  }
}

/* --- Better content readability --- */
.common > .container p,
.csrdpart p,
.aboutus_sec p,
.terms-conditions p {
  max-width: 80ch;
  line-height: 1.8;
}

/* --- Small phone improvements (320px) --- */
@media (max-width: 360px) {
  header .navbar .navbar-brand {
    width: 130px;
  }
  .vs-portals-dropdown .btn {
    font-size: 10px;
    padding: 7px 10px;
  }
  footer ul li {
    font-size: 10px;
  }
  footer ul.social li a {
    font-size: 14px;
    width: 32px;
    height: 32px;
  }
  .blogcards-container {
    padding: 0 5px !important;
  }
}

/* --- Landscape phone improvements --- */
@media (max-height: 500px) and (orientation: landscape) {
  header {
    padding: 2px 0;
  }
  .middlepart .h75 {
    height: auto;
    min-height: 50vh;
  }
}

/* --- Print styles --- */
@media print {
  header, footer, #particles-js, #tsparticles, .vs-portals-dropdown {
    display: none !important;
  }
  body {
    background: white !important;
    background-image: none !important;
    color: #000 !important;
  }
  .common > .container {
    min-height: auto !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* --- Circle click interactivity fix --- */
.showInfo {
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.showInfo .circle {
  cursor: pointer;
  pointer-events: auto;
}
.middlepart #main_circle,
.middlepart-esg #main_circle,
.cmr_sec #main_circle {
  z-index: 10;
  pointer-events: auto;
}
.container-esg {
  pointer-events: auto;
}

/* --- Footer Links Grid for SEO --- */
.footer-links-grid a {
  display: inline-block;
  padding: 2px 0;
  font-size: 12px;
  transition: color 0.2s ease;
  text-decoration: none;
}
.footer-links-grid a:hover {
  color: #335596 !important;
  text-decoration: none;
}
.footer-links-grid strong {
  display: block;
  margin-bottom: 6px;
}
@media (max-width: 575px) {
  .footer-links-grid {
    text-align: center;
  }
  .footer-links-grid .col-6 {
    margin-bottom: 15px !important;
  }
}

/* --- Social Share Buttons for Blog Articles --- */
.social-share-bar {
  display: flex;
  gap: 10px;
  padding: 15px 0;
  margin: 20px 0;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  align-items: center;
  flex-wrap: wrap;
}
.social-share-bar span {
  font-weight: 600;
  color: #335596;
  font-size: 14px;
  margin-right: 5px;
}
.social-share-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.social-share-bar a:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
}
.social-share-bar .share-fb { background: #1877F2; }
.social-share-bar .share-tw { background: #111111; }
.social-share-bar .share-li { background: #0077b5; }
.social-share-bar .share-email { background: #335596; }

/* Share-bar: render X glyph via SVG mask even when HTML uses legacy fa-twitter */
.social-share-bar .share-tw i.fa-twitter,
.social-share-bar .share-tw i.fab.fa-twitter {
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>") no-repeat center / 70% auto;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>") no-repeat center / 70% auto;
}
.social-share-bar .share-tw i.fa-twitter::before,
.social-share-bar .share-tw i.fab.fa-twitter::before { content: ""; display: none; }

/* --- Accessibility: focus-visible for keyboard users --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid #335596;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(51, 85, 150, 0.2);
}

/* MARINE ANIMATIONS START - DO NOT EDIT ABOVE THIS LINE */
/* ============================================================
   MARINE DOMAIN ANIMATIONS - VISIBLE & IMPACTFUL
   Theme: #335596 (deep blue) #74c5b5 (teal) - UNCHANGED
   ============================================================ */

/* --- KEYFRAMES --- */

/* Ocean wave for section dividers */
@keyframes vs-ocean-wave {
  0% { transform: translateX(0) translateZ(0) scaleY(1); }
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.55); }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

/* Floating effect */
@keyframes vs-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* Pulse glow */
@keyframes vs-glow-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(116,197,181,0.3), 0 0 15px rgba(116,197,181,0.1); }
  50% { box-shadow: 0 0 15px rgba(116,197,181,0.5), 0 0 40px rgba(116,197,181,0.2); }
}

/* Slide in from left */
@keyframes vs-slide-left {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Slide in from right */
@keyframes vs-slide-right {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Scale up entrance */
@keyframes vs-scale-up {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Gradient flow */
@keyframes vs-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Rotating border */
@keyframes vs-border-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Live pulse dot */
@keyframes vs-live-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

/* Radar sweep */
@keyframes vs-radar-sweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Bubble rise */
@keyframes vs-bubble {
  0% { transform: translateY(100%) scale(0.4); opacity: 0; }
  10% { opacity: 0.6; }
  100% { transform: translateY(-20px) scale(1); opacity: 0; }
}

/* Data flow line */
@keyframes vs-data-flow {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

/* Scroll arrow bounce */
@keyframes vs-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(10px); opacity: 1; }
}

/* Typing cursor blink */
@keyframes vs-cursor-blink {
  0%, 100% { border-right-color: #74c5b5; }
  50% { border-right-color: transparent; }
}


/* ============================================================
   1. OCEAN WAVE SECTION DIVIDERS
   Visible SVG waves between content sections
   ============================================================ */

.wave-divider {
  position: relative;
  height: 60px;
  overflow: hidden;
}

.wave-divider svg {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 60px;
  animation: vs-ocean-wave 8s ease-in-out infinite;
}

/* Apply wave between sections using ::after on section containers */
.titleheader {
  position: relative;
  padding-bottom: 15px;
}

.titleheader::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #335596, #74c5b5, #335596);
  background-size: 200% 100%;
  animation: vs-gradient-shift 4s ease infinite;
  border-radius: 2px;
}


/* ============================================================
   2. ANIMATED GRADIENT HEADER BORDER
   Moving teal-blue gradient line under navbar
   ============================================================ */

header {
  border-bottom: none !important;
}

header::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #335596, #74c5b5, #335596, #74c5b5);
  background-size: 300% 100%;
  animation: vs-gradient-shift 6s ease infinite;
}


/* ============================================================
   3. CARD HOVER EFFECTS - VISIBLE LIFT + GLOW
   3D tilt + teal glow border on hover
   ============================================================ */

.module-card,
.feature-card,
.benefit-card,
.ssr-module-card,
.management-card,
.certification-card,
.blog-card,
.card {
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  border: 1px solid #e8e8e8;
}

.module-card:hover,
.feature-card:hover,
.benefit-card:hover,
.ssr-module-card:hover,
.certification-card:hover,
.blog-card:hover,
.card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 20px 40px rgba(51, 85, 150, 0.15),
    0 0 0 1px rgba(116, 197, 181, 0.3) !important;
  border-color: rgba(116, 197, 181, 0.4) !important;
}

.management-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

.management-card:hover {
  transform: translateX(5px) !important;
  box-shadow: -4px 0 0 #74c5b5, 0 4px 15px rgba(51,85,150,0.1) !important;
  background: rgba(116,197,181,0.03) !important;
}


/* ============================================================
   4. BUTTON RIPPLE + GLOW EFFECTS
   ============================================================ */

.links,
.btn,
.ssr-hero-btn,
.ssr-cta-btn,
.cbt-hero-btn,
.cbt-cta-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.links:hover,
.ssr-hero-btn:hover,
.ssr-cta-btn:hover,
.cbt-hero-btn:hover,
.cbt-cta-btn:hover {
  box-shadow: 0 8px 25px rgba(116,197,181,0.4) !important;
  transform: translateY(-3px) !important;
}

/* Shine sweep on hover */
.links::after,
.ssr-hero-btn::after,
.ssr-cta-btn::after,
.cbt-hero-btn::after,
.cbt-cta-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s ease;
}

.links:hover::after,
.ssr-hero-btn:hover::after,
.ssr-cta-btn:hover::after,
.cbt-hero-btn:hover::after,
.cbt-cta-btn:hover::after {
  left: 100%;
}

/* VS Portals button glow */
.vs-portals-dropdown .btn {
  transition: all 0.3s ease !important;
}

.vs-portals-dropdown .btn:hover {
  box-shadow: 0 0 20px rgba(116,197,181,0.4), 0 4px 15px rgba(51,85,150,0.2) !important;
}


/* ============================================================
   5. FOOTER - OCEAN WAVE + FLOATING ICONS
   ============================================================ */

footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f0f7fa 40%, #e4f1f6 100%) !important;
  padding-top: 30px !important;
}

/* Animated wave at top of footer */
footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 200%;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30'%3E%3Cpath d='M0,15 C100,5 200,25 300,15 C400,5 500,25 600,15 C700,5 800,25 900,15 C1000,5 1100,25 1200,15' fill='none' stroke='%2374c5b5' stroke-width='2' opacity='0.4'/%3E%3Cpath d='M0,20 C100,12 200,28 300,20 C400,12 500,28 600,20 C700,12 800,28 900,20 C1000,12 1100,28 1200,20' fill='none' stroke='%23335596' stroke-width='1.5' opacity='0.2'/%3E%3C/svg%3E") repeat-x;
  background-size: 600px 30px;
  animation: vs-ocean-wave 10s linear infinite;
}

/* Social icon hover handled in main social section above */


/* ============================================================
   6. ICON FLOATING ANIMATION ON CARDS
   ============================================================ */

.feature-card .icon-wrapper,
.ssr-module-card .module-icon {
  transition: all 0.4s ease !important;
}

.feature-card:hover .icon-wrapper,
.ssr-module-card:hover .module-icon {
  animation: vs-float 2s ease-in-out infinite;
  color: #74c5b5 !important;
}

.management-card:hover .management-logo {
  animation: vs-float 2s ease-in-out infinite;
}

.benefit-card h5 i {
  transition: all 0.3s ease;
}

.benefit-card:hover h5 i {
  transform: scale(1.3);
  color: #74c5b5 !important;
}


/* ============================================================
   7. LIVE MONITORING INDICATOR (SSR / IHM Tracker pages)
   Visible pulsing green dot
   ============================================================ */

.ssr-hero .subtitle::before,
.ssr-cta-section h2::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #74c5b5;
  border-radius: 50%;
  margin-right: 10px;
  animation: vs-live-pulse 2s ease-in-out infinite;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(116,197,181,0.6);
}


/* ============================================================
   8. SEPARATOR LINES - ANIMATED GRADIENT
   ============================================================ */

.separator {
  background: linear-gradient(90deg, transparent, #74c5b5, transparent) !important;
  height: 2px !important;
  border: none !important;
}


/* ============================================================
   9. IMAGES - DEPTH ZOOM ON HOVER
   ============================================================ */

.mr-image {
  overflow: hidden;
  border-radius: 16px;
  position: relative;
}

.mr-image img {
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.mr-image:hover img {
  transform: scale(1.08) !important;
}

.management-photo img {
  transition: transform 0.5s ease !important;
}

.management-photo:hover img {
  transform: scale(1.05) !important;
}


/* ============================================================
   10. SCROLL-TO-BOTTOM ARROW (animated)
   Fixed at bottom-right, bouncing arrow
   ============================================================ */

.vs-scroll-arrow {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #16a085, #74c5b5);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 4px 15px rgba(22,160,133,0.35);
  animation: none;
  transition: opacity 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vs-scroll-arrow.vs-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: vs-scroll-bounce 2s ease-in-out infinite;
}

.vs-scroll-arrow:hover {
  background: linear-gradient(135deg, #74c5b5, #16a085);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 25px rgba(116,197,181,0.45);
  animation: none;
}

/* Scroll to top arrow */
.vs-scroll-top {
  bottom: 140px;
}


/* ============================================================
   11. NAVBAR ACTIVE ITEM GLOW
   ============================================================ */

header .navbar ul.navbar-nav li.nav-item.active > a.nav-link {
  position: relative;
}

header .navbar ul.navbar-nav li.nav-item.active > a.nav-link::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #74c5b5, #335596);
  background-size: 200% 100%;
  animation: vs-gradient-shift 3s ease infinite;
  border-radius: 2px;
}


/* ============================================================
   12. BACKGROUND PATTERN - HEXAGONAL MARINE TECH GRID
   ============================================================ */

body {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23335596' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  background-attachment: fixed;
}


/* ============================================================
   13. ESG WHEEL CENTER - SONAR PING
   ============================================================ */

#esg {
  position: relative;
}

#esg::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 2px solid rgba(116,197,181,0.4);
  border-radius: 50%;
  animation: vs-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}


/* ============================================================
   14. WORKFLOW STEPS - STAGGERED ENTRANCE
   ============================================================ */

.workflow-step {
  opacity: 0;
  animation: vs-slide-left 0.6s ease forwards;
}
.workflow-step:nth-child(1) { animation-delay: 0.1s; }
.workflow-step:nth-child(2) { animation-delay: 0.3s; }
.workflow-step:nth-child(3) { animation-delay: 0.5s; }
.workflow-step:nth-child(4) { animation-delay: 0.7s; }
.workflow-step:nth-child(5) { animation-delay: 0.9s; }
.workflow-step:nth-child(6) { animation-delay: 1.1s; }
.workflow-step:nth-child(7) { animation-delay: 1.3s; }

.workflow-step .step-number {
  animation: vs-glow-pulse 3s ease-in-out infinite;
  border-radius: 50%;
}


/* ============================================================
   15. LOGO ANIMATION ON HOVER
   ============================================================ */

header .navbar-brand img {
  transition: all 0.4s ease !important;
}

header .navbar-brand:hover img {
  filter: drop-shadow(0 4px 12px rgba(51,85,150,0.3)) !important;
  transform: scale(1.05) !important;
}


/* ============================================================
   16. DROPDOWN MENU ENTRANCE ANIMATION
   ============================================================ */

header .dropdown-menu {
  animation: vs-scale-up 0.25s ease forwards;
  transform-origin: top center;
}

.vs-portals-dropdown .dropdown-menu {
  animation: vs-scale-up 0.2s ease forwards;
  transform-origin: top right;
}


/* ============================================================
   NAVBAR DROPDOWN ARROWS - INLINE WITH TEXT
   Icon + Text + Arrow all in ONE row, never wrapping
   ============================================================ */

/* All dropdown toggles in navbar: flex row, no wrap */
/* ALL nav links: flex row so icon + text + arrow stay in ONE line */
header .navbar ul.navbar-nav li.nav-item a.nav-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Dropdown arrow caret: FORCE visible, inline, same row as text */
header .navbar ul.navbar-nav li.nav-item a.nav-link.dropdown-toggle::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 6px !important;
  border-top: 5px solid !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  border-bottom: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease;
}

/* Rotate arrow on hover/open */
header .navbar ul.navbar-nav li.nav-item.dropdown:hover > a.dropdown-toggle::after,
header .navbar ul.navbar-nav li.nav-item.dropdown.show > a.dropdown-toggle::after {
  transform: rotate(180deg);
}

/* VS Portals button: same treatment */
.vs-portals-dropdown .btn.dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.vs-portals-dropdown .btn.dropdown-toggle::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 6px !important;
  border-top: 4px solid !important;
  border-right: 3px solid transparent !important;
  border-left: 3px solid transparent !important;
  border-bottom: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease;
}

.vs-portals-dropdown:hover .btn.dropdown-toggle::after,
.vs-portals-dropdown.show .btn.dropdown-toggle::after {
  transform: rotate(180deg);
}

/* ============================================================
   RESPONSIVE - All devices
   ============================================================ */

/* Large desktop (1200px+) */
@media (min-width: 1200px) {
  header .navbar .nav-link {
    font-size: 14px;
    padding: 10px 12px !important;
  }
}

/* Medium desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  header .navbar .nav-link {
    font-size: 12px !important;
    padding: 10px 6px !important;
  }
  .vs-portals-dropdown .btn {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
  .links {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  .vs-theme-toggle {
    width: 30px;
    height: 30px;
    margin: 0 4px;
  }
}

/* Mobile dropdown visual feedback: rotate caret when open */
@media (max-width: 991px) {
  .vs-solutions-dropdown .dropdown-toggle::after,
  .vs-resources-dropdown .dropdown-toggle::after {
    transition: transform 0.3s ease;
  }
  .vs-solutions-dropdown.open .dropdown-toggle::after,
  .vs-resources-dropdown.open .dropdown-toggle::after {
    transform: rotate(180deg);
  }
  /* Smooth expand/collapse animation for mega dropdowns on mobile */
  .vs-solutions-mega,
  .vs-resources-mega {
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
}

/* Tablet (768px - 991px) - collapsed navbar */
@media (max-width: 991px) {
  header .navbar ul.navbar-nav li.nav-item a.nav-link.dropdown-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
  }
  header .navbar ul.navbar-nav li.nav-item a.nav-link.dropdown-toggle::after {
    margin-left: auto !important;
    display: inline-block !important;
  }
  .navbar-collapse {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    border: 1px solid #e8e8e8;
    max-height: 80vh;
    overflow-y: auto;
  }
  body.vs-dark .navbar-collapse {
    background: #1a2640 !important;
    border-color: #253550 !important;
  }
  .navbar-collapse .navbar-nav .nav-item {
    border-bottom: 1px solid #f0f0f0;
  }
  body.vs-dark .navbar-collapse .navbar-nav .nav-item {
    border-bottom-color: #253550 !important;
  }
  .navbar-collapse .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding: 12px 10px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
  }
  /* VS Solutions mega dropdown: mobile (handled in main block above) */
  body.vs-dark .vs-solutions-mega {
    background: #0f1724 !important;
  }
  /* Resources dropdown: full width on mobile */
  .navbar-collapse .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: #f8f9fa !important;
    padding: 5px 0 !important;
  }
  body.vs-dark .navbar-collapse .dropdown-menu {
    background: #0f1724 !important;
  }
  /* Action buttons: stack on mobile */
  .links, .vs-portals-dropdown, .vs-theme-toggle {
    margin-top: 8px;
  }
  .links {
    display: block !important;
    text-align: center;
    margin-bottom: 8px;
  }
  .vs-portals-dropdown {
    width: 100%;
    margin-left: 0 !important;
  }
  .vs-portals-dropdown .btn {
    width: 100%;
    text-align: center;
  }
  .vs-portals-dropdown .dropdown-menu {
    width: 100% !important;
    min-width: 100% !important;
    position: static !important;
  }
}

/* Small phone (max-width: 480px) */
@media (max-width: 480px) {
  header .navbar .navbar-brand {
    width: 140px !important;
  }
  .navbar-collapse .navbar-nav .nav-item .nav-link {
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
}

/* ============================================================
   BLOG & WEBINAR CARD IMAGES - FULL VISIBILITY (NO CROPPING)
   ============================================================ */

/* Card image container: show FULL image, never crop */
.blog-card .card-image {
  overflow: hidden !important;
  border-radius: 12px 12px 0 0;
  line-height: 0;
  position: relative;
  background: #f0f3f8;
}

.blog-card .card-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  border-radius: 12px 12px 0 0;
  transition: transform 0.5s ease;
  background: #f0f3f8;
}

.blog-card:hover .card-image img {
  transform: scale(1.05);
}

/* Blog card: consistent sizing */
.blog-card {
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  border: 1px solid #e8eef5 !important;
  box-shadow: 0 4px 16px rgba(51,85,150,0.06) !important;
  transition: all 0.35s ease !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.blog-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 35px rgba(116,197,181,0.2) !important;
  border-color: #74c5b5 !important;
}

/* Card content: clean spacing */
.blog-card .card-content {
  padding: 16px 18px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card .card-content .card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #335596 !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  flex: 1;
}

.blog-card .card-content .read-more-btn {
  display: inline-block;
  padding: 6px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  border-radius: 20px;
  background: linear-gradient(135deg, #335596, #74c5b5) !important;
  color: #fff !important;
  text-decoration: none !important;
  margin: 0 0 8px 0 !important;
  transition: all 0.3s ease;
}

.blog-card .card-content .read-more-btn:hover {
  background: linear-gradient(135deg, #74c5b5, #335596) !important;
  transform: translateY(-1px);
}

.blog-card .card-content .published-date {
  font-size: 0.72rem !important;
  padding: 4px 12px !important;
  background: rgba(51,85,150,0.08) !important;
  color: #335596 !important;
  border-radius: 12px !important;
  margin: 0 !important;
  display: inline-block;
  font-weight: 500;
}

/* ============================================================
   LIGHT / DARK MODE TOGGLE
   Default: Light. Toggle adds body.vs-dark class.
   ============================================================ */

/* Toggle button */
.vs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #335596;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 8px;
  padding: 0;
  vertical-align: middle;
}
.vs-theme-toggle:hover {
  background: rgba(51, 85, 150, 0.08);
  color: #74c5b5;
}

/* Sun icon visible in light mode, moon hidden */
.vs-theme-icon-sun { display: block; }
.vs-theme-icon-moon { display: none; }

/* In dark mode: moon visible, sun hidden */
body.vs-dark .vs-theme-icon-sun { display: none; }
body.vs-dark .vs-theme-icon-moon { display: block; }
body.vs-dark .vs-theme-toggle { color: #74c5b5; }
body.vs-dark .vs-theme-toggle:hover { background: rgba(116, 197, 181, 0.15); }

/* ---- DARK MODE THEME ---- */
body.vs-dark {
  background-color: #0f1724 !important;
  color: #d0d8e8 !important;
  background-image: none !important;
}

body.vs-dark header {
  background: #131d2e !important;
  border-bottom-color: #1e2d42 !important;
}

body.vs-dark header::after {
  background: linear-gradient(90deg, #1a3a6e, #74c5b5, #1a3a6e, #74c5b5) !important;
}

body.vs-dark .navbar-brand img {
  filter: brightness(1.1);
}

body.vs-dark .nav-link {
  color: #b0c4de !important;
}

body.vs-dark .nav-link:hover,
body.vs-dark .nav-item.active .nav-link {
  color: #74c5b5 !important;
}

body.vs-dark .dropdown-menu {
  background: #1a2640 !important;
  border-color: #253550 !important;
}

body.vs-dark .dropdown-item {
  color: #b0c4de !important;
}

body.vs-dark .dropdown-item:hover {
  background: #335596 !important;
  color: #fff !important;
}

body.vs-dark .vs-solutions-mega {
  background: #1a2640 !important;
  border-color: #253550 !important;
}

body.vs-dark .vs-solution-item {
  background: #0f1724 !important;
  color: #b0c4de !important;
  border-color: #253550 !important;
}

body.vs-dark .vs-solution-item:hover {
  background: #1a2640 !important;
  border-color: #74c5b5 !important;
  color: #fff !important;
}

body.vs-dark .vs-portals-dropdown .btn {
  background: #74c5b5 !important;
}

body.vs-dark .links {
  color: #74c5b5 !important;
}

body.vs-dark footer {
  background: linear-gradient(180deg, #0f1724 0%, #131d2e 100%) !important;
  color: #8899aa !important;
}

body.vs-dark footer a { color: #8899aa !important; }
body.vs-dark footer a:hover { color: #74c5b5 !important; }
body.vs-dark footer strong { color: #74c5b5 !important; }

body.vs-dark h1, body.vs-dark h2, body.vs-dark h3,
body.vs-dark h4, body.vs-dark h5, body.vs-dark h6 {
  color: #e0e8f0 !important;
}

body.vs-dark p { color: #b0bec5 !important; }

body.vs-dark .titleheader {
  color: #e0e8f0 !important;
}

body.vs-dark .module-card,
body.vs-dark .feature-card,
body.vs-dark .benefit-card,
body.vs-dark .ssr-module-card,
body.vs-dark .management-card,
body.vs-dark .card,
body.vs-dark .blog-card {
  background: #1a2640 !important;
  border-color: #253550 !important;
  color: #b0c4de !important;
}

body.vs-dark .management-content h3 { color: #e0e8f0 !important; }
body.vs-dark .management-content p { color: #9ab !important; }

body.vs-dark .separator {
  background: linear-gradient(90deg, transparent, #335596, transparent) !important;
}

body.vs-dark .mr-text { color: #b0c4de !important; }
body.vs-dark .mr-text p { color: #9ab !important; }

body.vs-dark .slider-content {
  background-color: rgba(26, 38, 64, 0.9) !important;
}

body.vs-dark section { background-color: #0f1724 !important; }
body.vs-dark .bg-light-gray { background-color: #131d2e !important; }

body.vs-dark .workflow-step .step-number {
  background: #335596 !important;
  color: #fff !important;
}

body.vs-dark .workflow-step .step-content h5 { color: #e0e8f0 !important; }
body.vs-dark .workflow-step .step-content p { color: #9ab !important; }

body.vs-dark .vs-footer-stats .vs-stat strong { color: #74c5b5 !important; }
body.vs-dark .vs-footer-stats .vs-stat span { color: #7899aa !important; }

body.vs-dark .vs-scroll-arrow {
  background: linear-gradient(135deg, #0e6e5b, #16a085) !important;
}

body.vs-dark .navbar-collapse {
  background: #1a2640 !important;
}

body.vs-dark .common,
body.vs-dark .middlepart,
body.vs-dark .container {
  color: #b0c4de;
}

body.vs-dark input, body.vs-dark textarea, body.vs-dark select {
  background: #1a2640 !important;
  color: #d0d8e8 !important;
  border-color: #335596 !important;
}

body.vs-dark .form-control {
  background: #1a2640 !important;
  color: #d0d8e8 !important;
  border-color: #253550 !important;
}

body.vs-dark .form-control:focus {
  border-color: #74c5b5 !important;
  box-shadow: 0 0 0 3px rgba(116, 197, 181, 0.15) !important;
}

body.vs-dark .monitor-background {
  background-color: rgba(19, 29, 46, 1) !important;
}

body.vs-dark .ssr-hero,
body.vs-dark .cbt-hero,
body.vs-dark .ssr-cta-section {
  background: linear-gradient(135deg, #0f1724 0%, #1a2640 100%) !important;
}

/* --- Dark mode: Terms & Conditions / Privacy / Cookie / GDPR accordion --- */
body.vs-dark .terms-conditions h1,
body.vs-dark .terms-conditions h2,
body.vs-dark .terms-conditions h3,
body.vs-dark .terms-conditions h5 { color: #e0e8f0 !important; }
body.vs-dark .terms-conditions p { color: #b0bec5 !important; }
body.vs-dark .terms-conditions a { color: #74c5b5 !important; }
body.vs-dark .terms-conditions a:hover { color: #9dd5c9 !important; }
body.vs-dark .terms-conditions .btn-link { color: #b0c4de !important; }
body.vs-dark .terms-conditions .accordion .card { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .terms-conditions .accordion .card-header { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .terms-conditions .accordion .card-body { background: #131d2e !important; color: #b0bec5 !important; }
body.vs-dark .terms-conditions .accordion .card-body h5 { color: #74c5b5 !important; }
body.vs-dark .terms-conditions .accordion .card-body li { color: #b0bec5 !important; }

/* --- Dark mode: Login / Registration / Forgot Password --- */
body.vs-dark .loginSec p { color: #b0bec5 !important; }
body.vs-dark .loginSec .box-h { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .loginSec .box-h .bodysec h2 { color: #e0e8f0 !important; }
body.vs-dark .loginSec .box-h .bodysec a { color: #74c5b5 !important; }
body.vs-dark .change-password .box-h { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .change-password .box-h .bodysec h2 { color: #e0e8f0 !important; }

/* --- Dark mode: About page --- */
body.vs-dark .aboutus_sec label { color: #e0e8f0 !important; }
body.vs-dark .aboutus_sec p { color: #b0bec5 !important; }

/* --- Dark mode: CMR circle / display box (IHM Maintenance / Circular Economy) --- */
body.vs-dark .cmr_sec #display_box { background: #1a2640 !important; color: #b0c4de !important; }
body.vs-dark .cmr_sec #display_box label { color: #74c5b5 !important; }
body.vs-dark .cmr_sec #display_box label.input { color: #9dd5c9 !important; }
body.vs-dark .cmr_sec #display_box h4 { color: #e0e8f0 !important; }
body.vs-dark .middlepart .container #display_box,
body.vs-dark .middlepart .container #display_box1,
body.vs-dark .middlepart-esg .container-esg #display_box { background: #1a2640 !important; color: #b0c4de !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; }
body.vs-dark #display_box label { color: #74c5b5 !important; }
body.vs-dark #display_box .smallboxp { color: #b0bec5 !important; }
body.vs-dark #display_box h4 { color: #e0e8f0 !important; }

/* --- Dark mode: Contact page --- */
body.vs-dark .contactus h3 { color: #e0e8f0 !important; }
body.vs-dark .contactus p { color: #b0bec5 !important; }

/* --- Dark mode: CSRD / ESG content --- */
body.vs-dark .csrdpart a { color: #74c5b5 !important; }
body.vs-dark .csrdpart a:hover { color: #9dd5c9 !important; }

/* --- Dark mode: Portal dropdown items --- */
body.vs-dark .vs-portals-dropdown .dropdown-menu .dropdown-item { color: #b0c4de !important; }
body.vs-dark .vs-portals-dropdown .dropdown-menu .dropdown-item:hover { color: #fff !important; background: #335596 !important; }

/* --- Dark mode: Blog cards & blog content --- */
body.vs-dark .blog-header-content { background-color: rgba(26, 38, 64, 0.95) !important; }
body.vs-dark .blog-header-content h1 { color: #e0e8f0 !important; }
body.vs-dark .blog-header-content p { color: #b0bec5 !important; }
body.vs-dark .blogcards-container .card { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .blogcards-container .card h5,
body.vs-dark .blogcards-container .card h6 { color: #e0e8f0 !important; }
body.vs-dark .blogcards-container .card p { color: #b0bec5 !important; }

/* --- Dark mode: ESG module cards & slider --- */
body.vs-dark .card-container .card { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .slider-container li { background-color: rgba(26, 38, 64, 0.6) !important; color: #b0c4de !important; }
body.vs-dark .slider-container li:hover { background-color: #335596 !important; }

/* --- Dark mode: General text elements that use inline/hardcoded dark colors --- */
body.vs-dark [style*="color:#335596"],
body.vs-dark [style*="color: #335596"] { color: #74c5b5 !important; }
body.vs-dark [style*="color:#333"],
body.vs-dark [style*="color: #333"] { color: #b0c4de !important; }
body.vs-dark [style*="color:#444"],
body.vs-dark [style*="color: #444"] { color: #b0bec5 !important; }
body.vs-dark [style*="color:#000"],
body.vs-dark [style*="color: #000"],
body.vs-dark [style*="color:black"],
body.vs-dark [style*="color: black"] { color: #e0e8f0 !important; }
body.vs-dark [style*="color:#222"],
body.vs-dark [style*="color: #222"] { color: #d0d8e8 !important; }
body.vs-dark [style*="color:#1a1a1a"],
body.vs-dark [style*="color: #1a1a1a"] { color: #e0e8f0 !important; }

/* --- Dark mode: FAQ accordion --- */
body.vs-dark .accordion .card { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .accordion .card-header { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .accordion .btn-link { color: #b0c4de !important; }
body.vs-dark .accordion .card-body { background: #131d2e !important; color: #b0bec5 !important; }

/* --- Dark mode: Table styling --- */
body.vs-dark table { background: #1a2640 !important; color: #b0c4de !important; }
body.vs-dark table th { background: #253550 !important; color: #e0e8f0 !important; border-color: #335596 !important; }
body.vs-dark table td { border-color: #253550 !important; color: #b0bec5 !important; }

/* --- Dark mode: Breadcrumbs --- */
body.vs-dark .breadcrumb { background: transparent !important; }
body.vs-dark .breadcrumb-item a { color: #74c5b5 !important; }
body.vs-dark .breadcrumb-item.active { color: #b0c4de !important; }

/* --- Dark mode: List items and general text --- */
body.vs-dark li { color: #b0bec5; }
body.vs-dark span { color: #b0c4de; }
body.vs-dark label { color: #b0c4de !important; }
body.vs-dark .text-muted { color: #7899aa !important; }
body.vs-dark strong { color: #e0e8f0; }

/* --- Dark mode: Alert boxes --- */
body.vs-dark .alert { background: #1a2640 !important; border-color: #253550 !important; color: #b0c4de !important; }

/* --- Dark mode: Background white sections --- */
body.vs-dark [style*="background:#fff"],
body.vs-dark [style*="background: #fff"],
body.vs-dark [style*="background-color:#fff"],
body.vs-dark [style*="background-color: #fff"],
body.vs-dark [style*="background:#ffffff"],
body.vs-dark [style*="background: #ffffff"],
body.vs-dark [style*="background-color:#ffffff"],
body.vs-dark [style*="background-color: #ffffff"],
body.vs-dark [style*="background:white"],
body.vs-dark [style*="background: white"],
body.vs-dark [style*="background-color:white"],
body.vs-dark [style*="background-color: white"] { background: #1a2640 !important; }

/* --- Dark mode: Client cards section --- */
body.vs-dark .vs-client-card { border-color: #253550 !important; }
body.vs-dark .vs-client-card .client-text { color: #b0c4de !important; }
body.vs-dark .vs-client-card:hover .client-text { color: #74c5b5 !important; }

/* --- Dark mode: Events / Calendar cards --- */
body.vs-dark .event-card,
body.vs-dark .calendar-card { background: #1a2640 !important; border-color: #253550 !important; color: #b0c4de !important; }

/* --- Dark mode: Certifications page --- */
body.vs-dark .certification-card { background: #1a2640 !important; border-color: #253550 !important; }
body.vs-dark .view-certificate-btn { color: #74c5b5 !important; border-color: #74c5b5 !important; }

/* --- Dark mode: Footer social icons preserve their brand colors --- */
body.vs-dark footer ul.social li:first-child { color: #74c5b5 !important; }
body.vs-dark footer ul.social li a {
  background: #1a2640 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(116,197,181,0.18) !important;
}
body.vs-dark footer ul.social li a.in { color: #4aa3d9 !important; }
body.vs-dark footer ul.social li a.fb { color: #4a9cf5 !important; }
body.vs-dark footer ul.social li a.ig { color: #ff5c8a !important; background: linear-gradient(135deg, #1a2640 0%, #2a1830 100%) !important; }
body.vs-dark footer ul.social li a.tw { color: #e6e6e6 !important; }
body.vs-dark footer ul.social li a.yt { color: #ff4040 !important; }
body.vs-dark footer ul.social li a.wa { color: #3ee58a !important; }
body.vs-dark footer ul.social li a.ph { color: #74c5b5 !important; }
body.vs-dark footer ul.social li a:hover,
body.vs-dark footer ul.social li a:focus-visible { color: #fff !important; }

/* --- Dark mode: Blog post page containers (PFOS, Why-Marine, Reporting, etc.) --- */
body.vs-dark .page-container { background: #1a2640 !important; color: #b0c4de !important; box-shadow: 0 0 10px rgba(0,0,0,0.3) !important; }
body.vs-dark .page-container h1, body.vs-dark .page-container h2,
body.vs-dark .page-container h3, body.vs-dark .page-container h4 { color: #e0e8f0 !important; }
body.vs-dark .page-container p, body.vs-dark .page-container li { color: #b0bec5 !important; }
body.vs-dark .page-container a { color: #74c5b5 !important; }
body.vs-dark .page-container .info-box,
body.vs-dark .page-container .highlight-box,
body.vs-dark .page-container .contact-box,
body.vs-dark .page-container .component-box,
body.vs-dark .page-container .service-box,
body.vs-dark .page-container .danger-box { background: #131d2e !important; border-color: #253550 !important; color: #b0c4de !important; }
body.vs-dark .title-section { color: #e0e8f0 !important; }

/* --- Dark mode: IMPA / Event blog pages --- */
body.vs-dark .impa-blog-container,
body.vs-dark .event-blog-container { background: #1a2640 !important; color: #b0c4de !important; }
body.vs-dark .impa-blog-container h1, body.vs-dark .impa-blog-container h2,
body.vs-dark .impa-blog-container h3 { color: #e0e8f0 !important; }
body.vs-dark .impa-blog-container p { color: #b0bec5 !important; }

/* --- Dark mode: Loader --- */
body.vs-dark #loader-wrapper .loader-section { background: #0f1724 !important; color: #d0d8e8 !important; }

/* ============================================================
   ACCESSIBILITY - Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .vs-scroll-arrow { display: none !important; }
}

/* ============================================================
   UNIVERSAL RESPONSIVE FIX - ALL DEVICES
   Covers: 4K(2560) to Desktop(1920) to Laptop(1366) to
   Tablet(1024/768) to Mobile(414/375/320)
   ============================================================ */

/* --- BASE: Fluid containers, no fixed widths --- */
.blogcards-container,.module-container,.management-container,.slider-container,.monitor-background,.feature-grid,.benefit-grid,.module-grid,.workflow-timeline,.ssr-section .container,.esg-section .container{max-width:100%;box-sizing:border-box}
img{max-width:100%;height:auto}
.vs-solutions-mega{max-width:min(580px,95vw)!important}
.vs-resources-mega{max-width:min(420px,95vw)!important}
.card{width:100%!important;max-width:450px;margin:0 auto 20px;box-sizing:border-box}

/* --- 4K MONITORS (2560px+) --- */
@media(min-width:2560px){
.container{max-width:1800px}
header .navbar .nav-link{font-size:16px!important;padding:12px 16px!important}
.titleheader{font-size:2rem}
footer{font-size:14px}
.blogcards-container{grid-template-columns:repeat(4,1fr)!important;gap:30px}
.vs-solutions-grid .vs-solution-item{padding:18px 12px !important}
.vs-solutions-grid .vs-solution-item i{font-size:26px !important;width:48px !important;height:48px !important;line-height:48px !important}
.vs-solutions-grid .vs-solution-item span{font-size:13px !important}
.vs-resources-grid .vs-solution-item{padding:18px 12px !important}
.vs-resources-grid .vs-solution-item i{font-size:26px !important;width:48px !important;height:48px !important;line-height:48px !important}
.vs-resources-grid .vs-solution-item span{font-size:13px !important}
}

/* --- LARGE DESKTOP (1920px) --- */
@media(min-width:1920px) and (max-width:2559px){
.container{max-width:1400px}
.blogcards-container{grid-template-columns:repeat(3,1fr)!important;gap:25px}
}

/* --- LAPTOP (1200px-1365px) --- */
@media(min-width:1200px) and (max-width:1365px){
header .navbar .nav-link{font-size:13px!important;padding:10px 8px!important}
}

/* --- SMALL LAPTOP / TABLET LANDSCAPE (1024px-1199px) --- */
@media(min-width:1024px) and (max-width:1199px){
header .navbar .nav-link{font-size:12px!important;padding:10px 5px!important}
.links{font-size:11px!important;padding:5px 8px!important}
.vs-portals-dropdown .btn{font-size:11px!important;padding:7px 10px!important}
.vs-theme-toggle{width:28px;height:28px;margin:0 3px}
.blogcards-container{grid-template-columns:repeat(2,1fr)!important}
}

/* --- TABLET PORTRAIT (768px-1023px) --- */
@media(min-width:768px) and (max-width:1023px){
.blogcards-container{grid-template-columns:repeat(2,1fr)!important;gap:15px;padding:15px}
.management-container{flex-direction:column!important}
.management-photo{width:60%!important;margin:0 auto 20px!important}
.management-text{width:100%!important;padding:10px!important}
.mr{flex-direction:column!important}
.mr-text,.mr-image{width:100%!important}
footer .footer-links-grid .col-6{width:50%!important}
.feature-grid,.benefit-grid{grid-template-columns:repeat(2,1fr)!important}
.blog-header{height:250px}
.blog-header-content h1{font-size:26px}
h1{font-size:1.8rem}
h2{font-size:1.5rem}
}

/* --- MOBILE (481px-767px) --- */
@media(min-width:481px) and (max-width:767px){
.blogcards-container{grid-template-columns:repeat(2,1fr)!important;gap:12px;padding:10px}
.management-container{flex-direction:column!important}
.management-photo{display:none}
.management-text{width:100%!important}
.mr{flex-direction:column!important}
.mr-text,.mr-image{width:100%!important}
footer .footer-links-grid .col-6{width:50%!important}
.feature-grid,.benefit-grid{grid-template-columns:repeat(2,1fr)!important}
.module-container{flex-direction:column!important;padding:0 10px!important}
.module-card{width:100%!important;margin-bottom:15px!important}
h1{font-size:1.5rem!important}
h2{font-size:1.3rem!important}
.blog-header{height:200px}
.blog-header-content{max-width:80%!important}
.blog-header-content h1{font-size:22px}
}

/* --- SMALL MOBILE (415px-480px) --- */
@media(max-width:480px){
.blogcards-container{grid-template-columns:1fr!important;gap:12px;padding:10px}
.feature-grid,.benefit-grid,.module-grid{grid-template-columns:1fr!important}
header .navbar .navbar-brand{width:140px!important}
h1{font-size:1.3rem!important}
h2{font-size:1.1rem!important}
p,li{font-size:14px!important}
.blog-header{height:180px}
.blog-header-content{max-width:90%!important;padding:12px!important}
.blog-header-content h1{font-size:18px!important}
.titleheader{font-size:1.2rem!important}
footer .footer-links-grid .col-6{width:100%!important}
.vs-footer-stats{flex-direction:column;gap:8px;align-items:center}
.ssr-hero h1,.esg-hero h1,.cbt-hero h1{font-size:1.4rem!important}
.ssr-hero .subtitle,.esg-hero .subtitle{font-size:1rem!important}
.ssr-hero-btn,.ssr-cta-btn,.esg-hero-btn{padding:10px 24px!important;font-size:0.9rem!important}
}

/* Scroll arrow smaller on mobile */
@media(max-width:480px){
.vs-scroll-arrow{right:12px;bottom:70px;width:36px;height:36px;font-size:14px}
}

/* --- VERY SMALL MOBILE (320px-414px) --- */
@media(max-width:414px){
header .navbar .navbar-brand{width:120px!important}
.navbar-collapse .navbar-nav .nav-item .nav-link{font-size:13px!important;padding:10px 8px!important}
.vs-solutions-grid .vs-solution-item i{font-size:16px!important;width:32px!important;height:32px!important}
.vs-solutions-grid .vs-solution-item span{font-size:9.5px!important}
.vs-resources-grid .vs-solution-item i{font-size:16px!important;width:32px!important;height:32px!important}
.vs-resources-grid .vs-solution-item span{font-size:9.5px!important}
h1{font-size:1.2rem!important}
.blog-header-content h1{font-size:16px!important}
footer .footer-links-grid{font-size:11px!important}
.card-title{font-size:1rem!important}
.ssr-hero h1,.cbt-hero h1{font-size:1.2rem!important}
}

/* --- TINY MOBILE (320px) --- */
@media(max-width:360px){
header .navbar .navbar-brand{width:110px!important}
h1{font-size:1.1rem!important}
p,li{font-size:13px!important}
.ssr-hero h1,.cbt-hero h1{font-size:1rem!important}
footer{font-size:11px!important}
}

/* --- LANDSCAPE PHONES --- */
@media(max-height:500px) and (orientation:landscape){
header .navbar{min-height:auto;padding:5px 0}
.navbar-collapse{max-height:70vh;overflow-y:auto}
.ssr-hero,.cbt-hero,.esg-hero{padding:30px 0 20px}
.ssr-hero h1,.cbt-hero h1,.esg-hero h1{font-size:1.3rem!important}
}

/* --- PRINT --- */
@media print{
header,footer,.vs-i18n-switcher,.vs-scroll-arrow,.vs-theme-toggle,.vs-nav-arrow{display:none!important}
body{font-size:12pt;color:#000;background:#fff}
a{color:#000;text-decoration:underline}
}

/* ============================================================
   UI IMPROVEMENTS - About, Blog, CBT, Cards
   ============================================================ */

/* --- About: smooth hover effects --- */
.about-content p, .about-content div, .common p {
  transition: all 0.3s ease;
}
.about-content p:hover, .common p:hover {
  transform: translateX(5px);
  border-left: 3px solid #74c5b5;
  padding-left: 12px;
}

/* --- Blog & Webinar Cards: more attractive --- */
.blog-card {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #e8eef5 !important;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative;
}
.blog-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(51, 85, 150, 0.15) !important;
  border-color: #74c5b5 !important;
}
.blog-card .card-image {
  position: relative;
  overflow: hidden;
}
.blog-card .card-image img {
  transition: transform 0.5s ease !important;
}
.blog-card:hover .card-image img {
  transform: scale(1.05) !important;
}
.blog-card .card-content {
  padding: 18px !important;
}
.blog-card .card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #335596 !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}
.blog-card .read-more-btn {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #335596, #4a7cc9);
  color: #fff !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.blog-card .read-more-btn:hover {
  background: linear-gradient(135deg, #74c5b5, #335596);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(116, 197, 181, 0.3);
}
.blog-card .published-date {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
}

/* --- CBT: Fix button alignment in CTA section --- */
.cbt-cta-section {
  text-align: center;
}
.cbt-cta-section .cbt-cta-btn,
.cbt-cta-section .cbt-cta-btn-outline {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 5px 8px !important;
}
@media (max-width: 576px) {
  .cbt-cta-section .cbt-cta-btn,
  .cbt-cta-section .cbt-cta-btn-outline {
    display: block !important;
    width: 80% !important;
    margin: 8px auto !important;
    text-align: center;
  }
}

/* --- CME: Interactive cards with detail reveal --- */
.circulareconomy-section .card,
.card-container .card {
  transition: all 0.4s ease !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.circulareconomy-section .card:hover,
.card-container .card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 15px 40px rgba(51, 85, 150, 0.18) !important;
  border-color: #74c5b5 !important;
}

/* ==============================
   TRUSTED BY CLIENTS MARQUEE
   ============================== */
.vs-clients-section { padding: 60px 0; background: #fff; overflow: hidden; }
.vs-clients-section .section-heading { text-align: center; margin-bottom: 35px; }
.vs-clients-section .section-heading h2 { font-size: 2rem; font-weight: 700; color: #335596; margin-bottom: 8px; }
.vs-clients-section .section-heading p { color: #666; font-size: 1rem; }
.vs-clients-section .section-heading .client-count { display: inline-block; background: linear-gradient(135deg,#74c5b5,#335596); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 16px; border-radius: 20px; margin-top: 8px; }

.vs-clients-marquee { overflow: hidden; position: relative; padding: 8px 0; }
.vs-clients-marquee::before, .vs-clients-marquee::after { content:''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.vs-clients-marquee::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.vs-clients-marquee::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.vs-clients-track {
  display: flex;
  gap: 18px;
  animation: vs-scroll-left 40s linear infinite;
  width: max-content;
}
.vs-clients-track:hover { animation-play-state: paused; }
.vs-clients-marquee.reverse .vs-clients-track { animation-name: vs-scroll-right; animation-duration: 45s; }
@keyframes vs-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes vs-scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

.vs-client-card {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 75px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.vs-client-card:hover {
  border-color: #74c5b5;
  box-shadow: 0 6px 20px rgba(116,197,181,0.2);
  transform: translateY(-4px) scale(1.03);
  text-decoration: none;
}
.vs-client-card img {
  max-width: 100%;
  max-height: 45px;
  object-fit: contain;
  filter: grayscale(70%);
  opacity: 0.75;
  transition: all 0.3s ease;
}
.vs-client-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.vs-client-card .client-text {
  font-size: 11px;
  font-weight: 700;
  color: #335596;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.2px;
  transition: color 0.3s ease;
}
.vs-client-card:hover .client-text { color: #74c5b5; }

/* Chinese / Hong Kong Client Highlight */
@keyframes vs-china-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(218,41,28,0.15), 0 2px 12px rgba(255,185,0,0.10); }
  50% { box-shadow: 0 0 16px rgba(218,41,28,0.25), 0 4px 20px rgba(255,185,0,0.18); }
}
@keyframes vs-china-border-shimmer {
  0% { border-color: rgba(218,41,28,0.35); }
  50% { border-color: rgba(255,185,0,0.50); }
  100% { border-color: rgba(218,41,28,0.35); }
}
.vs-china-client {
  border: 2px solid rgba(218,41,28,0.35);
  background: linear-gradient(135deg, #fffdf5 0%, #fff8f0 100%);
  animation: vs-china-glow 3s ease-in-out infinite, vs-china-border-shimmer 4s ease-in-out infinite;
  position: relative;
}
.vs-china-client::after {
  content: '\f024';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 8px;
  color: #da291c;
  position: absolute;
  top: 4px;
  right: 6px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.vs-china-client:hover {
  border-color: #da291c;
  box-shadow: 0 8px 28px rgba(218,41,28,0.22), 0 4px 16px rgba(255,185,0,0.15);
  transform: translateY(-6px) scale(1.06);
}
.vs-china-client:hover::after { opacity: 1; }
.vs-china-client img {
  filter: grayscale(30%) !important;
  opacity: 0.88 !important;
}
.vs-china-client:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}
.vs-china-client .client-text {
  color: #b8282e !important;
}
.vs-china-client:hover .client-text {
  color: #da291c !important;
}

@media (max-width: 576px) {
  .vs-client-card { width: 140px; height: 60px; padding: 10px 12px; }
  .vs-client-card img { max-height: 35px; }
  .vs-client-card .client-text { font-size: 10px; }
  .vs-china-client::after { font-size: 7px; top: 3px; right: 4px; }
}

/* ==============================
   CTA SECTION
   ============================== */
.vs-cta-section {
  background: linear-gradient(135deg, rgba(51,85,150,0.92) 0%, rgba(29,52,97,0.95) 100%);
  padding: 80px 0;
  text-align: center;
  color: #fff;
}
.vs-cta-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 25px;
}
.vs-cta-section .btn-cta {
  padding: 13px 32px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin: 0 8px 10px;
  transition: all 0.3s ease;
}
.vs-cta-section .btn-cta-primary {
  background: #74c5b5;
  color: #fff;
  border: 2px solid #74c5b5;
}
.vs-cta-section .btn-cta-primary:hover {
  background: #5fb3a3;
  border-color: #5fb3a3;
  color: #fff;
  text-decoration: none;
}
.vs-cta-section .btn-cta-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.vs-cta-section .btn-cta-outline:hover {
  background: #fff;
  color: #335596;
  text-decoration: none;
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVE FIXES
   Ensures all pages are fully responsive on all devices
   ============================================================ */

/* --- Tablet (max-width: 991px) --- */
@media (max-width: 991px) {
  /* Portals dropdown: show on click, not hover */
  .vs-portals-dropdown:hover > .dropdown-menu {
    display: none !important;
  }
  .vs-portals-dropdown .dropdown-menu.show {
    display: block !important;
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Global spacing reductions */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Sections padding reduction */
  section, .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Form containers */
  .loginSec .w-75,
  .registrationSec .w-75 {
    width: 95% !important;
  }

  /* Modals */
  .modal-dialog {
    max-width: 95vw !important;
    margin: 10px auto !important;
  }

  /* Tables */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* iframes (maps, videos) */
  iframe {
    max-width: 100%;
  }

  /* Typography scaling */
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }

  /* CTA section */
  .vs-cta-section {
    padding: 50px 15px;
  }
  .vs-cta-section h2 {
    font-size: 1.5rem;
  }
  .vs-cta-section .btn-cta {
    display: block;
    margin: 8px auto;
    max-width: 280px;
  }

  /* Cards */
  .card {
    margin: 10px 5px;
  }

  /* Fix pre/code overflow */
  pre, code {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
  }
}

/* --- Small Mobile (max-width: 576px) --- */
@media (max-width: 576px) {
  /* Ensure no horizontal overflow */
  body {
    overflow-x: clip;
  }

  /* Tighter spacing */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  section, .section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* Forms full width */
  .loginSec .w-75,
  .registrationSec .w-75 {
    width: 100% !important;
    padding: 0 10px;
  }

  /* Side-by-side buttons stack vertically */
  .btn-group,
  .form-inline {
    flex-direction: column;
    width: 100%;
  }
  .btn-group .btn,
  .form-inline .btn {
    width: 100%;
    margin-bottom: 8px;
  }

  /* Minimum touch target size */
  .btn, button, a.btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* FAQ accordion readability */
  .accordion .btn, .accordion .btn-link {
    font-size: 14px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Footer stacking */
  footer .col-md-3,
  footer .col-md-4,
  footer .col-md-6,
  footer .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
}

/* --- Extra Small Mobile (max-width: 400px) --- */
@media (max-width: 400px) {
  /* Navbar brand */
  header .navbar .navbar-brand {
    width: 120px !important;
  }

  /* Even tighter spacing */
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Typography for very small screens */
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  body, p { font-size: 14px; }

  /* Cards full width */
  .card, .blog-card {
    margin-left: 0;
    margin-right: 0;
  }

  /* CTA buttons full width */
  .vs-cta-section .btn-cta,
  .vs-home-hero .btn-hero {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 6px 0;
    padding: 12px 20px;
  }
}

/* ============================================================
   STAY INFORMED BLOG CARDS - Responsive Image Heights
   ============================================================ */
.vs-si-card img {
  transition: transform 0.5s ease;
}
.vs-si-card:hover img {
  transform: scale(1.05);
}
@media (max-width: 991px) {
  #vs-stay-informed-cards .vs-si-card img {
    height: 200px !important;
  }
}
@media (max-width: 768px) {
  #vs-stay-informed-cards .vs-si-card img {
    height: 190px !important;
  }
}
@media (max-width: 576px) {
  #vs-stay-informed-cards .vs-si-card img {
    height: 200px !important;
  }
  #vs-stay-informed-cards .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 400px) {
  #vs-stay-informed-cards .vs-si-card img {
    height: 180px !important;
  }
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVE HARDENING (2026-04)
   Fixes content misalignment on iPhone SE, Pixel, Motorola Edge
   Fusion and other ≤480px devices. Also guards narrow tablets
   (≤767px) and large phones (≤600px). Targets real inline-style
   patterns used across ihmmaintenance, circulareconomy, VSMPS,
   VSLCA, and every other content page on the site.
   ============================================================ */

/* ---- 1. Viewport-safe text wrapping ---- */
body, p, li, a, span, strong, em, td, th, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
p a[href^="mailto:"], p a[href^="http"], code, pre, .news-source-link {
  word-break: break-word;
}

/* ---- 2. VSMPS sub-navigation — wrap buttons on narrow screens ---- */
@media (max-width: 767px) {
  nav[style*="background:linear-gradient(135deg,#0d3c55"] {
    padding: 8px 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  nav[style*="background:linear-gradient(135deg,#0d3c55"] > a {
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  nav[style*="background:linear-gradient(135deg,#0d3c55"] > a {
    flex: 1 1 calc(50% - 6px) !important;
    padding: 9px 10px !important;
    font-size: 11.5px !important;
    text-align: center;
    justify-content: center;
  }
}

/* ---- 3. Footer links grid — collapse columns on mobile ---- */
@media (max-width: 575px) {
  .row.footer-links-grid > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .row.footer-links-grid strong {
    font-size: 14px !important;
    display: block;
    margin-bottom: 6px;
  }
  .row.footer-links-grid a {
    font-size: 13px !important;
    line-height: 1.9;
    display: inline-block;
  }
}
@media (max-width: 767px) and (min-width: 576px) {
  .row.footer-links-grid > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 12px !important;
  }
}

/* ---- 4. Hero / middlepart / CTA section padding reduction ---- */
@media (max-width: 767px) {
  .middlepart,
  section[class*="hero"],
  .vs-home-hero,
  .news-cta,
  .news-hero,
  .news-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  section[style*="padding:80px"],
  section[style*="padding:70px"],
  section[style*="padding:60px"],
  section[style*="padding: 80px"],
  section[style*="padding: 70px"],
  section[style*="padding: 60px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .container, .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
@media (max-width: 480px) {
  .middlepart,
  section[class*="hero"],
  .vs-home-hero,
  .news-cta,
  .news-hero,
  .news-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* ---- 5. Inline-style CTA buttons — stack on mobile ---- */
@media (max-width: 575px) {
  /* Hero / section CTAs that were set inline to inline-block */
  a[style*="padding:13px 32px"],
  a[style*="padding: 13px 32px"],
  a[style*="padding:14px 36px"],
  a[style*="padding: 14px 36px"] {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 8px auto !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ---- 6. Typography clamps — h1/h2/h3 on narrow viewports ---- */
@media (max-width: 767px) {
  h1[style*="font-size:2rem"],
  h1[style*="font-size: 2rem"],
  h2[style*="font-size:2rem"],
  h2[style*="font-size: 2rem"] {
    font-size: clamp(1.35rem, 5vw, 1.8rem) !important;
    line-height: 1.25 !important;
  }
  h1, .hero h1, .middlepart h1, .news-hero h1 {
    font-size: clamp(1.4rem, 5.5vw, 2.2rem) !important;
    line-height: 1.2 !important;
  }
  h2 {
    font-size: clamp(1.2rem, 4.5vw, 1.7rem) !important;
    line-height: 1.25 !important;
  }
  h3 {
    font-size: clamp(1rem, 4vw, 1.4rem) !important;
    line-height: 1.3 !important;
  }
}

/* ---- 7. Max-width containers — never exceed viewport ---- */
@media (max-width: 767px) {
  [style*="max-width:900px"],
  [style*="max-width: 900px"],
  [style*="max-width:800px"],
  [style*="max-width: 800px"],
  [style*="max-width:700px"],
  [style*="max-width: 700px"],
  [style*="max-width:600px"],
  [style*="max-width: 600px"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ---- 8. Images and video — never overflow ---- */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  img[width], img[height] {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ---- 9. Table horizontal scroll wrapper ---- */
@media (max-width: 767px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ---- 10. Dropdown / nav items — prevent tiny font on mobile ---- */
@media (max-width: 480px) {
  .dropdown-item,
  .dropdown-menu a,
  .dropdown-menu [style*="font-size:10px"],
  .dropdown-menu [style*="font-size: 10px"] {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

/* ---- 11. Form inputs — ≥16px to suppress iOS auto-zoom ---- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ---- 12. VS Solutions feature rows (VSLCA page) ---- */
@media (max-width: 767px) {
  .col-md-6[style*="padding-right:30px"],
  .col-md-6[style*="padding-left:30px"],
  .col-md-6[style*="padding-right: 30px"],
  .col-md-6[style*="padding-left: 30px"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 20px;
  }
}

/* ---- 13. Ensure horizontal scroll is never possible ---- */
html, body {
  overflow-x: clip !important;
  max-width: 100vw;
}
* { max-width: 100%; }
/* undo the universal max-width for layout helpers that legitimately overflow */
.navbar-nav, .dropdown-menu, .modal, .modal-dialog, .modal-content,
.slick-slider, .slick-track, .slick-list, .slick-slide,
.vs-chat-window, .vs-chat-launcher, .vs-chat-tooltip,
#particles-js, #tsparticles, .hero-bg-video, iframe { max-width: none; }
/* NOTE (2026-04-15): Leaflet map internals (marker icons, tiles, panes,
   popups, controls) live inside absolutely-positioned zero-width panes.
   The universal `* { max-width: 100% }` rule above collapses their
   widths to 0 or a few pixels, making the Global Maritime Network map
   markers invisible on the homepage. Exempt the entire Leaflet subtree. */
.leaflet-container,
.leaflet-container * {
  max-width: none !important;
}

/* ---- 14. Chatbot launcher never overlaps mobile sub-nav ---- */
@media (max-width: 480px) {
  .vs-chat-launcher { bottom: 14px; right: 12px; }
}

/* ---- 15. Buttons inside containers — prevent squish ---- */
@media (max-width: 480px) {
  .btn, button:not(.vs-chat-tab-btn):not(.news-filter-btn):not(.vs-chat-star) {
    min-height: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .btn-group, .d-flex.flex-row {
    flex-wrap: wrap;
  }
}
/* ============================================================
   END MOBILE RESPONSIVE HARDENING
   ============================================================ */

/* ============================================================
   HERO INTERACTIVE WHEEL (middlepart-esg) — mobile rescue
   Applies to ihmmaintenance, circulareconomy, esg, esg-portal,
   and any page using the "#main_circle .flower" layout with
   absolute-positioned #display_box elements.
   ============================================================ */

/* Desktop wheel keeps its 700px container until 1199px; below that
   the page CSS uses @media 820/853/767/576/500/476/450/400 in a
   patchwork that leaves .container-esg at width:700px far too long.
   Force the container to collapse cleanly from <=1199px. */
@media (max-width: 1199px) {
  .middlepart-esg .container-esg,
  .middlepart .container-esg {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    right: auto !important;
    left: auto !important;
    padding: 0 15px !important;
  }
}

/* Tablet + phone — lay the wheel over its display boxes naturally */
@media (max-width: 991px) {
  .middlepart,
  .middlepart-esg {
    padding-top: 30px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }
  .middlepart-esg .container-esg,
  .middlepart .container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    right: auto !important;
    padding: 0 15px !important;
  }
  /* Circle — shrink and center */
  #main_circle,
  .middlepart #main_circle,
  .middlepart-esg #main_circle {
    position: relative !important;
    width: min(320px, 85vw) !important;
    height: min(320px, 85vw) !important;
    margin: 20px auto 30px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
  }
  /* Display boxes — normalise from absolute to in-flow so they can't
     overflow off the viewport, and kill the rogue 200% margin */
  #display_box,
  #display_box1,
  .middlepart-esg .container-esg #display_box,
  .middlepart-esg .container-esg #display_box1,
  .middlepart .container #display_box,
  .middlepart .container #display_box1 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 16px 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow-x: clip !important;
    box-sizing: border-box;
    padding: 12px 14px !important;
  }
  #display_box .links,
  #display_box1 .links,
  .middlepart-esg .container-esg #display_box .links,
  .middlepart-esg .container-esg #display_box1 .links {
    width: 50% !important;
    height: auto !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
  }
}
@media (max-width: 575px) {
  #main_circle,
  .middlepart #main_circle,
  .middlepart-esg #main_circle {
    width: min(280px, 82vw) !important;
    height: min(280px, 82vw) !important;
    margin: 16px auto 24px !important;
  }
  #main_circle span,
  .container #main_circle span {
    font-size: 9px !important;
  }
  #display_box .links,
  #display_box1 .links {
    width: 100% !important;
    display: block !important;
  }
}

/* Neutralise the rogue "margin-left: 200%" rule from ihmmaintenance.css:1695 */
@media (max-width: 767px) {
  .middlepart #display_box,
  .middlepart #display_box1,
  .cmr-sec #display_box,
  .cmr-sec #display_box1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* containFy + cme-part containers — force full width on mobile */
@media (max-width: 767px) {
  .containFy, .cme-part .container, .cmr-sec .container, .cmr_sec .container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .mt-4 {
    margin-top: 20px !important;
  }
}

/* ============================================================
   END HERO WHEEL MOBILE RESCUE
   ============================================================ */

/* ============================================================
   BROAD VSMPS SECTION RESCUE — covers home/buyer/supplier
   ============================================================ */
@media (max-width: 767px) {
  .hero-banner, .section-hero, .stats-section, .section-become,
  .image-slideshow-section, .carbon-slideshow-section,
  .workflow-container, .combined-workflow, .platform-info,
  .vs-clients-section, .buyer-guide-section, .supplier-guide-section,
  .categories-brands-grid, .faq-section, .cta-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }
  .hero-banner .hero-content,
  .section-hero .hero-content { padding: 24px 14px !important; }

  /* Kill any row / grid that has rigid minmax(300, 1fr) et al. */
  .workflow-container, .combined-workflow {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  /* VSMPS sub-nav inline gradient — ensure wrap */
  nav[style*="background:linear-gradient(135deg,#0d3c55"] {
    padding: 8px 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  nav[style*="background:linear-gradient(135deg,#0d3c55"] > a {
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  nav[style*="background:linear-gradient(135deg,#0d3c55"] > a {
    flex: 1 1 calc(50% - 6px) !important;
    padding: 10px 8px !important;
    font-size: 11.5px !important;
    text-align: center;
    justify-content: center;
  }
  .hero-banner, .section-hero, .stats-section, .section-become,
  .image-slideshow-section, .carbon-slideshow-section,
  .workflow-container, .combined-workflow, .platform-info,
  .vs-clients-section, .buyer-guide-section, .supplier-guide-section,
  .categories-brands-grid, .faq-section, .cta-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}
/* ============================================================
   END BROAD VSMPS SECTION RESCUE
   ============================================================ */

/* ============================================================
   WORKFLOW / STEP / BLOCK RESCUE (VSMPS + generic)
   The probe found .workflow-flow.row with flex-wrap:nowrap and
   .step { min-width: 230px } forcing 4 steps in a single row
   ~1100px wide — overflowing every phone viewport.
   ============================================================ */
@media (max-width: 991px) {
  .workflow-flow, .workflow-flow.row, .workflow-flow.row.reverse,
  .platform-columns,
  .steps-row, .process-steps, .buyer-static-steps, .supplier-static-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  .step, .block, .block.fade, .platform-box {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
  }
}
@media (max-width: 767px) {
  .workflow-flow, .workflow-flow.row, .workflow-flow.row.reverse,
  .platform-columns,
  .steps-row, .process-steps, .buyer-static-steps, .supplier-static-steps {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .step, .block, .block.fade, .platform-box {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    padding: 16px !important;
  }
  /* Tooltips that float above steps — just force-hide on mobile where they
     have no hover target anyway */
  .step .tooltip { display: none !important; }
  /* Arrow-down between horizontal steps — rotate to vertical on mobile */
  .arrow-down, .arrow { transform: rotate(90deg) !important; margin: 4px 0 !important; }
}

/* ---- #particles-js overflow guard ---- */
#particles-js, #tsparticles {
  left: 0 !important;
  right: 0 !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}
#particles-js canvas, #tsparticles canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ---- Final belt-and-braces for the entire site:
   any element with a stuck vs-anim transform never blocks layout ---- */
@media (max-width: 991px) {
  [class*="vs-anim"],
  [class*="vs-stagger"] {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ============================================================
   END WORKFLOW + PARTICLES + ANIMATION RESCUE
   ============================================================ */

/* ============================================================
   FINAL POLISH — extreme narrow viewports (Galaxy Fold 280 etc.)
   ============================================================ */

/* Service wheel inner circle + hover dropdowns */
@media (max-width: 575px) {
  #inner_circle, .circle-rotation {
    width: min(260px, 80vw) !important;
    height: min(260px, 80vw) !important;
    max-width: 80vw !important;
    max-height: 80vw !important;
  }
  /* NOTE (2026-04-15): removed a rule here that hid .showInfo /
     .showInfo2 (the circle child wrappers) entirely on phones —
     it was meant to hide the .block_details dropdowns inside the
     children, but it took out the icon wrappers too, leaving the
     mobile flower wheel with no icons at all. .block_details is
     already display:none by default (custom.css .middlepart
     .block_details), so nothing further is needed. */
  /* #display_box already converted to inline-flow above */
}

/* Slideshow block edge-safe */
@media (max-width: 575px) {
  .slideshow-block, .carbon-slideshow-block,
  .slideshow-container, .carbon-slideshow-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}

/* Ultra-narrow (≤ 360 px) — last-resort tightening */
@media (max-width: 360px) {
  body { font-size: 14px; }
  .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
  h1 { font-size: clamp(1.2rem, 6vw, 1.6rem) !important; }
  h2 { font-size: clamp(1.1rem, 5vw, 1.4rem) !important; }
  h3 { font-size: clamp(1rem, 4.5vw, 1.25rem) !important; }
  #main_circle { width: min(230px, 78vw) !important; height: min(230px, 78vw) !important; }
  .vs-chat-launcher { bottom: 12px; right: 8px; }
  .vs-chat-toggle { width: 46px; height: 46px; }
}
/* ============================================================
   END FINAL POLISH
   ============================================================ */

/* ============================================================
   FOOTER LEGAL LINKS BAR (2026-04)
   Targets the .col-md-8 > ul block with terms / privacy /
   cookie / gdpr / © / All Rights Reserved across every page.
   Fully responsive + themed + subtle fade-in + hover underline.
   ============================================================ */

/* Reset the existing inline-block + pipe separators for the legal
   bar specifically (social bar in col-md-4 keeps its own rules) */
footer .col-md-8 > ul {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  font-family: 'Poppins', sans-serif;
  animation: vs-footer-fade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

/* Kill the pipe pseudo-elements from the generic footer rule */
footer .col-md-8 > ul > li:after {
  display: none !important;
  content: none !important;
}

footer .col-md-8 > ul > li {
  display: inline-flex !important;
  align-items: center;
  color: #6c7a8d;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  position: relative;
  line-height: 1.4;
}

/* Animated underline on hover */
footer .col-md-8 > ul > li > a {
  color: #335596;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 1px;
  position: relative;
  transition: color 0.25s ease;
  text-transform: none !important;
}
footer .col-md-8 > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, #74c5b5, #335596);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
footer .col-md-8 > ul > li > a:hover,
footer .col-md-8 > ul > li > a:focus-visible {
  color: #74c5b5;
  text-decoration: none;
}
footer .col-md-8 > ul > li > a:hover::after,
footer .col-md-8 > ul > li > a:focus-visible::after {
  transform: scaleX(1);
}

/* Copyright + Rights items — visually distinct (not anchors) */
footer .col-md-8 > ul > li:nth-last-child(2),
footer .col-md-8 > ul > li:last-child {
  color: #9aa5b8;
  font-size: 11.5px;
  font-weight: 500;
}
footer .col-md-8 > ul > li:nth-last-child(2) {
  margin-left: auto;   /* push copyright + ARR to the far right on wide viewports */
  padding-left: 18px;
  border-left: 1px solid #e3e8f0;
}

/* Mobile: stack cleanly, center, and keep animations snappy */
@media (max-width: 767px) {
  footer .row {
    margin-left: 0;
    margin-right: 0;
  }
  footer .col-md-8,
  footer .col-md-4 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  footer .col-md-8 > ul {
    justify-content: center;
    gap: 8px 16px;
    padding: 10px 0 6px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 12px;
  }
  footer .col-md-8 > ul > li {
    font-size: 12px;
  }
  footer .col-md-8 > ul > li:nth-last-child(2) {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
  footer .col-md-8 > ul > li:last-child {
    width: 100%;
    justify-content: center;
    font-size: 11px;
  }
  /* Center social icons */
  footer ul.social {
    text-align: center !important;
    margin-top: 8px !important;
  }
  footer ul.social li {
    display: inline-block !important;
  }
}

@media (max-width: 480px) {
  footer .col-md-8 > ul {
    gap: 6px 14px;
  }
  footer .col-md-8 > ul > li {
    font-size: 11.5px;
  }
  footer .col-md-8 > ul > li > a {
    font-size: 12px;
  }
}

/* Fade-in keyframe */
@keyframes vs-footer-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dark mode */
body.vs-dark footer {
  background: #0f172a;
  background-image: linear-gradient(180deg, #0a1020 0%, #0f172a 60%);
  border-top-color: #1e293b;
}
body.vs-dark footer .col-md-8 > ul > li { color: #94a3b8; }
body.vs-dark footer .col-md-8 > ul > li > a { color: #cbd5e1; }
body.vs-dark footer .col-md-8 > ul > li > a:hover { color: #74c5b5; }
body.vs-dark footer .col-md-8 > ul > li:nth-last-child(2),
body.vs-dark footer .col-md-8 > ul > li:last-child { color: #64748b; }
body.vs-dark footer .col-md-8 > ul > li:nth-last-child(2) { border-left-color: #1e293b; }
/* ============================================================
   END FOOTER LEGAL LINKS BAR
   ============================================================ */

/* ============================================================
   REAL MOBILE OVERLAP FIXES (2026-04, post-headless-probe)
   The headless overlap probe found three actual collisions:
   1. vsmps home — .hero-banner min-height:80vh traps content
   2. vsmps buyer/supplier — .section-hero fixed height +
      .overlay-content position:absolute traps content inside
      a 520px box that overflows the hero and bleeds into the
      next section
   3. ihm/circ — #center_circle transform:translate(0,187px)
      pushes the center circle below the shrunken wheel on mobile
   ============================================================ */

/* ---- VSMPS home — let hero grow, force content visible ---- */
@media (max-width: 991px) {
  .hero-banner, .hero-section {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    padding: 0 !important;
  }
  .hero-banner .hero-bg, .hero-section .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }
  .hero-banner .hero-content, .hero-section .hero-content {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 36px 18px !important;
    max-width: 100% !important;
  }
  .hero-banner .hero-dimmer, .hero-section .hero-dimmer {
    z-index: 1 !important;
  }
  .hero-heading, .hero-subhead, .hero-cta,
  .hero-heading *, .hero-subhead * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- VSMPS buyer/supplier — un-trap the overlay content ---- */
@media (max-width: 991px) {
  .section-hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    display: block !important;
  }
  .section-hero .background-image {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    max-height: 40vh !important;
    z-index: 1 !important;
  }
  .section-hero .background-image img {
    height: 100% !important;
    object-fit: cover;
  }
  .section-hero .overlay-content {
    position: relative !important;
    inset: auto !important;
    padding: 30px 18px !important;
    background-color: rgba(30, 96, 96, 0.95) !important;
    display: block !important;
    z-index: 2 !important;
  }
  .section-hero .overlay-content .left-content,
  .section-hero .overlay-content .right-content {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
  }
  .section-hero .overlay-content h1,
  .section-hero .overlay-content p {
    opacity: 1 !important;
    transform: none !important;
  }
  .section-hero .overlay-content .button-container,
  .section-hero .overlay-content .button-container-buyer,
  .section-hero .overlay-content .button-container-supplier {
    position: relative !important;
    margin-top: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}
@media (max-width: 767px) {
  .section-hero .background-image { height: 180px !important; }
}

/* ---- ihmmaintenance + circulareconomy — center circle alignment ---- */
@media (max-width: 991px) {
  .middlepart-esg #center_circle,
  .middlepart #center_circle {
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    width: min(110px, 40%) !important;
    height: min(110px, 40%) !important;
  }
  .middlepart-esg #inner_circle,
  .middlepart #inner_circle {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
}
@media (max-width: 575px) {
  .middlepart-esg #center_circle,
  .middlepart #center_circle {
    width: min(90px, 35%) !important;
    height: min(90px, 35%) !important;
  }
}

/* ---- Kill any orphaned opacity:0 that relies on a never-fired animation ---- */
@media (max-width: 991px) {
  .hero-content, .overlay-content, .left-content, .right-content,
  .section-hero *, .hero-banner *, .hero-section * {
    opacity: 1 !important;
  }
}
/* ============================================================
   END REAL MOBILE OVERLAP FIXES
   ============================================================ */

/* ============================================================
   MOBILE ALIGNMENT FIX (2026-04-15) — IHM / Circular flower wheel
   ------------------------------------------------------------
   Root cause of "UI disturbed" on mobile (VS_Mobile_UI_Test_Report
   item #1 for ihmmaintenance, and the same pattern in
   circulareconomy): the desktop flower is 440x440 with 9 (IHM)
   or 17 (CME) children positioned absolutely AND individually
   rotated via `transform: rotate()` for that exact 440 px radius.
   Older mobile CSS in this file shrank the container to 280-320 px
   via `width: min(...)` but left the children at their 440-based
   offsets, so icons drift off the circle. A parallel attempt in
   the page CSS hand-positioned every child with !important, which
   collides with the per-child rotation baked into the base rules.
   ------------------------------------------------------------
   Fix: restore the 440 px container on mobile and proportionally
   scale the entire flower (container + children + rotations) via
   the CSS `zoom` property. `zoom` composes with the inline
   `transform: rotate(...)` set by assets/js/index.js click
   handler, so the click-to-spin behaviour keeps working.
   `zoom` is supported in Chrome/Edge/Safari and Firefox 126+.
   This block is intentionally placed at the END of custom.css
   so it wins the cascade over the earlier HERO WHEEL rescue.
   ============================================================ */
@media (max-width: 991px) {
  /* --- IHM Maintenance page flower --- */
  .middlepart #main_circle,
  .middlepart-esg #main_circle {
    width: 440px !important;
    height: 440px !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 20px auto 24px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
    zoom: 0.7;
  }

  /* --- Circular Maritime Economy flower --- */
  .cmr_sec #main_circle,
  .cmr-sec #main_circle {
    width: 440px !important;
    height: 440px !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 20px auto 24px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
    zoom: 0.7;
  }

  /* Decorative inner rings / hover halos don't track zoom cleanly
     because they're siblings of #main_circle — hide on phones. */
  .middlepart #inner_circle,
  .middlepart #center_circle,
  .middlepart #hover_effect,
  .middlepart-esg #inner_circle,
  .middlepart-esg #center_circle,
  .middlepart-esg #hover_effect,
  .cmr_sec #inner_circle,
  .cmr_sec #center_circle,
  .cmr_sec #hover_effect,
  .cmr-sec #inner_circle,
  .cmr-sec #center_circle,
  .cmr-sec #hover_effect {
    display: none !important;
  }

  /* Give the hero section room to breathe + stop clipping */
  .middlepart,
  .middlepart-esg,
  .cme_part,
  .cme-part,
  section.common.cme_part {
    height: auto !important;
    min-height: auto !important;
    padding-top: 30px !important;
    padding-bottom: 40px !important;
    overflow: visible !important;
  }
  .middlepart .container,
  .middlepart-esg .container,
  .cme_part .container,
  .cme-part .container {
    height: auto !important;
    overflow: visible !important;
  }
  .middlepart .h75 {
    height: auto !important;
    min-height: auto !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 575px) {
  .middlepart #main_circle,
  .middlepart-esg #main_circle,
  .cmr_sec #main_circle,
  .cmr-sec #main_circle {
    zoom: 0.62;
    margin: 14px auto 18px !important;
  }
}

@media (max-width: 380px) {
  .middlepart #main_circle,
  .middlepart-esg #main_circle,
  .cmr_sec #main_circle,
  .cmr-sec #main_circle {
    zoom: 0.55;
  }
}

/* Firefox < 126 fallback: it doesn't support `zoom`, but it DOES
   honour the earlier HERO WHEEL rescue rules (min(320px,85vw)).
   For those users the circle renders with the old children
   offsets, which is the pre-fix behaviour — not worse than before. */

/* About module reliability for both pages */
@media (max-width: 767px) {
  .aboutus_sec {
    margin: 24px 0 14px !important;
    padding: 0 14px !important;
    text-align: center;
  }
  .aboutus_sec .titleheader,
  section.aboutus_sec + .module-container,
  .module-container .titleheader {
    font-size: 20px !important;
  }
  .module-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 14px !important;
    margin: 0 auto !important;
    gap: 12px;
  }
  .module-container .module-card {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================
   END MOBILE ALIGNMENT FIX (2026-04-15)
   ============================================================ */

/* ============================================================
   LATEST FROM OUR CHANNELS — themed, animated, responsive
   ============================================================ */
.vs-channels {
  padding: 54px 0 48px;
  background:
    radial-gradient(1200px 400px at 10% 0%, rgba(116,197,181,0.12), transparent 60%),
    radial-gradient(1000px 400px at 100% 100%, rgba(51,85,150,0.10), transparent 60%),
    #f7fafc;
  position: relative;
  overflow: hidden;
}
.vs-channels::before,
.vs-channels::after {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.vs-channels::before { top: -80px; left: -80px; background: #74c5b5; animation: vs-ch-pulse 9s ease-in-out infinite; }
.vs-channels::after  { bottom: -100px; right: -80px; background: #335596; animation: vs-ch-pulse 11s ease-in-out infinite reverse; }

.vs-channels > .container { position: relative; z-index: 1; }

.vs-channels-header { text-align: center; margin-bottom: 28px; }
.vs-channels-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #335596;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  display: inline-block;
  position: relative;
}
.vs-channels-header h2::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  background: linear-gradient(90deg, #74c5b5, #335596);
  border-radius: 2px;
  margin: 10px auto 0;
}
.vs-channels-header p {
  color: #5a6878;
  font-size: 14px;
  margin: 0;
  max-width: 680px;
  margin-left: auto; margin-right: auto;
}

.vs-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.vs-channel-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(51,85,150,0.08), 0 0 0 1px rgba(51,85,150,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
  animation: vs-ch-rise 0.6s cubic-bezier(.2,.8,.2,1) both;
}
.vs-channel-card:nth-child(1) { animation-delay: 0s; }
.vs-channel-card:nth-child(2) { animation-delay: .1s; }
.vs-channel-card:nth-child(3) { animation-delay: .2s; }

.vs-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(51,85,150,0.14), 0 0 0 1px rgba(116,197,181,0.3);
}

.vs-channel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(51,85,150,0.08);
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.vs-channel-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #335596;
  line-height: 1.1;
}
.vs-channel-head .vs-channel-sub {
  display: block;
  font-size: 11px;
  color: #74c5b5;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 2px;
}
.vs-channel-head > div { flex: 1; min-width: 0; }

.vs-channel-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.vs-channel-card:hover .vs-channel-badge { transform: rotate(-8deg) scale(1.06); }

.vs-channel-yt .vs-channel-badge { background: linear-gradient(135deg, #FF0000, #c10000); }
.vs-channel-tw .vs-channel-badge { background: linear-gradient(135deg, #111, #333); }
.vs-channel-in .vs-channel-badge { background: linear-gradient(135deg, #0077B5, #004c73); }

.vs-channel-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #335596;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(51,85,150,0.2);
  background: #fff;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.vs-channel-cta i { font-size: 10px; transition: transform 0.3s ease; }
.vs-channel-cta:hover {
  color: #fff;
  background: linear-gradient(90deg, #74c5b5, #335596);
  border-color: transparent;
  transform: translateX(2px);
  box-shadow: 0 6px 14px rgba(51,85,150,0.2);
}
.vs-channel-cta:hover i { transform: translateX(3px); }

.vs-channel-body { padding: 0; flex: 1; min-height: 0; }
.vs-channel-embed {
  position: relative;
  background: #0d0d0d;
}
.vs-channel-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* X timeline embed — scrollable box, themed border */
.vs-channel-tw-embed {
  padding: 10px 14px 14px;
  background: #ffffff;
  max-height: 360px;
  overflow: auto;
}
.vs-channel-tw-embed::-webkit-scrollbar { width: 6px; }
.vs-channel-tw-embed::-webkit-scrollbar-thumb { background: rgba(51,85,150,0.3); border-radius: 3px; }

/* LinkedIn body — action chips */
.vs-channel-in-body { padding: 14px; }
.vs-in-cta-grid { display: flex; flex-direction: column; gap: 8px; }
.vs-in-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f7fafc, #eef5f3);
  text-decoration: none;
  border: 1px solid rgba(51,85,150,0.08);
  transition: all 0.3s ease;
}
.vs-in-chip i {
  color: #0077B5;
  font-size: 18px;
  width: 24px; text-align: center;
  transition: transform 0.3s ease;
}
.vs-in-chip span { display: flex; flex-direction: column; line-height: 1.2; }
.vs-in-chip strong { font-size: 13px; color: #335596; font-weight: 700; }
.vs-in-chip em { font-size: 11px; color: #74c5b5; font-style: normal; font-weight: 600; letter-spacing: 0.3px; margin-top: 2px; }
.vs-in-chip:hover {
  background: linear-gradient(90deg, #ffffff, #e9f4f1);
  border-color: rgba(116,197,181,0.45);
  transform: translateX(3px);
  box-shadow: 0 6px 14px rgba(51,85,150,0.1);
}
.vs-in-chip:hover i { transform: scale(1.15) rotate(-5deg); }

.vs-channel-secondary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(51,85,150,0.08);
  background: #fbfdff;
  font-size: 11px;
  color: #5a6878;
}
.vs-channel-secondary a {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14px;
}
.vs-channel-secondary a[aria-label="Instagram"] { color: #E1306C; background: rgba(225,48,108,0.08); }
.vs-channel-secondary a[aria-label="Facebook"]  { color: #1877F2; background: rgba(24,119,242,0.08); }
.vs-channel-secondary a:hover { transform: translateY(-2px) scale(1.1); color: #fff; }
.vs-channel-secondary a[aria-label="Instagram"]:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.vs-channel-secondary a[aria-label="Facebook"]:hover { background: #1877F2; }
.vs-channel-secondary span { margin-left: auto; font-style: italic; }

/* Keyframes */
@keyframes vs-ch-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vs-ch-pulse {
  0%,100% { transform: translate(0,0) scale(1); opacity: 0.35; }
  50%     { transform: translate(10px,-6px) scale(1.08); opacity: 0.5; }
}

/* Responsive */
@media (max-width: 991px) {
  .vs-channels { padding: 42px 0 36px; }
  .vs-channels-header h2 { font-size: 24px; }
}
@media (max-width: 767px) {
  .vs-channels-grid { gap: 16px; }
  .vs-channel-head { padding: 12px 14px; gap: 10px; }
  .vs-channel-badge { width: 36px; height: 36px; font-size: 16px; }
  .vs-channel-cta { padding: 5px 10px; font-size: 11px; }
  .vs-channel-cta span { display: none; }
}
@media (max-width: 480px) {
  .vs-channel-tw-embed { max-height: 320px; }
}

/* Dark mode */
body.vs-dark .vs-channels { background:
  radial-gradient(1200px 400px at 10% 0%, rgba(116,197,181,0.15), transparent 60%),
  radial-gradient(1000px 400px at 100% 100%, rgba(51,85,150,0.20), transparent 60%),
  #0f1626; }
body.vs-dark .vs-channels-header h2 { color: #e0e8f0; }
body.vs-dark .vs-channels-header p { color: #8899aa; }
body.vs-dark .vs-channel-card { background: #1a2640; box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(116,197,181,0.12); }
body.vs-dark .vs-channel-head { background: linear-gradient(180deg, #1c2a46 0%, #1a2640 100%); border-bottom-color: rgba(116,197,181,0.15); }
body.vs-dark .vs-channel-head h3 { color: #e0e8f0; }
body.vs-dark .vs-channel-cta { background: #1a2640; color: #74c5b5; border-color: rgba(116,197,181,0.3); }
body.vs-dark .vs-in-chip { background: #141d30; border-color: rgba(116,197,181,0.12); }
body.vs-dark .vs-in-chip strong { color: #e0e8f0; }
body.vs-dark .vs-channel-secondary { background: #141d30; border-top-color: rgba(116,197,181,0.15); color: #8899aa; }
body.vs-dark .vs-channel-tw-embed { background: #1a2640; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vs-channel-card, .vs-channels::before, .vs-channels::after,
  .vs-channel-badge, .vs-channel-cta, .vs-channel-cta i,
  .vs-in-chip, .vs-in-chip i, .vs-channel-secondary a { animation: none !important; transition: color 0.2s ease, background 0.2s ease; }
  .vs-channel-card:hover, .vs-channel-card:hover .vs-channel-badge,
  .vs-channel-cta:hover, .vs-in-chip:hover, .vs-channel-secondary a:hover { transform: none; }
}

/* ===================================================================
   VS Theme — standardised button colour (#74c5b5 teal accent)
   Applies to: primary CTAs, form submits, "learn more", news filters,
   schedule-meeting links, footer CTAs, newsletter submit.
   EXCLUDES: social-platform brand buttons (LinkedIn/FB/IG/YT/X keep
   their brand colours), destructive/danger buttons, and nav-bar pills
   whose hover state already uses the teal.
   =================================================================== */
:root {
  --vs-btn: #74c5b5;
  --vs-btn-hover: #5fb3a3;
  --vs-btn-active: #4fa495;
  --vs-btn-text: #ffffff;
}

/* Global button standardisation */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn.btn-primary,
input[type="submit"]:not(.vs-nl-submit):not(.vs-social-btn),
button[type="submit"]:not(.vs-nl-submit):not(.vs-social-btn),
.links,
.news-cta-btn,
.news-cta-btn-outline:hover,
.vs-nl-submit,
.vs-explore-all-btn,
.vs-ev-meet-btn.primary,
.vs-ev-meet-btn.secondary:hover,
.news-filter-btn.active,
.news-filter-btn:hover,
.vs-sol-card:hover .vs-sol-icon,
.vs-subscribe-eyebrow:hover,
.vs-book-demo,
.vs-share-btn:not([style*="background:#0a66c2"]):not([style*="background:#000"]):not([style*="background:#25d366"]):not([style*="background:#335596"]):not([style*="background:#fff"]):not([style*="background:#1877f2"]):not([style*="background:#ff0000"]):not([style*="linear-gradient(135deg,#833ab4"]) {
  background: var(--vs-btn) !important;
  color: var(--vs-btn-text) !important;
  border-color: var(--vs-btn) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
a.btn-primary:hover, a.btn-primary:focus,
.btn.btn-primary:hover, .btn.btn-primary:focus,
.links:hover, .links:focus,
.news-cta-btn:hover, .news-cta-btn:focus,
.vs-nl-submit:hover, .vs-nl-submit:focus,
.vs-explore-all-btn:hover,
.vs-ev-meet-btn.primary:hover,
.news-filter-btn.active:hover {
  background: var(--vs-btn-hover) !important;
  border-color: var(--vs-btn-hover) !important;
  color: var(--vs-btn-text) !important;
}

.btn-primary:active, a.btn-primary:active, .btn.btn-primary:active,
.links:active, .news-cta-btn:active {
  background: var(--vs-btn-active) !important;
  border-color: var(--vs-btn-active) !important;
}

/* Bootstrap focus ring in theme colour */
.btn-primary:focus, .btn-primary.focus,
a.btn-primary:focus, a.btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(116,197,181,0.35) !important;
}

/* Link-style "learn more" arrows — keep teal */
.vs-sol-link, .vs-channel-cta, .news-source-link, .vs-ev-link {
  color: var(--vs-btn);
}
.vs-sol-link:hover, .vs-channel-cta:hover, .news-source-link:hover, .vs-ev-link:hover {
  color: var(--vs-btn-active);
}

/* Disabled state — teal with reduced opacity */
.btn-primary:disabled, .vs-nl-submit:disabled {
  background: var(--vs-btn) !important;
  opacity: 0.55;
  cursor: not-allowed;
}

/* Secondary / outline variant — teal border + text */
.btn-outline-primary,
.btn.btn-outline-primary,
a.btn-outline-primary,
.news-cta-btn-outline {
  background: transparent !important;
  color: var(--vs-btn) !important;
  border: 2px solid var(--vs-btn) !important;
}
.btn-outline-primary:hover,
.btn.btn-outline-primary:hover,
a.btn-outline-primary:hover,
.news-cta-btn-outline:hover {
  background: var(--vs-btn) !important;
  color: var(--vs-btn-text) !important;
  border-color: var(--vs-btn) !important;
}

/* Cross-platform touch-target (mobile accessibility) */
.btn-primary, .btn-outline-primary, .links, .news-cta-btn, .vs-nl-submit,
.vs-explore-all-btn, .vs-ev-meet-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Legacy filled buttons that used dark navy as primary background — nudge to teal */
.btn.btn-info, button.btn-info {
  background: var(--vs-btn) !important;
  border-color: var(--vs-btn) !important;
  color: var(--vs-btn-text) !important;
}
.btn.btn-info:hover, button.btn-info:hover {
  background: var(--vs-btn-hover) !important;
  border-color: var(--vs-btn-hover) !important;
}

/* ============================================================
 * PERF v2 — content-visibility & containment for off-screen lists
 * Site-wide first-paint speedup. Browsers that don't support these
 * properties simply ignore them — zero risk.
 * Added 2026-04-27.
 * ============================================================ */
.news-card,
.vs-si-card,
.vs-blog-card,
.feature-card,
.testimonial-card,
.cert-card,
.client-logo,
.event-card,
article.vs-news-article,
.vs-channel-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

/* Image rendering hints for product/blog cards */
.news-card img,
.vs-si-card img,
.vs-blog-card img,
.feature-card img,
.event-card img {
  content-visibility: auto;
}

/* Global green portal/action button color */
.vs-portals-dropdown > .btn,
.vs-portals-dropdown > .btn.dropdown-toggle,
.vs-talk-dropdown > .vs-talk-toggle {
  background: #74c5b5 !important;
  color: #fff !important;
  border-color: #74c5b5 !important;
}

.vs-portals-dropdown > .btn:hover,
.vs-portals-dropdown > .btn:focus,
.vs-portals-dropdown > .btn.dropdown-toggle:hover,
.vs-portals-dropdown > .btn.dropdown-toggle:focus,
.vs-talk-dropdown > .vs-talk-toggle:hover,
.vs-talk-dropdown > .vs-talk-toggle:focus {
  background: #5fa99c !important;
  color: #fff !important;
  border-color: #5fa99c !important;
}

/* Prevent layout-shift on lazy-loaded images that ship width/height attrs */
img[loading="lazy"] { background: #f3f5f8; }

/* Reduce paint cost on long footers */
footer { contain: layout paint; }

/* Avoid forced reflow when WOW classes are still attached pre-init */
.wow:not(.animated) { will-change: transform, opacity; }

/* ============================================================
 * PERF v3 — Site-wide first-paint safety net (added 2026-04-27)
 * Mirrors the defensive rule applied to news-updates.html so every
 * page is guaranteed visible from the first paint, regardless of
 * external CSS readiness, WOW.js init state, or animation engines.
 * Browsers ignore unknown selectors gracefully — zero risk.
 * ============================================================ */
html, body, header, nav, main, section, article, footer, aside,
.container, .container-fluid, .row {
  visibility: visible !important;
}
/* WOW protection — never let .wow leave content invisible.
   Entrance animations still play via the .animated class trigger;
   we just ensure the default state is visible. */
.wow:not(.animated) { visibility: visible !important; }
/* Cap entrance-animation duration so a stalled animation never blocks paint */
.fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight,
.zoomIn, .slideInUp, .slideInDown, .slideInLeft, .slideInRight,
.bounceIn, .lightSpeedIn { animation-fill-mode: both; }
/* Strip stale inline visibility:hidden anywhere on the page */
*[style*="visibility:hidden"], *[style*="visibility: hidden"] { visibility: visible !important; }

/* ============================================================
 * Let's Talk navbar dropdown
 * Single CTA combining "Schedule a Demo" + "Schedule a Meeting"
 * + "Contact Us" + "WhatsApp". Lives inside the existing
 * .vs-portals-dropdown so Bootstrap handles click + we handle hover.
 * ============================================================ */
.vs-talk-dropdown { display: inline-block !important; position: relative; margin-left: 8px; }
.vs-talk-toggle {
  background: linear-gradient(135deg, #74c5b5, #5fa99c) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(116,197,181,0.35);
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.vs-talk-toggle:hover, .vs-talk-toggle:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(116,197,181,0.5);
  color: #fff !important;
  text-decoration: none !important;
  outline: none;
}
.vs-talk-toggle::after { display: none; }
.vs-talk-toggle i { font-size: 13px; }
.vs-talk-menu {
  min-width: 240px !important;
  border-radius: 12px !important;
  border: 1px solid #e8eef5 !important;
  box-shadow: 0 14px 36px rgba(51,85,150,0.18) !important;
  padding: 8px 0 !important;
  background: #fff !important;
  margin-top: 8px !important;
}
.vs-talk-item {
  padding: 11px 18px !important;
  color: #335596 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease;
  background: transparent;
}
.vs-talk-item i { color: #74c5b5; width: 16px; text-align: center; flex-shrink: 0; transition: color 0.18s ease; }
.vs-talk-item:hover, .vs-talk-item:focus-visible {
  background: rgba(116,197,181,0.10) !important;
  color: #1d3461 !important;
  text-decoration: none !important;
  outline: none;
}
.vs-talk-item:hover i { color: #5fa99c; }
.vs-talk-item + .vs-talk-item[href*="contactus"],
.vs-talk-item[href*="wa.me"] { border-top: 1px solid #eef2f7; margin-top: 0 !important; }
/* Desktop hover-to-open (matches the other VS dropdowns) */
@media (min-width: 992px) {
  .vs-talk-dropdown:hover > .dropdown-menu,
  .vs-talk-dropdown:focus-within > .dropdown-menu { display: block !important; margin-top: 6px !important; z-index: 1050; }
}
.vs-talk-dropdown .dropdown-menu.show { display: block !important; z-index: 1050; }
/* Mobile (<992px) — the navbar is collapsed inside the hamburger.
   Stretch the trigger pill, anchor the menu inline so it doesn't fly off the
   right edge, and let it scroll if the user has accessibility zoom. */
@media (max-width: 991px) {
  .vs-talk-dropdown { display: block !important; margin: 12px 0 4px !important; width: 100%; }
  .vs-talk-toggle { width: 100%; justify-content: center; padding: 12px 16px !important; font-size: 14px !important; }
  .vs-talk-menu {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 6px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
    max-height: 70vh;
    overflow-y: auto;
  }
  .vs-talk-item { padding: 13px 18px !important; font-size: 14px !important; }
}
/* Very small phones — keep menu items legible without overflow */
@media (max-width: 420px) {
  .vs-talk-toggle { font-size: 13.5px !important; padding: 11px 14px !important; }
  .vs-talk-item { padding: 12px 14px !important; font-size: 13.5px !important; }
}
/* Dark mode — unchanged token palette, but readable surfaces */
body.vs-dark .vs-talk-menu { background: #141d2f !important; border-color: #1e2a40 !important; }
body.vs-dark .vs-talk-item { color: #cfd8e6 !important; }
body.vs-dark .vs-talk-item:hover { background: rgba(116,197,181,0.14) !important; color: #fff !important; }
/* High-contrast / forced-colors fallback */
@media (forced-colors: active) {
  .vs-talk-toggle { border: 1px solid currentColor !important; }
  .vs-talk-menu { border: 1px solid currentColor !important; }
}
/* Reduced-motion — drop the hover lift */
@media (prefers-reduced-motion: reduce) {
  .vs-talk-toggle, .vs-talk-item { transition: none !important; }
  .vs-talk-toggle:hover { transform: none !important; }
}

/* Final global green override for portal/action buttons */
.vs-portals-dropdown > .btn,
.vs-portals-dropdown > .btn.dropdown-toggle,
.vs-talk-dropdown > .vs-talk-toggle,
.vs-talk-toggle {
  background: #74c5b5 !important;
  color: #fff !important;
  border-color: #74c5b5 !important;
}

.vs-portals-dropdown > .btn:hover,
.vs-portals-dropdown > .btn:focus,
.vs-portals-dropdown > .btn.dropdown-toggle:hover,
.vs-portals-dropdown > .btn.dropdown-toggle:focus,
.vs-talk-dropdown > .vs-talk-toggle:hover,
.vs-talk-dropdown > .vs-talk-toggle:focus,
.vs-talk-toggle:hover,
.vs-talk-toggle:focus {
  background: #5fa99c !important;
  color: #fff !important;
  border-color: #5fa99c !important;
}

/* Final global green override for the country/language button */
#vs-language-switcher .vs-i18n-trigger,
#vs-language-switcher button,
#vs-language-switcher a,
.vs-i18n-trigger {
  background: #74c5b5 !important;
  color: #fff !important;
  border-color: #74c5b5 !important;
}

#vs-language-switcher .vs-i18n-trigger:hover,
#vs-language-switcher .vs-i18n-trigger:focus,
#vs-language-switcher button:hover,
#vs-language-switcher button:focus,
#vs-language-switcher a:hover,
#vs-language-switcher a:focus,
.vs-i18n-trigger:hover,
.vs-i18n-trigger:focus {
  background: #5fa99c !important;
  color: #fff !important;
  border-color: #5fa99c !important;
}

#vs-language-switcher .vs-i18n-current-name,
#vs-language-switcher .vs-i18n-current-code,
#vs-language-switcher .vs-i18n-trigger span {
  color: #fff !important;
}

/* ===================================================================
   FOOTER LINK GRID  (added 2026-08-14)
   -------------------------------------------------------------------
   The markup is five `col-6 col-md-3` cells. Five quarter-width cells
   is 125% of a 12-column row, so the last column wrapped to a second
   row and left three empty quarters - the blank space under the footer.
   A grid removes the wrap for ANY column count (4, 5 or 6), so this is
   safe across every footer variant on the site.

   SPECIFICITY: earlier rules in this file force the cells to fixed
   widths with !important -
     .row.footer-links-grid > [class*="col-"] {flex:0 0 100%!important}
     footer .footer-links-grid .col-6         {width:50%!important}
   Those are (3,0) and (2,1); left unbeaten they would stretch every
   cell to full width inside the grid and break the layout at those
   breakpoints. The selectors below are deliberately written as
   `body footer .row.footer-links-grid > div[class*="col-"]` (3 class-
   level, 3 element) so they outrank both, and the sizing declarations
   carry !important to match.

   BAND: the "Resources" column is promoted to a full-width band ONLY
   where it is genuinely long. It is matched by CONTENT, not position -
   the footer is not uniform (146 pages have Resources 3rd, 12 have
   Explainers 3rd, 2 have Tools 3rd), so :nth-child(3) would promote the
   wrong column on 14 of them. In practice only the three pages with a
   15-link Resources column qualify; the other ~148 keep even columns,
   which is correct for them. Where :has() is unsupported the grid still
   applies - it degrades to equal columns, never to the old blank space.
   =================================================================== */
body footer .row.footer-links-grid {
  display: grid !important;
  /* Track count matches the number of columns, so the row always fills
     edge to edge. auto-fit was wrong here: at a 1320px container it
     yields 7 tracks, so 4 short columns fill 1-4 and leave 3 empty -
     the gap at the right-hand end. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px 22px !important;
  align-items: start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* FIX 2026-09-12: the three rules keyed off the Resources band used a NESTED
   :has() - `:has(> div:has(> a))` - which is invalid CSS. Selector lists are
   non-forgiving, so each invalid selector killed its ENTIRE rule: the 4-track
   desktop rule never applied (4 short columns sat in a 5-track grid, leaving an
   empty 5th track), and the tablet/mobile override lists died with it, so
   footers stayed a cramped 5-track grid down to 390px instead of collapsing to
   a single column. Rewritten as two SIBLING :has() on the container, which is
   legal CSS.
   CAVEAT: sibling :has() asks "some column has the blog link AND some column has
   10+ links" rather than "one column has both". Checked against all 179 local
   pages: the only 12 that differ are the what-is-* glossary pages, which have
   exactly 4 columns and so render 4 tracks either way - no orphaned column.
   Verified before/after at 1440 / 992 / 390 px. */
/* five columns and no band -> five tracks */
body footer .row.footer-links-grid:has(> div[class*="col-"]:nth-child(5)) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
/* six columns and no band -> six tracks */
body footer .row.footer-links-grid:has(> div[class*="col-"]:nth-child(6)) {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
/* when Resources is promoted to a full-width band, the four remaining
   short columns share a 4-track row. Declared last so it wins over the
   5/6-track rules above on those pages. */
body footer .row.footer-links-grid:has(> div[class*="col-"] > a[href="blog"]):has(> div[class*="col-"] > a:nth-of-type(10)) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body footer .row.footer-links-grid > div[class*="col-"] {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}
body footer .row.footer-links-grid > div[class*="col-"]:has(> a[href="blog"]):has(> a:nth-of-type(10)) {
  grid-column: 1 / -1 !important;
  order: 2 !important;
  margin-top: 4px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e8e8e8 !important;
  column-count: 4;
  column-gap: 22px;
}
body footer .row.footer-links-grid > div[class*="col-"]:has(> a[href="blog"]):has(> a:nth-of-type(10)) > strong {
  column-span: all;
}
body footer .row.footer-links-grid > div[class*="col-"] > strong {
  display: block !important;
  margin: 0 0 7px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid #eef2f7 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}
body footer .row.footer-links-grid > div[class*="col-"] > br { display: none !important; }
body footer .row.footer-links-grid > div[class*="col-"] > a {
  display: block !important;
  position: relative !important;
  padding: 3px 0 3px 11px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  break-inside: avoid;
  transition: color 0.22s ease, transform 0.22s ease;
}
body footer .row.footer-links-grid > div[class*="col-"] > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #74c5b5;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
body footer .row.footer-links-grid > div[class*="col-"] > a:hover,
body footer .row.footer-links-grid > div[class*="col-"] > a:focus-visible {
  transform: translateX(3px);
}
body footer .row.footer-links-grid > div[class*="col-"] > a:hover::before,
body footer .row.footer-links-grid > div[class*="col-"] > a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}
body footer .row.footer-links-grid > div[class*="col-"] > a:focus-visible {
  outline: 2px solid #74c5b5;
  outline-offset: 2px;
  border-radius: 4px;
}
/* columns cascade in on the site's existing .vs-stagger-item system */
body footer .row.footer-links-grid > div[class*="col-"]:nth-child(1) { transition-delay: 0s; }
body footer .row.footer-links-grid > div[class*="col-"]:nth-child(2) { transition-delay: 0.07s; }
body footer .row.footer-links-grid > div[class*="col-"]:nth-child(3) { transition-delay: 0.14s; }
body footer .row.footer-links-grid > div[class*="col-"]:nth-child(4) { transition-delay: 0.21s; }
body footer .row.footer-links-grid > div[class*="col-"]:nth-child(5) { transition-delay: 0.28s; }

/* SMM 2026 - the one live event, so its marker stays lit and pulses.
   Matched by href because pages set its colour with an inline style. */
body footer .row.footer-links-grid > div[class*="col-"] > a[href="smm-2026"] {
  color: #1f7d6b !important;
  font-weight: 700 !important;
}
body footer .row.footer-links-grid > div[class*="col-"] > a[href="smm-2026"]::before {
  opacity: 1;
  transform: translateX(0);
  background: #1f7d6b;
  animation: vsFooterEventPulse 2.6s ease-in-out infinite;
}
@keyframes vsFooterEventPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 125, 107, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(31, 125, 107, 0); }
}

body.vs-dark footer .row.footer-links-grid > div[class*="col-"] > strong { border-bottom-color: #253550 !important; }

@media (max-width: 991px) {
  /* the :has() track rules above are more specific than a bare
     .footer-links-grid selector, so the responsive overrides must repeat
     those selectors or the 5/6-track desktop rule would survive here. */
  body footer .row.footer-links-grid,
  body footer .row.footer-links-grid:has(> div[class*="col-"]:nth-child(5)),
  body footer .row.footer-links-grid:has(> div[class*="col-"]:nth-child(6)),
  body footer .row.footer-links-grid:has(> div[class*="col-"] > a[href="blog"]):has(> div[class*="col-"] > a:nth-of-type(10)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body footer .row.footer-links-grid > div[class*="col-"]:has(> a[href="blog"]):has(> a:nth-of-type(10)) { column-count: 2; }
}
@media (max-width: 575px) {
  body footer .row.footer-links-grid,
  body footer .row.footer-links-grid:has(> div[class*="col-"]:nth-child(5)),
  body footer .row.footer-links-grid:has(> div[class*="col-"]:nth-child(6)),
  body footer .row.footer-links-grid:has(> div[class*="col-"] > a[href="blog"]):has(> div[class*="col-"] > a:nth-of-type(10)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body footer .row.footer-links-grid > div[class*="col-"]:has(> a[href="blog"]):has(> a:nth-of-type(10)) { column-count: 2; }
}
@media (prefers-reduced-motion: reduce) {
  body footer .row.footer-links-grid > div[class*="col-"],
  body footer .row.footer-links-grid > div[class*="col-"] > a,
  body footer .row.footer-links-grid > div[class*="col-"] > a::before {
    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  body footer .row.footer-links-grid > div[class*="col-"] > a:hover { transform: none !important; }
}

/* Keep the full brand visible when the shared header shrinks. */
body > header .navbar .navbar-brand {
  min-width: 0;
  max-width: calc(100% - 72px);
}
body > header .navbar .navbar-brand img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 48px;
  object-fit: contain;
}
body > header .navbar .navbar-toggler {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
}

body.vs-home-page .smm-band-copy,
body.vs-home-page .smm-band-actions {
  min-width: 0;
  max-width: 100%;
}
body.vs-home-page .smm-band .smm-band-layout {
  transform: none;
}
body.vs-home-page .vs-crawl-marquee:focus-within {
  overflow-x: auto;
}
body.vs-home-page .vs-crawl-marquee:focus-within .vs-crawl-track {
  animation: none !important;
  transform: none !important;
}
body.vs-home-page .vs-crawl-marquee:focus-within [data-vs-crawl-clone] {
  display: none !important;
}
body.vs-home-page .vs-solutions-section .vs-solution-card:focus-within .card-body-inner > p,
body.vs-home-page .vs-solutions-section .vs-solution-card:focus-within .card-body-inner > .card-link {
  max-height: none !important;
  opacity: 1 !important;
  margin-bottom: 12px !important;
}
body.vs-home-page .vs-blog-section .vs-si-card:focus-within > div > div:first-child,
body.vs-home-page .vs-blog-section .vs-si-card:focus-within > div > h4,
body.vs-home-page .vs-blog-section .vs-si-card:focus-within > div > div:last-child > a {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-bottom: 10px !important;
}

@media (max-width: 991.98px) {
  body > header .navbar .navbar-brand {
    width: 180px !important;
    flex: 0 1 180px;
    margin-right: 12px;
  }
  body > header .navbar .navbar-collapse {
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body > header .navbar .dropdown-menu {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body > header .navbar .dropdown-menu a {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Touch users can inspect every original card without hover or auto-scrolling. */
  body.vs-home-page .vs-crawl-marquee::before,
  body.vs-home-page .vs-crawl-marquee::after {
    display: none;
  }
  body.vs-home-page .vs-crawl-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
  }
  body.vs-home-page .vs-crawl-track > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
    padding: 0;
  }
  body.vs-home-page .vs-crawl-track > [data-vs-crawl-clone] {
    display: none !important;
  }
  body.vs-home-page .vs-solutions-section .vs-crawl-track .vs-solution-card {
    height: 100% !important;
  }
  body.vs-home-page .vs-solutions-section .vs-crawl-track .vs-solution-card .card-body-inner > p,
  body.vs-home-page .vs-solutions-section .vs-crawl-track .vs-solution-card .card-body-inner > .card-link {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }
  body.vs-home-page .vs-solutions-section .vs-crawl-track .vs-solution-card h4 {
    margin-bottom: 10px !important;
  }
  body.vs-home-page .vs-blog-section .vs-si-card > div > div:first-child,
  body.vs-home-page .vs-blog-section .vs-si-card > div > h4,
  body.vs-home-page .vs-blog-section .vs-si-card > div > div:last-child > a {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
  }
  body.vs-home-page .smm-band-actions {
    flex-wrap: wrap !important;
  }
  body.vs-home-page .vs-home-hero .hero-content > p .vs-trust-txt {
    transform: none !important;
    animation: none !important;
  }
}

@media (max-width: 575.98px) {
  body.vs-home-page .smm-band-layout {
    display: flex !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  body.vs-home-page .smm-band .smm-band-layout > .smm-band-copy,
  body.vs-home-page .smm-band .smm-band-layout > .smm-band-actions {
    flex: 1 1 100% !important;
    width: 100%;
  }
  body.vs-home-page .smm-band-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.vs-home-page .smm-band .smm-band-btn {
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    white-space: normal;
    text-align: center;
  }
  body.vs-home-page .vs-crawl-track {
    grid-template-columns: minmax(0, 1fr);
  }
  body.vs-home-page .vs-home-hero .hero-content > p {
    max-width: 100% !important;
    padding: 12px 16px !important;
  }
  body.vs-home-page .vs-home-hero .btn-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 8px 0;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vs-home-page .vs-crawl-track,
  body.vs-home-page .hero-content > p .vs-trust-txt {
    animation: none !important;
    transform: none !important;
  }
  body.vs-home-page .vs-crawl-marquee {
    overflow-x: auto;
  }
}