/* PLACE YOU CUSTOM STYLES IN THIS FILE */

/*------------------------------------------------------------------

  Base - common css

 -------------------------------------------------------------------*/

body {
  position: relative;
  color: #7f8b92;
  background-color: #171e22;
}

.sv-main {
  overflow: hidden;
}

body.sv-page-boxed {
  max-width: 1200px;
  margin: 0 auto;
}

a {
  color: #168add;
  -webkit-transition: 0.15s color;
  -o-transition: 0.15s color;
  transition: 0.15s color;
}

a:focus,
a:hover {
  color: #168add;
}

::-moz-selection {
  color: #fff;
  background-color: #303e47;
}

::selection {
  color: #fff;
  background-color: #303e47;
}

.sv-page-background-top,
.sv-page-background-bottom,
.sv-page-background-fixed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: -1;
}

.sv-page-background-bottom {
  top: auto;
  bottom: 0;
}

.sv-page-background-fixed {
  position: fixed;
  height: 100%;
  background-position: center center;
  background-size: cover;
}

.sv-block {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}

.sv-block::after,
.sv-block::before {
  content: "";
  display: block;
  clear: both;
}

.bg-image,
.bg-video {
  position: absolute;
  top: -30px;
  right: -30px;
  bottom: -30px;
  left: -30px;
  background-position: 50% 50%;
  background-size: cover;
  z-index: -1;
}

.bg-image > div,
.bg-video > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: 50% 50%;
  background-size: cover;
}

.bg-video {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.bg-image-row,
.bg-video-row,
.bg-map-row {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.bg-image-row > div,
.bg-video-row > div,
.bg-map-row > div {
  height: 100%;
  overflow: hidden;
}

@media (max-width: 991px) {
  .bg-image-row,
  .bg-video-row,
  .bg-map-row {
    position: relative;
  }
  .bg-image-row > div,
  .bg-video-row > div,
  .bg-map-row > div {
    padding-top: 56.25%;
  }
  .bg-image-row > div > div,
  .bg-video-row > div > div,
  .bg-map-row > div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.bg-map-row {
  z-index: auto;
}

.bg-map-row .sv-gmaps {
  height: 100%;
  z-index: 1;
}

@media (max-width: 991px) {
  .bg-map-row {
    position: relative;
  }
  .bg-map-row > div {
    padding-top: 0;
  }
  .bg-map-row > div > div {
    position: relative;
  }
  .bg-map-row .sv-gmaps {
    height: 300px;
  }
  .bg-map-row .sv-gmaps-sm {
    height: 250px;
  }
  .bg-map-row .sv-gmaps-md {
    height: 450px;
  }
  .bg-map-row .sv-gmaps-lg {
    height: 550px;
  }
  .bg-map-row .sv-gmaps-full {
    height: 700px;
    height: 100vh;
    min-height: 700px;
  }
}

.bg-color {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #171e22;
  z-index: -1;
}

/* =============== Header =============== */
/* Contacts before Top Navbar */
.sv-contacts-top {
  padding: 8px 0;
  font-size: 0.85rem;
  color: #fff;
}

.sv-contacts-top::after {
  content: "";
  display: block;
  clear: both;
}

.sv-contacts-top .sv-contacts-left {
  float: left;
}

.sv-contacts-top .sv-contacts-right {
  float: right;
}

@media (max-width: 575px) {
  .sv-contacts-top .sv-contacts-left,
  .sv-contacts-top .sv-contacts-right {
    float: none;
    text-align: center;
  }
  .sv-contacts-top .sv-contacts-right {
    margin-top: 10px;
  }
}

/* Contacts top right icons */
.sv-contacts-icons {
  position: relative;
  padding: 0;
  margin: 0;
  margin-right: -20px;
  list-style-type: none;
}

@media (max-width: 767px) {
  .sv-contacts-icons {
    margin-right: 0;
  }
}

.sv-contacts-icons::after {
  content: "";
  display: block;
  clear: both;
}

.sv-contacts-icons > li {
  display: inline-block;
  margin: 3px 20px;
  line-height: 1.3;
  text-align: center;
}

.sv-contacts-icons > li > a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: 0.15s color;
  -o-transition: 0.15s color;
  transition: 0.15s color;
}

.sv-contacts-icons > li.hover,
.sv-contacts-icons > li > a:hover,
.sv-contacts-icons > li > a:focus,
.sv-contacts-icons > li > a:active {
  color: #168add;
}

/* Icon Burger */
.sv-icon-burger {
  position: relative;
  display: inline-block;
  width: 27px;
  height: 24px;
}

.sv-icon-burger > span {
  position: absolute;
  display: block;
  top: 50%;
  width: 25px;
  height: 0;
  border-bottom: 2px solid;
  -webkit-transition: 0.3s 0.2s width, 0.3s opacity, 0.2s transform;
  -o-transition: 0.3s 0.2s width, 0.3s opacity, 0.2s transform;
  transition: 0.3s 0.2s width, 0.3s opacity, 0.2s transform;
  will-change: width, opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.sv-icon-burger .sv-t-1 {
  margin-top: -7px;
}

.sv-icon-burger .sv-t-3 {
  margin-top: 7px;
}

/* Dropdown Cart */
.sv-cart-toggle {
  cursor: pointer;
}

.sv-cart-dropdown {
  position: absolute;
  top: 100%;
  right: 20px;
  width: 315px;
  padding: 18px;
  padding-bottom: 30px;
  margin-top: 11px;
  text-align: left;
  visibility: hidden;
  background-color: #232930;
  border: 1px solid #293139;
  border-bottom: 4px solid #168add;
  opacity: 0;
  -webkit-transition: 0.3s opacity, 0.3s visibility;
  -o-transition: 0.3s opacity, 0.3s visibility;
  transition: 0.3s opacity, 0.3s visibility;
  z-index: 1010;
}

.sv-cart-toggle:hover + .sv-cart-dropdown,
.sv-cart-dropdown:hover {
  visibility: visible;
  opacity: 1;
}

.sv-cart-dropdown::before {
  content: "";
  position: absolute;
  display: block;
  top: -18px;
  right: 0;
  left: 0;
  height: 18px;
}

.sv-cart-dropdown .sv-post-title {
  font-size: 1rem;
}

.sv-cart-dropdown .sv-cart-remove-item {
  float: right;
  padding: 5px;
  margin-top: -10px;
  font-size: 1.8rem;
  opacity: 0.2;
  -webkit-transition: 0.15s opacity;
  -o-transition: 0.15s opacity;
  transition: 0.15s opacity;
}

.sv-cart-dropdown .sv-cart-remove-item,
.sv-cart-dropdown .sv-cart-remove-item:hover {
  color: #fff;
}

.sv-cart-dropdown .sv-cart-remove-item:hover {
  opacity: 1;
}

/* Top Navbar */
.sv-navbar li > .sv-badge {
  position: absolute;
  right: 5px;
  bottom: 0;
}

.sv-navbar {
  position: relative;
  padding: 27px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1.07rem;
  color: #fff;
  -webkit-transition: 0.3s background-color;
  -o-transition: 0.3s background-color;
  transition: 0.3s background-color;
  z-index: 1000;
  will-change: background-color;
}

.sv-navbar.sv-navbar-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  -webkit-transition: 0.2s transform, 0.2s visibility, 0.3s background-color;
  -o-transition: 0.2s transform, 0.2s visibility, 0.3s background-color;
  transition: 0.2s transform, 0.2s visibility, 0.3s background-color;
  will-change: transform, visibility, background-color;
}

.sv-navbar.sv-navbar-fixed.sv-onscroll-hide {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.sv-navbar.sv-navbar-fixed.sv-onscroll-show {
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.sv-navbar.sv-navbar-light,
.sv-navbar.sv-navbar-light.sv-navbar-solid {
  color: inherit;
  background-color: rgba(255, 255, 255, 0.6);
}

.sv-navbar.sv-navbar-light.sv-navbar-fixed {
  background-color: rgba(255, 255, 255, 0.9);
}

.sv-navbar.sv-navbar-transparent {
  background-color: transparent;
}

.sv-navbar,
.sv-navbar.sv-navbar-solid {
  background-color: rgba(15, 19, 28, 0.3);
}

.sv-navbar.sv-navbar-fixed {
  background-color: rgba(26, 35, 51, 0.9);
}

.sv-navbar.sv-navbar-align-center {
  text-align: center;
}

.sv-navbar.sv-navbar-align-right {
  text-align: right;
}

.sv-navbar .sv-nav-table {
  display: table;
  width: 100%;
  height: 100%;
}

.sv-navbar .sv-nav-table > * {
  display: table-cell;
  vertical-align: middle;
}

.sv-navbar .sv-nav-table > .sv-nav-row {
  display: table-row;
}

.sv-navbar .sv-nav-table > .sv-nav-row-full {
  height: 100%;
}

.sv-navbar .sv-nav-table > .sv-nav-row-center > * {
  display: table-cell;
  vertical-align: middle;
}

.sv-navbar .sv-nav-table > .sv-nav-icons,
.sv-navbar .sv-nav-table > .sv-nav-logo {
  width: 1%;
}

.sv-navbar .sv-nav-logo img {
  height: auto;
}

.sv-navbar .sv-nav-icons {
  white-space: nowrap;
}

.sv-navbar .sv-nav-icons > * {
  white-space: initial;
}

@media (max-width: 420px) {
  .sv-navbar.sv-navbar-top .sv-nav-logo {
    display: none;
  }
}

.sv-navbar a {
  color: inherit;
}

.sv-navbar ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.sv-navbar ul > li > a {
  white-space: nowrap;
}

.sv-navbar ul > li > a:hover,
.sv-navbar ul > li > a:focus {
  text-decoration: none;
}

.sv-navbar .sv-navbar-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.sv-navbar .sv-nav {
  position: relative;
  width: 100px;
}

.sv-navbar .sv-nav .sv-nav {
  padding-right: 0;
  padding-left: 0;
}

.sv-navbar .sv-nav li.single-icon > a {
  padding: 0 15px;
}

.sv-navbar .sv-nav li.single-icon > a > i,
.sv-navbar .sv-nav li.single-icon > a > span {
  height: 32px;
  font-size: 1.1rem;
  line-height: 32px;
  vertical-align: middle;
}

.sv-navbar .sv-nav li > a .sv-item-descr {
  display: block;
  font-size: 0.7em;
  font-style: italic;
  opacity: 0.7;
}

.sv-navbar .sv-nav li > a {
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition: 0.15s color;
  -o-transition: 0.15s color;
  transition: 0.15s color;
}

.sv-navbar .sv-nav li > a:hover,
.sv-navbar .sv-nav li > a.hover {
  color: rgb(169, 169, 169);
}

.sv-navbar .sv-nav li.active > a {
  color: #e0e0e0;
}

.sv-navbar .sv-nav > li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.sv-navbar .sv-nav > li:last-child {
  margin-right: -21px;
}

@media (max-width: 767px) {
  .sv-navbar .sv-nav > li:last-child {
    margin-right: -10px;
  }
}

.sv-navbar .sv-nav > li > a {
  position: relative;
  display: block;
  padding: 6px 21px;
}

@media (max-width: 1199px) {
  .sv-navbar .sv-nav > li > a {
    padding: 6px 18px;
  }
}

.sv-navbar .sv-nav .dropdown {
  position: absolute;
  display: none;
  min-width: 250px;
  padding: 9px 0;
  margin-top: 12px;
  margin-left: 9px;
  background-color: rgba(15, 19, 28, 0.9);
  border-bottom: 4px solid rgba(26, 35, 51, 0.2);
  opacity: 0;
  z-index: 1;
}

.sv-navbar .sv-nav .dropdown > li {
  position: relative;
}

.sv-navbar .sv-nav .dropdown > li > a {
  display: block;
  padding: 6px 17px;
  padding-right: 64px;
}

.sv-navbar .sv-nav .dropdown > li > a:hover {
  text-decoration: none;
}

.sv-navbar .sv-nav .sv-drop-item > a::after {
  content: " +";
}

.sv-navbar .sv-nav .sv-drop-item .sv-drop-item > a::after {
  position: absolute;
  right: 20px;
}

.sv-navbar .sv-nav .sv-drop-item .sv-drop-item .dropdown {
  top: 0;
  left: 5px;
  margin-top: -9px;
  margin-left: 100%;
}

.sv-navbar.sv-navbar-light .sv-nav .dropdown {
  background-color: #fff;
}

.sv-navbar .sv-nav-right {
  text-align: right;
}

.sv-navbar .sv-nav-right > * {
  text-align: left;
}

.sv-navbar .sv-nav-right .sv-mega-item > .dropdown {
  right: 0;
  left: auto;
}

.sv-navbar .sv-nav-center {
  text-align: center;
}

.sv-navbar .sv-nav-center > * {
  text-align: left;
}

.sv-navbar .sv-nav-center .sv-mega-item > .dropdown {
  right: 0;
  left: auto;
}

.sv-navbar .sv-drop-item.sv-drop-left .dropdown {
  margin-left: -100%;
}

/* Navbar Left */
.sv-navbar-left.sv-navbar-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  z-index: 999;
}

.sv-navbar-left.sv-navbar-side ~ .sv-main,
.sv-navbar-left.sv-navbar-side ~ .sv-search {
  margin-left: 280px;
}

.sv-navbar-left.sv-navbar-side.sv-navbar-lg {
  width: 300px;
}

.sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-main,
.sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-search {
  margin-left: 300px;
}

@media (max-width: 991px) {
  .sv-navbar-left.sv-navbar-side {
    display: none;
  }
  .sv-navbar-left.sv-navbar-side ~ .sv-main,
  .sv-navbar-left.sv-navbar-side ~ .sv-search,
  .sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-main,
  .sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-search {
    margin-left: 0;
  }
}

/* Nav Togglers */
.sv-nav-toggler-right,
.sv-nav-toggler-left {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}

.sv-nav-toggler-right > li,
.sv-nav-toggler-left > li {
  display: inline-block;
}

.sv-nav-toggler-right > li + li,
.sv-nav-toggler-left > li + li {
  margin-left: 15px;
}

.sv-nav-toggler-right > li > a,
.sv-nav-toggler-left > li > a {
  display: block;
  padding: 12px;
  color: #fff;
  background-color: #171e22;
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
}

.sv-nav-toggler-right > li > a > span,
.sv-nav-toggler-left > li > a > span {
  height: 25px;
  vertical-align: text-bottom;
}

.sv-nav-toggler-left {
  right: auto;
  left: 20px;
}

/* Navbar Side */
.sv-navbar-side {
  position: fixed;
  top: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background-color: #171e22;
  z-index: 1002;
}

.sv-navbar-side.sv-navbar-left-side {
  left: 0;
  width: 250px;
  margin-left: -250px;
}

@media (max-width: 400px) {
  .sv-navbar-side.sv-navbar-left-side {
    width: 200px;
    margin-left: -200px;
  }
}

.sv-navbar-side.sv-navbar-right-side {
  right: 0;
  width: 250px;
  margin-right: -250px;
}

@media (max-width: 400px) {
  .sv-navbar-side.sv-navbar-right-side {
    width: 200px;
    margin-right: -200px;
  }
}

.sv-navbar-side.sv-navbar-lg.sv-navbar-left-side {
  width: 350px;
  margin-left: -350px;
}

@media (max-width: 550px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-left-side {
    width: 300px;
    margin-left: -300px;
  }
}

@media (max-width: 450px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-left-side {
    width: 250px;
    margin-left: -250px;
  }
}

.sv-navbar-side.sv-navbar-lg.sv-navbar-right-side {
  width: 350px;
  margin-right: -350px;
}

@media (max-width: 550px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-right-side {
    width: 300px;
    margin-right: -300px;
  }
}

@media (max-width: 450px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-right-side {
    width: 250px;
    margin-right: -250px;
  }
}

.sv-navbar-side .sv-nav-logo {
  display: block;
  width: 100%;
  padding: 20px 25px;
}

.sv-navbar-side.sv-navbar-lg .sv-nav-logo {
  padding-top: 30px;
  padding-bottom: 30px;
}

.sv-navbar-side .nano {
  height: 100%;
  overflow-y: auto;
}

.sv-navbar-side .sv-nav {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.sv-navbar-side .sv-nav > li:last-child {
  margin-right: 0;
}

.sv-navbar-side .sv-nav .dropdown > li,
.sv-navbar-side .sv-nav > li {
  position: static;
  display: block;
}

.sv-navbar-side .sv-nav .dropdown > li > a,
.sv-navbar-side .sv-nav > li > a {
  padding: 12px 25px;
  white-space: normal;
}

.sv-navbar-side .sv-nav .sv-drop-item > a,
.sv-navbar-side .sv-nav > .sv-drop-item > a,
.sv-navbar-side .sv-nav .bropdown-back > a {
  position: relative;
}

.sv-navbar-side .sv-nav .sv-drop-item .sv-drop-item > a::after,
.sv-navbar-side .sv-nav .sv-drop-item > a::after,
.sv-navbar-side .sv-nav > .sv-drop-item > a::after {
  position: absolute;
  right: 20px;
}

.sv-navbar-side .sv-nav .dropdown {
  display: block;
  padding: 0;
  background-color: transparent;
  border-bottom: 0;
  opacity: 1;
}

.sv-navbar-side .sv-nav .dropdown::before {
  content: none;
}

.sv-navbar-side .sv-nav .sv-drop-item > .dropdown,
.sv-navbar-side .sv-nav .sv-drop-item .sv-drop-item > .dropdown {
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  margin-left: 0;
}

.sv-navbar-side .sv-nav .sv-drop-item > .dropdown > li > a,
.sv-navbar-side .sv-nav .sv-drop-item .sv-drop-item > .dropdown > li > a {
  display: none;
}

.sv-navbar-side .dropdown > .bropdown-back > a::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  color: inherit;
  border: none;
  border-top: 3px solid transparent;
  border-right: 3px solid;
  border-bottom: 3px solid transparent;
  -webkit-transition: 0.13s opacity;
  -o-transition: 0.13s opacity;
  transition: 0.13s opacity;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  will-change: opacity;
}

.sv-navbar-side .sv-nav-icons {
  list-style: none;
}

.sv-navbar-side .sv-nav-icons li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.sv-navbar-side .sv-nav-icons li > a {
  display: inline-block;
  padding: 0 15px;
}

.sv-navbar-side .sv-nav-icons li > a > i,
.sv-navbar-side .sv-nav-icons li > a > span {
  height: 32px;
  font-size: 1.2rem;
  line-height: 32px;
  vertical-align: middle;
}

.sv-navbar-overlay {
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  background-color: #000;
  opacity: 0;
  z-index: 1001;
}

/* =============== Footer =============== */
.sv-footer {
  position: relative;
  overflow: hidden;
  color: #eee;
  background-color: rgba(26, 35, 51, 0.6);
  z-index: 1;
}

.sv-copyright {
  background-color: rgba(15, 19, 28, 0.8);
}

.sv-copyright .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.sv-copyright .sv-copyright-left {
  padding: 25px 0;
}

.sv-copyright .sv-copyright-right {
  padding: 21px 0;
  margin-left: auto;
}

@media (max-width: 991px) {
  .sv-copyright .sv-copyright-left,
  .sv-copyright .sv-copyright-right {
    width: 100%;
    text-align: center;
  }
  .sv-copyright .sv-copyright-right {
    padding-top: 0;
  }
}

.sv-widget {
  overflow: hidden;
}

.sv-widget ~ .sv-widget {
  margin-top: 30px;
}

.sv-widget .sv-widget-title {
  margin-bottom: 15px;
  font-size: 1.22rem;
  text-transform: uppercase;
}

.sv-widget-highlighted .sv-widget-title {
  position: relative;
  padding: 23px 23px;
  margin-bottom: 0;
  background-color: #293139;
  z-index: 1;
}

.sv-widget-highlighted .sv-widget-title > span {
  display: inline-block;
  padding-right: 23px;
  background-color: #293139;
}

.sv-widget-highlighted .sv-widget-title::after {
  content: "";
  position: absolute;
  display: block;
  top: 32px;
  right: 1px;
  left: 30px;
  height: 3px;
  background-color: #fff;
  z-index: -1;
}

.sv-widget-highlighted .sv-widget-content {
  padding: 20px 23px;
  background-color: #232930;
  border: 1px solid #293139;
}

/* =============== News box =============== */
.sv-news-box {
  height: 425px;
  overflow: hidden;
  background-color: rgba(35, 41, 48, 0.96);
  border: 1px solid #293139;
}

.sv-news-box .sv-news-box-list,
.sv-news-box .sv-news-box-each-info {
  float: left;
  width: 50%;
  height: 100%;
}

.sv-news-box .sv-news-box-item {
  padding: 10px;
  cursor: pointer;
  -webkit-transition: 0.15s color, 0.15s background-color;
  -o-transition: 0.15s color, 0.15s background-color;
  transition: 0.15s color, 0.15s background-color;
  -moz-transition: 0.15s color, 0.15s background-color;
  -ms-transition: 0.15s color, 0.15s background-color;
}

.sv-news-box .sv-news-box-item::after {
  content: "";
  display: block;
  clear: both;
}

.sv-news-box .sv-news-box-item + .sv-news-box-item {
  border-top: 1px solid #293139;
}

.sv-news-box .sv-news-box-item:hover,
.sv-news-box .sv-news-box-item.hover {
  background-color: #293139;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-active {
  color: #fff;
  background-color: #168add;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-img {
  float: left;
  width: 100px;
  margin-right: 20px;
  overflow: hidden;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-img img {
  width: 100%;
  height: auto;
  -webkit-transition: transform 0.15s ease-in-out,
    -webkit-transform 0.15s ease-in-out;
  transition: -webkit-transform 0.15s ease-in-out;
  -o-transition: transform 0.15s ease-in-out,
    -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  will-change: transform;
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -moz-transition: transform 0.15s ease-in-out,
    -webkit-transform 0.15s ease-in-out;
  -ms-transition: transform 0.15s ease-in-out,
    -webkit-transform 0.15s ease-in-out;
}

.sv-news-box .sv-news-box-item:hover .sv-news-box-item-img img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
}

.sv-news-box .sv-news-box-item .sv-news-box-item-categories,
.sv-news-box .sv-news-box-item .sv-news-box-item-url,
.sv-news-box .sv-news-box-item .sv-news-box-item-full-img {
  display: none;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-title {
  margin-top: 5px;
  margin-bottom: 2px;
  overflow: hidden;
  font-size: 1.1rem;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-text,
.sv-news-box .sv-news-box-item .sv-news-box-item-text p {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-text {
  max-height: 25px;
  margin-bottom: 13px;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-text p {
  margin: 0;
}

.sv-news-box .sv-news-box-item .sv-news-box-item-date {
  margin-top: 5px;
  font-size: 0.9em;
}

.sv-news-box .s-news-box-item .sv-news-box-item-date span {
  margin-right: 6px;
  font-size: 1rem;
}

.sv-news-box .sv-news-box-each-info {
  border-left: 1px solid #293139;
}

.sv-news-box .sv-news-box-each-info .nano-content {
  padding: 20px;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-categories {
  position: absolute;
  top: 10px;
  right: 0;
  margin-top: 6px;
  font-size: 1rem;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-categories span {
  padding: 2px 19px;
  color: #fff;
  background-color: #38a220;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-image {
  margin-top: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
  margin-left: -20px;
  background-position: center center;
  background-size: cover;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-image img {
  width: 100%;
  height: auto;
}

.vs-news-box
  .sv-news-box-each-info
  .sv-news-box-item-image[style*="background"] {
  padding-top: 41.2%;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-title {
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-more {
  font-weight: 600;
  text-transform: uppercase;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-date {
  float: right;
  margin-top: 5px;
  font-size: 0.9em;
}

.sv-news-box .sv-news-box-each-info .sv-news-box-item-date span {
  margin-right: 6px;
  font-size: 1rem;
}

@media (max-width: 767px) {
  .sv-news-box {
    height: 720px;
  }
  .sv-news-box .sv-news-box-list,
  .sv-news-box .sv-news-box-each-info {
    float: none;
    width: 100%;
  }
  .sv-news-box .sv-news-box-each-info {
    height: 400px;
    border-left: 0;
  }
  .sv-news-box .sv-news-box-list {
    height: 320px;
  }
  .sv-news-box .sv-news-box-list .sv-news-box-item-img {
    width: 60px;
  }
  .sv-news-box .sv-news-box-list .sv-news-box-item-date {
    display: none;
  }
}

/* =============== Plugin NanoScroller =============== */

.nano {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nano .nano-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
  overflow-x: hidden;
  outline: none;
  -webkit-overflow-scrolling: touch;
}

.nano .nano-content::-webkit-scrollbar {
  display: none;
}

.nano > .nano-pane {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  visibility: hidden\9;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.01;
  -webkit-transition: 0.2s opacity;
  -o-transition: 0.2s opacity;
  transition: 0.2s opacity;
  will-change: opacity;
}

.nano > .nano-pane > .nano-slider {
  position: relative;
  margin: 0 1px;
  background: #fff;
  opacity: 0.5;
}

.nano > .nano-pane:hover > .nano-slider {
  opacity: 0.6;
}

.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
}

.nano:hover > .nano-pane,
.nano-pane.active,
.nano-pane.flashed {
  visibility: visible\9;
  opacity: 0.99;
}

/* =============== Transparent boxes =============== */
.bg-dark-trans {
  background-color: rgba(35, 41, 48, 0.79);
}

/* =============== Upload bar =============== */
.progress {
  height: 20px;
  margin-top: 20px;
}

.progress-bar {
  background-color: #4caf50;
  height: 100%;
  width: 0;
  text-align: center;
  color: white;
}

.a-header {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 8px;
  text-transform: uppercase;
}

/* =============== Generic section heading (reusable anywhere) =============== */
.section-heading {
  width: 100%;
  text-align: left; /* change to center/right if needed */
  margin: 40px 0 20px 0;
  padding: 10px 20px;
  border-left: 4px solid rgba(26, 35, 51, 0.9); /* accent line */
  background: linear-gradient(to right, #0f131c 15%, rgba(15, 19, 28, 0) 100%);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.section-heading h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff; /* matches your template text */
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =============== UI card =============== */
.ui-card {
  --card-bg: #0f131c;
  --card-border: #1a2333;
  --card-fg: #e6eef7;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--card-fg);
  padding: 24px;
  margin: 0 auto 24px;
  max-width: 1100px; /* matches your wide screenshot */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.bg-ui-card-trans {
  --card-bg: rgba(15, 19, 28, 0.7); /* more transparent */
  --card-border: #1a2333;
  --card-fg: #e6eef7;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--card-fg);
  padding: 24px;
  margin: 0 auto 24px;
  max-width: 1100px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Two-column layout inside the card */
.ui-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .ui-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Headings inside card */
.ui-card-title {
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Spacing helpers to mimic your theme */
.m-t-10 {
  margin-top: 10px;
}
.m-t-15 {
  margin-top: 15px;
}
.m-b {
  margin-bottom: 10px;
}

/* Make inputs stretch nicely inside the card */
.ui-card .form-control {
  width: 100%;
  display: block;
  background: #0c111a;
  border: 1px solid var(--card-border);
  color: var(--card-fg);
  padding: 10px 12px;
  border-radius: 6px;
  margin-top: 6px;
}
.ui-card label {
  display: block;
  margin-top: 8px;
}

/* Keep links readable on dark background */
.ui-card a {
  color: #5aa0ff;
}

/* Optional: icon scale in the right column */
.ui-card .big-icon {
  font-size: 96px;
  color: #2b84df;
}

/* Input group for password with toggle */
.ui-card-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ui-card-input-group .form-control {
  flex: 1;
  border-radius: 6px;
  padding-right: 40px; /* space for the eye icon */
}

.ui-card-input-group .btn-ghost {
  position: absolute;
  right: 10px;
  background: transparent;
  border: 0;
  color: #a5b5c8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-card-input-group .btn-ghost:hover {
  color: #ffffff;
}

.ui-card-input-group .btn-ghost i {
  font-size: 16px;
}

/* Info / alert cards */
.ui-card-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 10px 0;
  position: relative;
  border: 1px solid var(--border, #1a2333);
}

.ui-card-alert .ui-card-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ui-card-alert .ui-card-body {
  flex: 1;
}

.ui-card-alert .ui-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.ui-card-alert p {
  margin: 2px 0 0;
  font-size: 14px;
  color: #a5b5c8;
}

.ui-card-alert .ui-card-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Color variants */
.ui-card-alert--success {
  border-color: #28a745;
  color: #28a745;
}
.ui-card-alert--error {
  border-color: #dc3545;
  color: #dc3545;
}
.ui-card-alert--info {
  border-color: #17a2b8;
  color: #17a2b8;
}

/* Use the same width & centering for alerts and cards */
.ui-card-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Little spacing helper */
.m-b-10 {
  margin-bottom: 10px;
}

/* Alert card look (from earlier) */
.ui-card-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 0;
  position: relative;
  border: 1px solid var(--border, #1a2333);
  background: var(--card, #0f131c);
  color: var(--fg, #e6eef7);
}
.ui-card-alert .ui-card-icon {
  font-size: 24px;
  margin-top: 2px;
}
.ui-card-alert .ui-card-body {
  flex: 1;
}
.ui-card-alert .ui-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.ui-card-alert p {
  margin: 2px 0 0;
  font-size: 14px;
  color: #a5b5c8;
}
.ui-card-alert .ui-card-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Color variants */
.ui-card-alert--success {
  border-color: #28a745;
  color: #28a745;
}
.ui-card-alert--error {
  border-color: #dc3545;
  color: #dc3545;
}
.ui-card-alert--info {
  border-color: #17a2b8;
  color: #17a2b8;
}

/* =============== Feature card =============== */
.feature-card {
  --bg: #0f131c;
  --border: #1a2333;
  --fg: #e6eef7;
  --fg: #e6eef7;
  display: grid;
  grid-template-columns: 90px 1px 1fr; /* smaller icon column */
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Icon side */
.feature-icon {
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.feature-icon .team-logo {
  width: 72px;
  height: auto;
  border-radius: 6px;
}
.feature-icon i {
  font-size: 42px;
  color: #e6eef7;
}

/* Divider line */
.feature-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--border),
    transparent
  );
}

/* Text side */
.feature-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  line-height: 1.3;
}
.feature-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.feature-title a {
  color: #ffffff; /* matches your blue accent */
  text-decoration: none;
}
.feature-title a:hover {
  text-decoration: underline;
  color: #168add !important;
  background-color: rgba(211, 211, 211, 0.01);
  border-radius: 6px;
  transform: scale(1.05); /* Optional hover effect for a dynamic feel */
}
.muted {
  color: #a5b5c8;
  font-size: 0.85rem;
}

/* Compact feature card container (sidebar) */
.feature-card--sm {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(13, 17, 26, 0.86),
    rgba(13, 17, 26, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Header + accent rule (matches your section headings) */
.feature-card--sm .feature-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.feature-card--sm .section-title {
  font-weight: 800;
  letter-spacing: 0.3px;
}
.feature-card--sm .feature-card__rule {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, currentColor, rgba(255, 255, 255, 0.2));
  opacity: 0.6;
}

/* Grid of users (3 across on desktop, responsive down) */
.recent-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.recent-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
  .recent-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 992px) {
  .recent-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .recent-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* =============== Gallery =============== */
/* Root palette + easing — tweak if needed */
:root {
  --sv-radius: 12px;
  --sv-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  --sv-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.18);
  --sv-overlay: rgba(0, 0, 0, 0.45);
  --sv-ink: #101318;
  --sv-ink-2: #4a5568;
  --sv-border: rgba(0, 0, 0, 0.08);
  --sv-accent: #5a8dee; /* subtle blue accent */
  --sv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Card */
.sv-gallery-item-box {
  position: relative;
  border-radius: var(--sv-radius);
  overflow: hidden;
  background: #1a2333;
  box-shadow: var(--sv-shadow);
  transition: transform 0.3s var(--sv-ease), box-shadow 0.3s var(--sv-ease);
  border: 1px solid var(--sv-border);
}

.sv-gallery-item-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--sv-shadow-hover);
}

.sv-gallery-item {
  position: relative;
  display: block;
  line-height: 0;
}

.sv-gallery-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--sv-ease);
}

.sv-gallery-item:hover img {
  transform: scale(1.03);
}

.sv-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 40%,
    var(--sv-overlay) 100%
  );
  opacity: 0;
  transition: opacity 0.3s var(--sv-ease);
  display: grid;
  place-items: end center;
  padding: 16px;
}

.sv-gallery-item:hover .sv-gallery-item-overlay {
  opacity: 1;
}

.sv-gallery-item-overlay .ion-eye::before {
  content: "👁";
  font-size: 22px;
  display: inline-block;
  background: #fff;
  color: var(--sv-ink);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* ===== Lightbox (modal) ===== */

.sv-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 15, 0.92);
  display: none;
  opacity: 0;
  transition: opacity 0.25s var(--sv-ease);
  z-index: 10000;
}

.sv-lightbox.open {
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 1;
}

.sv-lightbox-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.sv-lightbox-img {
  max-width: 92vw;
  max-height: 82vh;
  border-radius: calc(var(--sv-radius) + 2px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.25s var(--sv-ease);
}

.sv-lightbox-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  color: #e6e9ee;
  font-size: 0.95rem;
}

.sv-lightbox-title {
  font-weight: 600;
}

.sv-lightbox-caption {
  opacity: 0.8;
}

/* Controls */
.sv-lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  color: var(--sv-ink);
  border: 0;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--sv-ease), background 0.2s var(--sv-ease);
}

.sv-lightbox-btn:hover {
  transform: translateY(-50%) scale(1.03);
  background: #fff;
}

.sv-lightbox-prev {
  left: 18px;
}
.sv-lightbox-next {
  right: 18px;
}

.sv-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sv-ink);
  border-radius: 10px;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Loading state */
.sv-lightbox-stage.loading::after {
  content: "Loading…";
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #cfd6e0;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

/* Small screens tweaks */
@media (max-width: 576px) {
  .sv-lightbox-img {
    max-width: 94vw;
    max-height: 72vh;
  }
}

/* =============== Galleries =============== */
:root {
  --bg: #0f131c; /* dark background for bar */
  --border: #1a2333;
  --fg: #e6eef7; /* light text */
  --sv-radius: 12px;
  --sv-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  --sv-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.35);
  --sv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Card container */
.sv-album-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--sv-radius);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--sv-shadow);
  transition: transform 0.25s var(--sv-ease), box-shadow 0.25s var(--sv-ease);
  text-decoration: none;
  height: 100%;
}

.sv-album-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sv-shadow-hover);
}

/* Cover image */
.sv-album-img {
  width: 100%;
  aspect-ratio: 16 / 9; /* makes cards uniform like videos */
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* Description bar */
.sv-album-meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  color: var(--fg);
}

/* Title */
.sv-album-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count */
.sv-album-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--fg);
  opacity: 0.85;
}

.sv-album-count .far.fa-image {
  font-size: 14px;
}

/* =============== Pagination =============== */
.sv-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
}

.sv-pagination .sv-pagination-prev,
.sv-pagination .sv-pagination-next {
  position: relative;
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}

.sv-pagination .sv-pagination-prev.disabled,
.sv-pagination .sv-pagination-next.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.2;
}

.sv-pagination .sv-pagination-prev .sv-icon-arrow-right,
.sv-pagination .sv-pagination-prev .sv-icon-arrow-left,
.sv-pagination .sv-pagination-next .sv-icon-arrow-right,
.sv-pagination .sv-pagination-next .sv-icon-arrow-left {
  position: absolute;
  top: 33px;
}

.sv-pagination .sv-pagination-prev .sv-icon-arrow-right,
.sv-pagination .sv-pagination-next .sv-icon-arrow-right {
  right: 0;
}

.sv-pagination .sv-pagination-prev .sv-icon-arrow-left,
.sv-pagination .sv-pagination-next .sv-icon-arrow-left {
  left: 0;
}

.sv-pagination .sv-pagination-prev {
  padding-right: 14px;
  text-align: left;
}

.sv-pagination .sv-pagination-next {
  padding-left: 14px;
  text-align: right;
}

.sv-pagination a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: 0.15s color;
  -o-transition: 0.15s color;
  transition: 0.15s color;
}

.sv-pagination a:hover {
  color: #168add;
}

.sv-pagination nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: center;
}

.sv-pagination nav > * {
  padding-right: 15px;
  padding-left: 15px;
}

.sv-pagination nav > *.sv-pagination-current {
  min-width: 42px;
  height: 42px;
  padding: 3px;
  line-height: 28px;
  color: #168add;
  border: 4px solid;
  border-radius: 21px;
}

.sv-pagination.sv-pagination-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.sv-pagination.sv-pagination-left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.sv-pagination.sv-pagination-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/* =============== Blockquotes =============== */
.sv-blockquote {
  position: relative;
  margin: 20px 0;
  margin-top: 33px;
  font-style: italic;
  z-index: 1;
}

.sv-blockquote .sv-blockquote-icon {
  display: table;
  margin-bottom: 20px;
}

.sv-blockquote .sv-blockquote-icon > span {
  display: table-cell;
  height: 0;
  padding-right: 25px;
  font-size: 96px;
  font-weight: 600;
  line-height: 0;
  color: #fff;
  vertical-align: top;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sv-blockquote .sv-blockquote-icon::before,
.sv-blockquote .sv-blockquote-icon::after {
  content: "";
  display: table-cell;
  width: 100%;
  vertical-align: top;
  border-bottom: 2px solid #168add;
  -webkit-transform: translateY(-18px);
  -ms-transform: translateY(-18px);
  transform: translateY(-18px);
}

.sv-blockquote .sv-blockquote-icon::before {
  width: 50px;
  min-width: 50px;
}

.sv-blockquote .sv-blockquote-author {
  margin-top: 25px;
  text-align: right;
}

.sv-blockquote .sv-blockquote-author > span {
  display: table-cell;
  padding-right: 30px;
  padding-left: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.sv-blockquote .sv-blockquote-author::before,
.sv-blockquote .sv-blockquote-author::after {
  content: "";
  display: table-cell;
  width: 100%;
  border-bottom: 2px solid #168add;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

.sv-blockquote .sv-blockquote-author::after {
  width: 50px;
  min-width: 50px;
}

.sv-blockquote > a {
  color: inherit;
  text-decoration: none;
}

/*---------------------------
  Element Accordion
 ----------------------------*/
.sv-accordion .panel-heading {
  margin-bottom: 12px;
}

.sv-accordion .panel-heading a {
  display: block;
  padding: 10px 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #293139;
  -webkit-transition: 0.15s background-color;
  -o-transition: 0.15s background-color;
  transition: 0.15s background-color;
}

.sv-accordion .panel-heading a:focus,
.sv-accordion .panel-heading a:hover {
  background-color: #303842;
}

.sv-accordion .panel-heading a:not(.collapsed),
.sv-accordion .panel-heading a:not(.collapsed):focus,
.sv-accordion .panel-heading a:not(.collapsed):hover {
  background-color: #168add;
}

.sv-accordion .panel-heading a:not(.collapsed) .panel-heading-arrow {
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.sv-accordion .panel-heading a .panel-heading-arrow {
  float: right;
  font-size: 1.3rem;
  line-height: 1.35;
  -webkit-transition: 0.2s transform;
  -o-transition: 0.2s transform;
  transition: 0.2s transform;
}

/*---------------------------
  Element Content Boxes
 ----------------------------*/
.sv-box,
.sv-box-1,
.sv-box-2,
.sv-box-3,
.sv-box-4,
.sv-box-rounded,
.sv-box-rounded-1,
.sv-box-rounded-2,
.sv-box-rounded-3,
.sv-box-rounded-4 {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.sv-box-1,
.sv-box-rounded-1 {
  padding: 20px;
}

.sv-box-2,
.sv-box-rounded-2 {
  padding: 40px;
}

.sv-box-3,
.sv-box-rounded-3 {
  padding: 60px;
}

.sv-box-4,
.sv-box-rounded-4 {
  padding: 80px;
}

.sv-box-rounded,
.sv-box-rounded-1,
.sv-box-rounded-2,
.sv-box-rounded-3,
.sv-box-rounded-4 {
  border-radius: 6px;
}

/* line between boxes
   Used JS code to add .nk-box-line-top and .nk-box-last classnames */
.sv-box-line::before {
  content: "";
  position: absolute;
  display: block;
  top: 2rem;
  right: 0;
  bottom: 2rem;
  border-left: 1px solid;
  opacity: 0.07;
}

.sv-box-line.sv-box-line-top::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 2rem;
  left: 2rem;
  border-bottom: 1px solid;
  opacity: 0.07;
}

.sv-box-line.sv-box-last::before {
  content: none;
}

/* =============== Modal =============== */
.sv-modal .modal-content {
  background-color: #232930;
  border: none;
  border-radius: 0;
}

.sv-modal .modal-body {
  padding: 38px;
}

.sv-modal .modal-sm {
  max-width: 470px;
}

.sv-modal .close {
  position: absolute;
  top: 38px;
  right: 38px;
  margin-top: 0;
  font-size: 1.7rem;
  color: inherit;
  text-shadow: none;
  -webkit-transition: 0.2s color;
  -o-transition: 0.2s color;
  transition: 0.2s color;
  z-index: 2;
}

.sv-modal .close:hover {
  color: #fff;
}

@media (min-width: 576px) {
  .sv-modal .modal-dialog {
    margin-top: 190px;
    margin-bottom: 60px;
  }
}

/* =============== Store =============== */
.sv-product-price {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

/* =============== Gap =============== */
.sv-gap,
.sv-gap-1,
.sv-gap-2,
.sv-gap-3,
.sv-gap-4,
.sv-gap-5,
.sv-gap-6 {
  display: block;
  height: 15px;
}

.sv-gap::after,
.sv-gap::before,
.sv-gap-1::after,
.sv-gap-1::before,
.sv-gap-2::after,
.sv-gap-2::before,
.sv-gap-3::after,
.sv-gap-3::before,
.sv-gap-4::after,
.sv-gap-4::before,
.sv-gap-5::after,
.sv-gap-5::before,
.sv-gap-6::after,
.sv-gap-6::before {
  content: "";
  display: block;
  clear: both;
}

.sv-gap-1 {
  height: 20px;
}

.sv-gap-2 {
  height: 30px;
}

.sv-gap-3 {
  height: 50px;
}

.sv-gap-4 {
  height: 70px;
}

.sv-gap-5 {
  height: 90px;
}

.sv-gap-6 {
  height: 110px;
}

/* =============== Buttons =============== */
.sv-breadcrumbs {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  list-style-type: none;
}

.sv-breadcrumbs > li {
  display: inline-block;
  font-size: 1.07rem;
}

.sv-breadcrumbs > li + li {
  margin-left: 6px;
}

.sv-breadcrumbs > li a {
  color: inherit;
  text-decoration: none;
}

.sv-breadcrumbs > li a:hover,
.sv-breadcrumbs > li a.hover {
  color: rgb(169, 169, 169);
}

.sv-breadcrumbs > li:last-of-type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 9px;
  margin-left: 0;
  font-size: 2.025rem;
}

.sv-breadcrumbs > li:last-of-type > span,
.sv-breadcrumbs > li:last-of-type > a {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding-right: 20px;
}

.sv-breadcrumbs > li:last-of-type::after {
  content: "";
  display: block;
  -webkit-box-flex: 100;
  -ms-flex: 100;
  flex: 100;
  border-bottom: 4px solid rgba(15, 19, 28, 0.8);
  -webkit-transform: translateY(-12px);
  -ms-transform: translateY(-12px);
  transform: translateY(-12px);
}

/* =============== Post =============== */

.sv-blog-post {
  margin-bottom: 30px;
}

.sv-blog-isotope .nk-blog-post {
  margin-bottom: 40px;
}

.sv-post-title {
  margin-bottom: 10px;
}

.sv-post-title > a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: 0.15s color;
  -o-transition: 0.15s color;
  transition: 0.15s color;
}

.sv-post-title > a:hover,
.sv-post-title > a.hover {
  color: #168add;
}

.sv-post-img {
  position: relative;
  display: block;
  overflow: hidden;
  -webkit-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}

.sv-post-img img {
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform 0.15s ease-in-out;
  transition: -webkit-transform 0.15s ease-in-out;
  -o-transition: transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  will-change: transform;
}

.sv-blog-post:not(.sv-blog-post-single):hover .sv-post-img img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.sv-post-img:hover {
  opacity: 0.8;
}

.sv-post-img .sv-post-comments-count {
  position: absolute;
  display: block;
  right: 10px;
  bottom: 10px;
  min-width: 33px;
  height: 29px;
  padding: 0 8px;
  font-weight: 600;
  line-height: 29px;
  text-align: center;
  vertical-align: text-top;
  background-color: #fff;
  border-radius: 50%;
}

.sv-post-img .sv-post-comments-count,
.sv-post-img .sv-post-comments-count:focus,
.sv-post-img .sv-post-comments-count:hover,
.sv-post-img .sv-post-comments-count:active {
  color: #171e22;
  text-decoration: none;
}

.sv-post-img .sv-post-comments-count::after {
  content: "";
  position: absolute;
  display: inline-block;
  bottom: -2px;
  left: 65%;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 9px solid #fff;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.sv-post-by {
  margin-top: 15px;
  font-size: 0.8em;
}

.sv-post-by::after {
  content: "";
  display: block;
  clear: both;
}

.sv-post-by img {
  height: auto;
  margin-right: 11px;
}

.sv-post-categories {
  float: right;
  margin-top: 6px;
  font-size: 1rem;
}

.sv-post-categories span,
.sv-post-categories a {
  padding: 2px 19px;
  color: #fff;
  background-color: #293139;
  border-radius: 4px;
}

.sv-post-categories span + span,
.sv-post-categories span + a,
.sv-post-categories a + span,
.sv-post-categories a + a {
  margin-left: 7px;
}

.sv-post-img .sv-post-categories {
  position: absolute;
  top: 10px;
  left: 0;
}

.sv-post-img .sv-post-categories span,
.sv-post-img .sv-post-categories a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.sv-post-date {
  margin-top: 5px;
  font-size: 0.9em;
  color: #7f8b92;
}

.sv-post-date svg,
.sv-post-date span {
  margin-right: 6px;
  font-size: 1rem;
}

.sv-post-date svg ~ svg,
.sv-post-date svg ~ span,
.sv-post-date span ~ svg,
.sv-post-date span ~ span {
  margin-left: 10px;
}

.sv-post-date a {
  color: inherit;
  text-decoration: none;
}

.sv-post-date a:hover,
.sv-post-date a.hover,
.sv-post-date a:focus,
.sv-post-date a:active {
  color: #168add;
}

.sv-blog-post-border-bottom {
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid #293139;
}

.sv-post-share {
  --card-bg: #0f131c;
  --card-border: #1a2333;
  --card-fg: #e6eef7;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--card-fg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 24px;
  margin: 0 auto 24px;
  max-width: 1100px; /* matches your wide screenshot */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.sv-post-share > svg,
.sv-post-share > span {
  margin-bottom: 0;
}

.sv-post-share ul {
  margin-left: auto;
}

.sv-post-text::after,
.sv-post-text::before {
  content: "";
  display: block;
  clear: both;
}

.sv-post-text .pull-right,
.sv-post-text .pull-left,
.sv-post-text .float-right,
.sv-post-text .float-left {
  margin: 20px;
}

.sv-post-text .pull-right,
.sv-post-text .float-right {
  margin-right: 0;
}

.sv-post-text .pull-left,
.sv-post-text .float-left {
  margin-left: 0;
}

.sv-post-text > p:last-child {
  margin-bottom: 0;
}

/*------------------------------------------------------------------

  Bootstrap

 -------------------------------------------------------------------*/

.row.vertical-gap > [class*="col-"] {
  padding-top: 30px;
}

.row.vertical-gap {
  margin-top: -30px;
}

.row.sm-gap {
  margin-right: -10px;
  margin-left: -10px;
}

.row.sm-gap > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
}

.row.sm-gap.vertical-gap > [class*="col-"] {
  padding-top: 20px;
}

.row.sm-gap.vertical-gap {
  margin-top: -20px;
}

.row.md-gap {
  margin-right: -22.5px;
  margin-left: -22.5px;
}

.row.md-gap > [class*="col-"] {
  padding-right: 22.5px;
  padding-left: 22.5px;
}

.row.md-gap.vertical-gap > [class*="col-"] {
  padding-top: 45px;
}

.row.md-gap.vertical-gap {
  margin-top: -45px;
}

.row.lg-gap {
  margin-right: -30px;
  margin-left: -30px;
}

.row.lg-gap > [class*="col-"] {
  padding-right: 30px;
  padding-left: 30px;
}

.row.lg-gap.vertical-gap > [class*="col-"] {
  padding-top: 65px;
}

.row.lg-gap.vertical-gap {
  margin-top: -65px;
}

.thead-default th {
  color: #303e47;
  background-color: #f7f7f7;
}

.table thead th,
.table td,
.table th {
  border-color: #f2f2f2;
}

.modal-content {
  background-color: #171e22;
}

.modal-content .close {
  color: #fff;
  text-shadow: none;
}

.modal-header {
  padding: 20px 25px;
  border-bottom-color: #232930;
}

.modal-body {
  padding: 20px 25px;
}

.modal-footer {
  padding: 20px 25px;
  border-top-color: #232930;
}

/* =============== Buttons =============== */
.sv-btn {
  display: inline-block;
  padding: 9px 19px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0;
  -webkit-transition: 0.15s all;
  -o-transition: 0.15s all;
  transition: 0.15s all;
}

.sv-btn,
.sv-btn:hover,
.sv-btn.hover,
.sv-btn:active,
.sv-btn.active,
.sv-btn:focus {
  color: #fff;
  text-decoration: none;
}

.sv-btn.sv-btn-outline {
  padding-top: 8px;
  padding-bottom: 8px;
}

.sv-btn-xs {
  padding: 6px 15px;
  font-size: 0.8rem;
}

.sv-btn-xs.sv-btn-outline {
  padding-top: 5px;
  padding-bottom: 5px;
}

.sv-btn-sm {
  padding: 7px 17px;
}

.sv-btn-sm.sv-btn-outline {
  padding-top: 6px;
  padding-bottom: 6px;
}

.sv-btn-lg {
  padding: 12px 22px;
}

.sv-btn-lg.sv-btn-outline {
  padding-top: 11px;
  padding-bottom: 11px;
}

.sv-btn-x2 {
  padding: 14px 25px;
  font-size: 1rem;
}

.sv-btn-x2.sv-btn-outline {
  padding-top: 13px;
  padding-bottom: 13px;
}

.sv-btn-x3 {
  padding: 18px 30px;
  font-size: 1.1rem;
}

.sv-btn-x3.sv-btn-outline {
  padding-top: 17px;
  padding-bottom: 17px;
}

.sv-btn-x4 {
  padding: 20px 45px;
  font-size: 1.2rem;
}

.sv-btn-x4.sv-btn-outline {
  padding-top: 19px;
  padding-bottom: 19px;
}

.sv-btn-color-main-1 {
  background-color: #168add;
  border-color: #00375f;
  border-style: solid;
}

.sv-btn-color-main-1:hover,
.sv-btn-color-main-1.hover {
  background-color: #00375f;
  border-color: #168add;
}

.sv-btn-color-main-1:active,
.sv-btn-color-main-1.active {
  background-color: #00375f;
  border-color: #168add;
}

.sv-btn-color-main-1.sv-btn-outline {
  color: #168add;
}

.sv-btn-color-main-1.sv-btn-outline:hover,
.sv-btn-color-main-1.sv-btn-outline.hover {
  color: #0060a5;
}

.sv-btn-color-main-1.sv-btn-outline:active,
.sv-btn-color-main-1.sv-btn-outline.active {
  color: #0060a5;
}

.sv-btn-color-main-2 {
  background-color: #a714b9;
  border-color: #750e82;
  border-style: solid;
}

.sv-btn-color-main-2:hover,
.sv-btn-color-main-2.hover {
  background-color: #c818de;
  border-color: #d531e9;
}

.sv-btn-color-main-2:active,
.sv-btn-color-main-2.active {
  background-color: #d531e9;
  border-color: #db51ec;
}

.sv-btn-color-main-2.sv-btn-outline {
  color: #a714b9;
}

.sv-btn-color-main-2.sv-btn-outline:hover,
.sv-btn-color-main-2.sv-btn-outline.hover {
  color: #7d0f8b;
}

.sv-btn-color-main-2.sv-btn-outline:active,
.sv-btn-color-main-2.sv-btn-outline.active {
  color: #540a5d;
}

.sv-btn-color-main-3 {
  background-color: #38a220;
  border-color: #266f16;
  border-style: solid;
}

.sv-btn-color-main-3:hover,
.sv-btn-color-main-3.hover {
  background-color: #44c427;
  border-color: #55d737;
}

.sv-btn-color-main-3:active,
.sv-btn-color-main-3.active {
  background-color: #55d737;
  border-color: #6edd55;
}

.sv-btn-color-main-3.sv-btn-outline {
  color: #38a220;
}

.sv-btn-color-main-3.sv-btn-outline:hover,
.sv-btn-color-main-3.sv-btn-outline.hover {
  color: #297718;
}

.sv-btn-color-main-3.sv-btn-outline:active,
.sv-btn-color-main-3.sv-btn-outline.active {
  color: #1b4d0f;
}

.sv-btn-color-main-4 {
  background-color: #22a2b1;
  border-color: #18737e;
  border-style: solid;
}

.sv-btn-color-main-4:hover,
.sv-btn-color-main-4.hover {
  background-color: #29c1d3;
  border-color: #44cbdb;
}

.sv-btn-color-main-4:active,
.sv-btn-color-main-4.active {
  background-color: #44cbdb;
  border-color: #62d4e1;
}

.sv-btn-color-main-4.sv-btn-outline {
  color: #22a2b1;
}

.sv-btn-color-main-4.sv-btn-outline:hover,
.sv-btn-color-main-4.sv-btn-outline.hover {
  color: #1a7b86;
}

.sv-btn-color-main-4.sv-btn-outline:active,
.sv-btn-color-main-4.sv-btn-outline.active {
  color: #12545b;
}

.sv-btn-color-main-5 {
  background-color: #1464d2;
  border-color: #0f499a;
  border-style: solid;
}

.sv-btn-color-main-5:hover,
.sv-btn-color-main-5.hover {
  background-color: #2578ea;
  border-color: #458ced;
}

.sv-btn-color-main-5:active,
.sv-btn-color-main-5.active {
  background-color: #458ced;
  border-color: #66a0f0;
}

.sv-btn-color-main-5.sv-btn-outline {
  color: #1464d2;
}

.sv-btn-color-main-5.sv-btn-outline:hover,
.sv-btn-color-main-5.sv-btn-outline.hover {
  color: #104ea3;
}

.sv-btn-color-main-5.sv-btn-outline:active,
.sv-btn-color-main-5.sv-btn-outline.active {
  color: #0b3875;
}

.sv-btn-color-main-6 {
  background-color: #ef9e2b;
  border-color: #cd7f0f;
  border-style: solid;
}

.sv-btn-color-main-6:hover,
.sv-btn-color-main-6.hover {
  background-color: #f2af51;
  border-color: #f4bf72;
}

.sv-btn-color-main-6:active,
.sv-btn-color-main-6.active {
  background-color: #f4bf72;
  border-color: #f7ce93;
}

.sv-btn-color-main-6.sv-btn-outline {
  color: #ef9e2b;
}

.sv-btn-color-main-6.sv-btn-outline:hover,
.sv-btn-color-main-6.sv-btn-outline.hover {
  color: #d78510;
}

.sv-btn-color-main-6.sv-btn-outline:active,
.sv-btn-color-main-6.sv-btn-outline.active {
  color: #a7670d;
}

.sv-btn-color-primary {
  background-color: #0275d8;
  border-color: #01549b;
  border-style: solid;
}

.sv-btn-color-primary:hover,
.sv-btn-color-primary.hover {
  background-color: #068bfd;
  border-color: #299bfd;
}

.sv-btn-color-primary:active,
.sv-btn-color-primary.active {
  background-color: #299bfd;
  border-color: #4dacfd;
}

.sv-btn-color-primary.sv-btn-outline {
  color: #0275d8;
}

.sv-btn-color-primary.sv-btn-outline:hover,
.sv-btn-color-primary.sv-btn-outline.hover {
  color: #025aa5;
}

.sv-btn-color-primary.sv-btn-outline:active,
.sv-btn-color-primary.sv-btn-outline.active {
  color: #013e73;
}

.sv-btn-color-success {
  background-color: #38a220;
  border-color: #266f16;
  border-style: solid;
}

.sv-btn-color-success:hover,
.sv-btn-color-success.hover {
  background-color: #44c427;
  border-color: #55d737;
}

.sv-btn-color-success:active,
.sv-btn-color-success.active {
  background-color: #55d737;
  border-color: #6edd55;
}

.sv-btn-color-success.sv-btn-outline {
  color: #38a220;
}

.sv-btn-color-success.sv-btn-outline:hover,
.sv-btn-color-success.sv-btn-outline.hover {
  color: #297718;
}

.sv-btn-color-success.sv-btn-outline:active,
.sv-btn-color-success.sv-btn-outline.active {
  color: #1b4d0f;
}

.sv-btn-color-info {
  background-color: #22a2b1;
  border-color: #18737e;
  border-style: solid;
}

.sv-btn-color-info:hover,
.sv-btn-color-info.hover {
  background-color: #29c1d3;
  border-color: #44cbdb;
}

.sv-btn-color-info:active,
.sv-btn-color-info.active {
  background-color: #44cbdb;
  border-color: #62d4e1;
}

.sv-btn-color-info.sv-btn-outline {
  color: #22a2b1;
}

.sv-btn-color-info.sv-btn-outline:hover,
.sv-btn-color-info.sv-btn-outline.hover {
  color: #1a7b86;
}

.sv-btn-color-info.sv-btn-outline:active,
.sv-btn-color-info.sv-btn-outline.active {
  color: #12545b;
}

.sv-btn-color-warning {
  background-color: #ef9e2b;
  border-color: #cd7f0f;
  border-style: solid;
}

.sv-btn-color-warning:hover,
.sv-btn-color-warning.hover {
  background-color: #f2af51;
  border-color: #f4bf72;
}

.sv-btn-color-warning:active,
.sv-btn-color-warning.active {
  background-color: #f4bf72;
  border-color: #f7ce93;
}

.sv-btn-color-warning.sv-btn-outline {
  color: #ef9e2b;
}

.sv-btn-color-warning.sv-btn-outline:hover,
.sv-btn-color-warning.sv-btn-outline.hover {
  color: #d78510;
}

.sv-btn-color-warning.sv-btn-outline:active,
.sv-btn-color-warning.sv-btn-outline.active {
  color: #a7670d;
}

.sv-btn-color-danger {
  background-color: #e2361f;
  border-color: #ad2816;
  border-style: solid;
}

.sv-btn-color-danger:hover,
.sv-btn-color-danger.hover {
  background-color: #e75643;
  border-color: #eb7363;
}

.sv-btn-color-danger:active,
.sv-btn-color-danger.active {
  background-color: #eb7363;
  border-color: #ef8f82;
}

.sv-btn-color-danger.sv-btn-outline {
  color: #e2361f;
}

.sv-btn-color-danger.sv-btn-outline:hover,
.sv-btn-color-danger.sv-btn-outline.hover {
  color: #b62a18;
}

.sv-btn-color-danger.sv-btn-outline:active,
.sv-btn-color-danger.sv-btn-outline.active {
  color: #892012;
}

.sv-btn-color-white {
  background-color: #fff;
  border-color: #e0e0e0;
  border-style: solid;
}

.sv-btn-color-white,
.sv-btn-color-white:hover,
.sv-btn-color-white.hover,
.sv-btn-color-white:active,
.sv-btn-color-white.active,
.sv-btn-color-white:focus {
  color: #171e22;
}

.sv-btn-color-white:hover,
.sv-btn-color-white.hover {
  background-color: #e0e0e0;
  border-color: #d1d1d1;
}

.sv-btn-color-white:active,
.sv-btn-color-white.active {
  background-color: #d9d9d9;
  border-color: #c7c7c7;
}

.sv-btn-color-white.sv-btn-outline {
  color: #fff;
}

.sv-btn-color-white.sv-btn-outline:hover,
.sv-btn-color-white.sv-btn-outline.hover {
  color: #e6e6e6;
}

.sv-btn-color-white.sv-btn-outline:active,
.sv-btn-color-white.sv-btn-outline.active {
  color: #cccccc;
}

.sv-btn-color-black {
  background-color: #000;
  border-color: black;
  border-style: solid;
}

.sv-btn-color-black:hover,
.sv-btn-color-black.hover {
  background-color: #141414;
  border-color: #262626;
}

.sv-btn-color-black:active,
.sv-btn-color-black.active {
  background-color: #262626;
  border-color: #383838;
}

.sv-btn-color-black.sv-btn-outline {
  color: #000;
}

.sv-btn-color-black.sv-btn-outline:hover,
.sv-btn-color-black.sv-btn-outline.hover {
  color: black;
}

.sv-btn-color-black.sv-btn-outline:active,
.sv-btn-color-black.sv-btn-outline.active {
  color: black;
}

.sv-btn-color-dark-1 {
  background-color: #171e22;
  border-color: black;
  border-style: solid;
}

.sv-btn-color-dark-1:hover,
.sv-btn-color-dark-1.hover {
  background-color: #27333a;
  border-color: #364650;
}

.sv-btn-color-dark-1:active,
.sv-btn-color-dark-1.active {
  background-color: #364650;
  border-color: #445965;
}

.sv-btn-color-dark-1.sv-btn-outline {
  color: #171e22;
}

.sv-btn-color-dark-1.sv-btn-outline:hover,
.sv-btn-color-dark-1.sv-btn-outline.hover {
  color: #020304;
}

.sv-btn-color-dark-1.sv-btn-outline:active,
.sv-btn-color-dark-1.sv-btn-outline.active {
  color: black;
}

.sv-btn-color-dark-2 {
  background-color: #232930;
  border-color: #090b0d;
  border-style: solid;
}

.sv-btn-color-dark-2:hover,
.sv-btn-color-dark-2.hover {
  background-color: #343d48;
  border-color: #434f5c;
}

.sv-btn-color-dark-2:active,
.sv-btn-color-dark-2.active {
  background-color: #434f5c;
  border-color: #526071;
}

.sv-btn-color-dark-2.sv-btn-outline {
  color: #232930;
}

.sv-btn-color-dark-2.sv-btn-outline:hover,
.sv-btn-color-dark-2.sv-btn-outline.hover {
  color: #0d1013;
}

.sv-btn-color-dark-2.sv-btn-outline:active,
.sv-btn-color-dark-2.sv-btn-outline.active {
  color: black;
}

.sv-btn-color-dark-3 {
  background-color: #293139;
  border-color: #101215;
  border-style: solid;
}

.sv-btn-color-dark-3:hover,
.sv-btn-color-dark-3.hover {
  background-color: #3b4550;
  border-color: #4a5665;
}

.sv-btn-color-dark-3:active,
.sv-btn-color-dark-3.active {
  background-color: #4a5665;
  border-color: #59687a;
}

.sv-btn-color-dark-3.sv-btn-outline {
  color: #293139;
}

.sv-btn-color-dark-3.sv-btn-outline:hover,
.sv-btn-color-dark-3.sv-btn-outline.hover {
  color: #14171b;
}

.sv-btn-color-dark-3.sv-btn-outline:active,
.sv-btn-color-dark-3.sv-btn-outline.active {
  color: black;
}

.sv-btn-color-dark-4 {
  background-color: #303e47;
  border-color: #171e22;
  border-style: solid;
}

.sv-btn-color-dark-4:hover,
.sv-btn-color-dark-4.hover {
  background-color: #40545f;
  border-color: #4f6674;
}

.sv-btn-color-dark-4:active,
.sv-btn-color-dark-4.active {
  background-color: #4f6674;
  border-color: #5d7989;
}

.sv-btn-color-dark-4.sv-btn-outline {
  color: #303e47;
}

.sv-btn-color-dark-4.sv-btn-outline:hover,
.sv-btn-color-dark-4.sv-btn-outline.hover {
  color: #1b2328;
}

.sv-btn-color-dark-4.sv-btn-outline:active,
.sv-btn-color-dark-4.sv-btn-outline.active {
  color: #07090a;
}

.sv-btn-hover-color-main-1.sv-btn-color-white:hover,
.sv-btn-hover-color-main-1.sv-btn-color-white.hover,
.sv-btn-hover-color-main-1.sv-btn-color-white:active,
.sv-btn-hover-color-main-1.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-main-1:hover,
.sv-btn-hover-color-main-1.hover {
  background-color: #168add;
  border-color: #a5102c;
}

.sv-btn-hover-color-main-1:active,
.sv-btn-hover-color-main-1.active {
  background-color: #c11334;
  border-color: #8a0e25;
}

.sv-btn-hover-color-main-1.sv-btn-outline:hover,
.sv-btn-hover-color-main-1.sv-btn-outline.hover {
  color: #af112f;
}

.sv-btn-hover-color-main-1.sv-btn-outline:active,
.sv-btn-hover-color-main-1.sv-btn-outline.active {
  color: #800d22;
}

.sv-btn-hover-color-main-2.sv-btn-color-white:hover,
.sv-btn-hover-color-main-2.sv-btn-color-white.hover,
.sv-btn-hover-color-main-2.sv-btn-color-white:active,
.sv-btn-hover-color-main-2.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-main-2:hover,
.sv-btn-hover-color-main-2.hover {
  background-color: #a714b9;
  border-color: #750e82;
}

.sv-btn-hover-color-main-2:active,
.sv-btn-hover-color-main-2.active {
  background-color: #8e119d;
  border-color: #5c0b66;
}

.sv-btn-hover-color-main-2.sv-btn-outline:hover,
.sv-btn-hover-color-main-2.sv-btn-outline.hover {
  color: #7d0f8b;
}

.sv-btn-hover-color-main-2.sv-btn-outline:active,
.sv-btn-hover-color-main-2.sv-btn-outline.active {
  color: #540a5d;
}

.sv-btn-hover-color-main-3.sv-btn-color-white:hover,
.sv-btn-hover-color-main-3.sv-btn-color-white.hover,
.sv-btn-hover-color-main-3.sv-btn-color-white:active,
.sv-btn-hover-color-main-3.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-main-3:hover,
.sv-btn-hover-color-main-3.hover {
  background-color: #38a220;
  border-color: #266f16;
}

.sv-btn-hover-color-main-3:active,
.sv-btn-hover-color-main-3.active {
  background-color: #2f881b;
  border-color: #1e5511;
}

.sv-btn-hover-color-main-3.sv-btn-outline:hover,
.sv-btn-hover-color-main-3.sv-btn-outline.hover {
  color: #297718;
}

.sv-btn-hover-color-main-3.sv-btn-outline:active,
.sv-btn-hover-color-main-3.sv-btn-outline.active {
  color: #1b4d0f;
}

.sv-btn-hover-color-main-4.sv-btn-color-white:hover,
.sv-btn-hover-color-main-4.sv-btn-color-white.hover,
.sv-btn-hover-color-main-4.sv-btn-color-white:active,
.sv-btn-hover-color-main-4.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-main-4:hover,
.sv-btn-hover-color-main-4.hover {
  background-color: #22a2b1;
  border-color: #18737e;
}

.sv-btn-hover-color-main-4:active,
.sv-btn-hover-color-main-4.active {
  background-color: #1d8b97;
  border-color: #135c64;
}

.sv-btn-hover-color-main-4.sv-btn-outline:hover,
.sv-btn-hover-color-main-4.sv-btn-outline.hover {
  color: #1a7b86;
}

.sv-btn-hover-color-main-4.sv-btn-outline:active,
.sv-btn-hover-color-main-4.sv-btn-outline.active {
  color: #12545b;
}

.sv-btn-hover-color-main-5.sv-btn-color-white:hover,
.sv-btn-hover-color-main-5.sv-btn-color-white.hover,
.sv-btn-hover-color-main-5.sv-btn-color-white:active,
.sv-btn-hover-color-main-5.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-main-5:hover,
.sv-btn-hover-color-main-5.hover {
  background-color: #1464d2;
  border-color: #0f499a;
}

.sv-btn-hover-color-main-5:active,
.sv-btn-hover-color-main-5.active {
  background-color: #1157b6;
  border-color: #0c3c7e;
}

.sv-btn-hover-color-main-5.sv-btn-outline:hover,
.sv-btn-hover-color-main-5.sv-btn-outline.hover {
  color: #104ea3;
}

.sv-btn-hover-color-main-5.sv-btn-outline:active,
.sv-btn-hover-color-main-5.sv-btn-outline.active {
  color: #0b3875;
}

.sv-btn-hover-color-main-6.sv-btn-color-white:hover,
.sv-btn-hover-color-main-6.sv-btn-color-white.hover,
.sv-btn-hover-color-main-6.sv-btn-color-white:active,
.sv-btn-hover-color-main-6.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-main-6:hover,
.sv-btn-hover-color-main-6.hover {
  background-color: #ef9e2b;
  border-color: #cd7f0f;
}

.sv-btn-hover-color-main-6:active,
.sv-btn-hover-color-main-6.active {
  background-color: #ea9012;
  border-color: #b16d0d;
}

.sv-btn-hover-color-main-6.sv-btn-outline:hover,
.sv-btn-hover-color-main-6.sv-btn-outline.hover {
  color: #d78510;
}

.sv-btn-hover-color-main-6.sv-btn-outline:active,
.sv-btn-hover-color-main-6.sv-btn-outline.active {
  color: #a7670d;
}

.sv-btn-hover-color-primary.sv-btn-color-white:hover,
.sv-btn-hover-color-primary.sv-btn-color-white.hover,
.sv-btn-hover-color-primary.sv-btn-color-white:active,
.sv-btn-hover-color-primary.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-primary:hover,
.sv-btn-hover-color-primary.hover {
  background-color: #0275d8;
  border-color: #01549b;
}

.sv-btn-hover-color-primary:active,
.sv-btn-hover-color-primary.active {
  background-color: #0265ba;
  border-color: #01447d;
}

.sv-btn-hover-color-primary.sv-btn-outline:hover,
.sv-btn-hover-color-primary.sv-btn-outline.hover {
  color: #025aa5;
}

.sv-btn-hover-color-primary.sv-btn-outline:active,
.sv-btn-hover-color-primary.sv-btn-outline.active {
  color: #013e73;
}

.sv-btn-hover-color-success.sv-btn-color-white:hover,
.sv-btn-hover-color-success.sv-btn-color-white.hover,
.sv-btn-hover-color-success.sv-btn-color-white:active,
.sv-btn-hover-color-success.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-success:hover,
.sv-btn-hover-color-success.hover {
  background-color: #38a220;
  border-color: #266f16;
}

.sv-btn-hover-color-success:active,
.sv-btn-hover-color-success.active {
  background-color: #2f881b;
  border-color: #1e5511;
}

.sv-btn-hover-color-success.sv-btn-outline:hover,
.sv-btn-hover-color-success.sv-btn-outline.hover {
  color: #297718;
}

.sv-btn-hover-color-success.sv-btn-outline:active,
.sv-btn-hover-color-success.sv-btn-outline.active {
  color: #1b4d0f;
}

.sv-btn-hover-color-info.sv-btn-color-white:hover,
.sv-btn-hover-color-info.sv-btn-color-white.hover,
.sv-btn-hover-color-info.sv-btn-color-white:active,
.sv-btn-hover-color-info.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-info:hover,
.sv-btn-hover-color-info.hover {
  background-color: #22a2b1;
  border-color: #18737e;
}

.sv-btn-hover-color-info:active,
.sv-btn-hover-color-info.active {
  background-color: #1d8b97;
  border-color: #135c64;
}

.sv-btn-hover-color-info.sv-btn-outline:hover,
.sv-btn-hover-color-info.sv-btn-outline.hover {
  color: #1a7b86;
}

.sv-btn-hover-color-info.sv-btn-outline:active,
.sv-btn-hover-color-info.sv-btn-outline.active {
  color: #12545b;
}

.sv-btn-hover-color-warning.sv-btn-color-white:hover,
.sv-btn-hover-color-warning.sv-btn-color-white.hover,
.sv-btn-hover-color-warning.sv-btn-color-white:active,
.sv-btn-hover-color-warning.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-warning:hover,
.sv-btn-hover-color-warning.hover {
  background-color: #ef9e2b;
  border-color: #cd7f0f;
}

.sv-btn-hover-color-warning:active,
.sv-btn-hover-color-warning.active {
  background-color: #ea9012;
  border-color: #b16d0d;
}

.sv-btn-hover-color-warning.sv-btn-outline:hover,
.sv-btn-hover-color-warning.sv-btn-outline.hover {
  color: #d78510;
}

.sv-btn-hover-color-warning.sv-btn-outline:active,
.sv-btn-hover-color-warning.sv-btn-outline.active {
  color: #a7670d;
}

.sv-btn-hover-color-danger.sv-btn-color-white:hover,
.sv-btn-hover-color-danger.sv-btn-color-white.hover,
.sv-btn-hover-color-danger.sv-btn-color-white:active,
.sv-btn-hover-color-danger.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-danger:hover,
.sv-btn-hover-color-danger.hover {
  background-color: #e2361f;
  border-color: #ad2816;
}

.sv-btn-hover-color-danger:active,
.sv-btn-hover-color-danger.active {
  background-color: #c82f1a;
  border-color: #922213;
}

.sv-btn-hover-color-danger.sv-btn-outline:hover,
.sv-btn-hover-color-danger.sv-btn-outline.hover {
  color: #b62a18;
}

.sv-btn-hover-color-danger.sv-btn-outline:active,
.sv-btn-hover-color-danger.sv-btn-outline.active {
  color: #892012;
}

.sv-btn-hover-color-white:hover,
.sv-btn-hover-color-white.hover,
.sv-btn-hover-color-white:active,
.sv-btn-hover-color-white.active,
.sv-btn-hover-color-white:focus {
  color: #171e22;
}

.sv-btn-hover-color-white:hover,
.sv-btn-hover-color-white.hover {
  background-color: #fff;
  border-color: #e0e0e0;
}

.sv-btn-hover-color-white:active,
.sv-btn-hover-color-white.active {
  background-color: #f0f0f0;
  border-color: #d1d1d1;
}

.sv-btn-hover-color-white.sv-btn-outline:hover,
.sv-btn-hover-color-white.sv-btn-outline.hover {
  color: #e6e6e6;
}

.sv-btn-hover-color-white.sv-btn-outline:active,
.sv-btn-hover-color-white.sv-btn-outline.active {
  color: #cccccc;
}

.sv-btn-hover-color-black.sv-btn-color-white:hover,
.sv-btn-hover-color-black.sv-btn-color-white.hover,
.sv-btn-hover-color-black.sv-btn-color-white:active,
.sv-btn-hover-color-black.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-black:hover,
.sv-btn-hover-color-black.hover {
  background-color: #000;
  border-color: black;
}

.sv-btn-hover-color-black:active,
.sv-btn-hover-color-black.active {
  background-color: black;
  border-color: black;
}

.sv-btn-hover-color-black.sv-btn-outline:hover,
.sv-btn-hover-color-black.sv-btn-outline.hover {
  color: black;
}

.sv-btn-hover-color-black.sv-btn-outline:active,
.sv-btn-hover-color-black.sv-btn-outline.active {
  color: black;
}

.sv-btn-hover-color-dark-1.sv-btn-color-white:hover,
.sv-btn-hover-color-dark-1.sv-btn-color-white.hover,
.sv-btn-hover-color-dark-1.sv-btn-color-white:active,
.sv-btn-hover-color-dark-1.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-dark-1:hover,
.sv-btn-hover-color-dark-1.hover {
  background-color: #171e22;
  border-color: black;
}

.sv-btn-hover-color-dark-1:active,
.sv-btn-hover-color-dark-1.active {
  background-color: #0b0e10;
  border-color: black;
}

.sv-btn-hover-color-dark-1.sv-btn-outline:hover,
.sv-btn-hover-color-dark-1.sv-btn-outline.hover {
  color: #020304;
}

.sv-btn-hover-color-dark-1.sv-btn-outline:active,
.sv-btn-hover-color-dark-1.sv-btn-outline.active {
  color: black;
}

.sv-btn-hover-color-dark-2.sv-btn-color-white:hover,
.sv-btn-hover-color-dark-2.sv-btn-color-white.hover,
.sv-btn-hover-color-dark-2.sv-btn-color-white:active,
.sv-btn-hover-color-dark-2.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-dark-2:hover,
.sv-btn-hover-color-dark-2.hover {
  background-color: #232930;
  border-color: #090b0d;
}

.sv-btn-hover-color-dark-2:active,
.sv-btn-hover-color-dark-2.active {
  background-color: #161a1e;
  border-color: black;
}

.sv-btn-hover-color-dark-2.sv-btn-outline:hover,
.sv-btn-hover-color-dark-2.sv-btn-outline.hover {
  color: #0d1013;
}

.sv-btn-hover-color-dark-2.sv-btn-outline:active,
.sv-btn-hover-color-dark-2.sv-btn-outline.active {
  color: black;
}

.sv-btn-hover-color-dark-3.sv-btn-color-white:hover,
.sv-btn-hover-color-dark-3.sv-btn-color-white.hover,
.sv-btn-hover-color-dark-3.sv-btn-color-white:active,
.sv-btn-hover-color-dark-3.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-dark-3:hover,
.sv-btn-hover-color-dark-3.hover {
  background-color: #293139;
  border-color: #101215;
}

.sv-btn-hover-color-dark-3:active,
.sv-btn-hover-color-dark-3.active {
  background-color: #1d2127;
  border-color: #030304;
}

.sv-btn-hover-color-dark-3.sv-btn-outline:hover,
.sv-btn-hover-color-dark-3.sv-btn-outline.hover {
  color: #14171b;
}

.sv-btn-hover-color-dark-3.sv-btn-outline:active,
.sv-btn-hover-color-dark-3.sv-btn-outline.active {
  color: black;
}

.sv-btn-hover-color-dark-4.sv-btn-color-white:hover,
.sv-btn-hover-color-dark-4.sv-btn-color-white.hover,
.sv-btn-hover-color-dark-4.sv-btn-color-white:active,
.sv-btn-hover-color-dark-4.sv-btn-color-white.active {
  color: #fff;
}

.sv-btn-hover-color-dark-4:hover,
.sv-btn-hover-color-dark-4.hover {
  background-color: #303e47;
  border-color: #171e22;
}

.sv-btn-hover-color-dark-4:active,
.sv-btn-hover-color-dark-4.active {
  background-color: #232e34;
  border-color: #0b0e10;
}

.sv-btn-hover-color-dark-4.sv-btn-outline:hover,
.sv-btn-hover-color-dark-4.sv-btn-outline.hover {
  color: #1b2328;
}

.sv-btn-hover-color-dark-4.sv-btn-outline:active,
.sv-btn-hover-color-dark-4.sv-btn-outline.active {
  color: #07090a;
}

.sv-btn-outline {
  border-width: 1px;
}

.sv-btn-outline,
.sv-btn-outline:hover,
.sv-btn-outline.hover,
.sv-btn-outline:active,
.sv-btn-outline.active,
.sv-btn-outline:focus {
  color: inherit;
  background-color: transparent;
}

.sv-btn-rounded {
  border-radius: 4px;
}

.sv-btn-block {
  display: block;
  width: 100%;
}

.sv-btn > .icon {
  margin-right: 3px;
}

.sv-btn > span + .icon {
  margin-right: 0;
  margin-left: 3px;
}

/* =============== Sidebar Feature Card =============== */
.feature-card--sm {
  display: flex; /* stack header → body → footer */
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(13, 17, 26, 0.86),
    rgba(13, 17, 26, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Header */
.feature-card--sm .feature-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.feature-card--sm .section-title {
  font-weight: 800;
  letter-spacing: 0.3px;
}
.feature-card--sm .feature-card__rule {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, currentColor, rgba(255, 255, 255, 0.2));
  opacity: 0.6;
}

/* Body holds only the grid or the empty state */
.feature-card--sm .feature-card__body {
  flex: 0 0 auto;
  position: relative;
  display: block;
}

/* Grid */
.recent-grid {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* use minmax(0, 1fr) so text can shrink instead of forcing early ellipsis */
.recent-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 992px) {
  .recent-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .recent-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ensure list items and cards can shrink */
.recent-grid > li,
.recent-card {
  min-width: 0;
}

/* Name — full width; ellipsis only if it truly overflows */
.recent-card__name {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0 6px; /* a bit tighter to gain characters */
  margin-top: 6px;
  font-weight: 700;
  font-size: 12.5px; /* nudge down to fit more */
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 992px) {
  .recent-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .recent-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Tile (perfect square) */
.recent-card {
  position: static;
  width: 100%;
  aspect-ratio: 1 / 1; /* equal width/height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease,
    border-color 0.15s ease;
  overflow: hidden; /* hide any overflow content */
}
.recent-card:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Avatar */
.recent-card__avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Name — full width, ellipsis only if overflow, centered */
.recent-card__name {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0 8px;
  margin-top: 0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
  text-align: center; /* ✅ centers text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty state (not inside grid) */
.recent-empty {
  text-align: center;
  padding: 12px 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

/* Footer */
.feature-card__footer {
  flex: 0 0 auto;
  position: static !important; /* prevent theme overrides */
  clear: both;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  text-align: right;
}
.feature-card__footer a {
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.feature-card__footer a:hover {
  text-decoration: underline;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .recent-grid {
    grid-auto-rows: 120px;
  }
  .recent-grid > li {
    height: 120px;
  }
  .recent-card {
    height: 100%;
  }
}

/*------------------------------------------------------------------

  Header - Navbar, Sidebar & More

 -------------------------------------------------------------------*/

/* ====== svx nav — theme fit (desktop + mobile) ====== */
:root {
  --svx-accent: #168add;
}

.svx-nav {
  background: transparent;
  padding: 0;
}
.svx-nav .container {
  display: flex;
  align-items: center;
  height: 70px;
  gap: 16px;
}

/* brand */
.svx-brand img {
  height: 46px;
  width: auto;
  display: block;
}

/* menu layout */
.svx-menu {
  margin-left: auto; /* brand left, items right (like your theme) */
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svx-menu > li {
  position: relative;
}
.svx-menu > li:last-child {
  margin-right: -21px;
}

/* links look like your theme */
.svx-menu > li > a,
.svx-dd-toggle {
  display: block;
  padding: 6px 21px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: none;
  border: 0;
  cursor: pointer;
}
.svx-menu > li > a:hover,
.svx-dd-toggle:hover {
  color: #a9a9a9;
}

/* dropdown (desktop) styled like GoodGames */
.svx-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  padding: 9px 0;
  margin-top: 12px;
  margin-left: 9px;
  background: rgba(15, 19, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 4px solid rgba(26, 35, 51, 0.35);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 10;
}
.svx-dropdown li a {
  display: block;
  padding: 8px 14px;
  color: #e5e9ef;
  white-space: nowrap;
}
.svx-dropdown li a:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* show on hover/focus (desktop) */
@media (hover: hover) and (pointer: fine) {
  .svx-has-dd:hover > .svx-dropdown,
  .svx-has-dd:focus-within > .svx-dropdown {
    display: block;
  }
}

/* burger */
.svx-toggle {
  margin-left: auto;
  display: none;
  width: 36px;
  height: 28px;
  border: 0;
  background: 0;
  cursor: pointer;
  position: relative;
}
.svx-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e9ef;
  transition: transform 0.2s, opacity 0.2s, top 0.2s, bottom 0.2s;
}
.svx-toggle span:nth-child(1) {
  top: 2px;
}
.svx-toggle span:nth-child(2) {
  top: 13px;
}
.svx-toggle span:nth-child(3) {
  bottom: 2px;
}
.svx-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.svx-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.svx-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

@media (max-width: 992px) {
  .svx-toggle {
    display: inline-block;
  }
  .svx-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #111419;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .svx-menu.svx-open {
    display: block;
  }
  .svx-menu > li > a,
  .svx-dd-toggle {
    padding: 12px 16px;
  }

  /* mobile dropdown inline */
  .svx-has-dd > .svx-dropdown {
    position: static;
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  .svx-has-dd.svx-open > .svx-dropdown {
    display: block;
  }
  .svx-dropdown li a {
    padding: 10px 16px 10px 32px;
    opacity: 0.95;
  }
  .svx-dd-toggle::after {
    content: "▸";
    margin-left: 6px;
    transition: transform 0.2s;
  }
  .svx-has-dd.svx-open > .svx-dd-toggle::after {
    transform: rotate(90deg);
  }
}

/* ===== Minimal responsive dropdown nav ===== */
.svx-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  background: #111419;
  color: #e5e9ef;
  z-index: 1000;
}
.svx-brand img {
  height: 46px;
  width: auto;
  display: block;
}

.svx-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svx-menu > li {
  position: relative;
}
.svx-menu > li > a,
.svx-dd-toggle {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.svx-menu > li > a:hover,
.svx-dd-toggle:hover {
  opacity: 0.8;
}

/* dropdown (desktop) */
.svx-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #141820;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 0;
  display: none;
  z-index: 10;
}
.svx-dropdown li a {
  display: block;
  padding: 8px 14px;
  white-space: nowrap;
}
.svx-dropdown li a:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* show on hover for pointer devices */
@media (hover: hover) and (pointer: fine) {
  .svx-has-dd:hover > .svx-dropdown,
  .svx-has-dd:focus-within > .svx-dropdown {
    display: block;
  }
}

/* mobile layout */
.svx-toggle {
  margin-left: auto;
  display: none;
  width: 36px;
  height: 28px;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.svx-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5e9ef;
  transform-origin: center;
  transition: transform 0.2s, opacity 0.2s, top 0.2s, bottom 0.2s;
}
.svx-toggle span:nth-child(1) {
  top: 2px;
}
.svx-toggle span:nth-child(2) {
  top: 13px;
}
.svx-toggle span:nth-child(3) {
  bottom: 2px;
}
.svx-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.svx-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.svx-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

@media (max-width: 992px) {
  .svx-toggle {
    display: inline-block;
  }
  .svx-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #111419;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .svx-menu.svx-open {
    display: block;
  }
  .svx-menu > li > a,
  .svx-dd-toggle {
    padding: 12px 16px;
  }

  /* mobile dropdown: inline below parent */
  .svx-has-dd > .svx-dropdown {
    position: static;
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
  }
  .svx-has-dd.svx-open > .svx-dropdown {
    display: block;
  }
  .svx-dropdown li a {
    padding: 10px 16px 10px 32px;
    opacity: 0.95;
  }
  .svx-dd-toggle::after {
    content: "▸";
    margin-left: 6px;
    transition: transform 0.2s;
  }
  .svx-has-dd.svx-open > .svx-dd-toggle::after {
    transform: rotate(90deg);
  }
}

/* === Fix: bullets ("o") showing in desktop dropdown === */
.svx-dropdown,
.svx-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* === Make burger always visible on mobile & shrink logo === */
.svx-nav .container {
  position: relative; /* anchors absolute mobile menu */
  display: flex;
  align-items: center;
  height: 70px;
  gap: 16px;
}
.svx-brand {
  flex: 0 1 auto;
  min-width: 0;
}
.svx-toggle {
  flex: 0 0 auto;
  margin-left: auto;
}

/* shrink logo + ensure space for burger */
@media (max-width: 992px) {
  .svx-nav .container {
    height: 56px;
  }
  .svx-brand img {
    height: 32px;
    max-width: 48vw;
  } /* smaller logo */
  .svx-toggle {
    display: inline-block;
  } /* force show */
  /* mobile menu panel */
  .svx-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #111419;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 1001;
  }
  .svx-menu.svx-open {
    display: block;
  }
}

/* optional: also show burger on small tablets */
@media (max-width: 1200px) and (min-width: 993px) {
  .svx-toggle {
    display: inline-block;
  }
}

/*------------------------------------------------------------------

  Navbar

 -------------------------------------------------------------------*/
/* Header */
.sv-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}

.sv-header.sv-header-opaque {
  position: relative;
}

/* Logo Top */
.sv-logo-top {
  position: relative;
  padding: 70px 10px;
  color: #fff;
  text-align: center;
}

.sv-logo-top.sv-logo-top-light,
.sv-logo-top.sv-logo-top-light.sv-logo-top-solid {
  color: inherit;
  background-color: rgba(255, 255, 255, 0.85);
}

.sv-logo-top.sv-logo-top-transparent {
  background-color: transparent;
}

.sv-logo-top,
.sv-logo-top.sv-logo-top-solid {
  background-color: rgba(23, 30, 34, 0.75);
}

/* Contacts before Top Navbar */
.sv-contacts-top {
  padding: 8px 0;
  font-size: 0.85rem;
  color: #fff;
}

.sv-contacts-top::after {
  content: "";
  display: block;
  clear: both;
}

.sv-contacts-top .sv-contacts-left {
  float: left;
}

.sv-contacts-top .sv-contacts-right {
  float: right;
}

@media (max-width: 575px) {
  .sv-contacts-top .sv-contacts-left,
  .sv-contacts-top .sv-contacts-right {
    float: none;
    text-align: center;
  }
  .sv-contacts-top .sv-contacts-right {
    margin-top: 10px;
  }
}

/* Keep bell on the RIGHT on small screens */
@media (max-width: 575.98px) {
  .sv-contacts-top .container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* left + right ends */
    min-height: 40px;
  }
  .sv-contacts-top .sv-contacts-left,
  .sv-contacts-top .sv-contacts-right {
    float: none !important; /* kill old float rules */
    text-align: initial;
    margin: 0;
  }

  /* Left socials stay left, no extra margins */
  .ps-social-inline {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
  }

  /* Right side (bell) hugs the right edge */
  .sv-contacts-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
  }
}

/* Navbar */
.sv-navbar {
  position: relative;
  padding: 27px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1.07rem;
  color: #fff;
  -webkit-transition: 0.3s background-color;
  -o-transition: 0.3s background-color;
  transition: 0.3s background-color;
  z-index: 1000;
  will-change: background-color;
}

.sv-navbar.sv-navbar-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  -webkit-transition: 0.2s transform, 0.2s visibility, 0.3s background-color;
  -o-transition: 0.2s transform, 0.2s visibility, 0.3s background-color;
  transition: 0.2s transform, 0.2s visibility, 0.3s background-color;
  will-change: transform, visibility, background-color;
}

.sv-navbar.sv-navbar-fixed.sv-onscroll-hide {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.sv-navbar.sv-navbar-fixed.sv-onscroll-show {
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.sv-navbar.sv-navbar-light,
.sv-navbar.sv-navbar-light.sv-navbar-solid {
  color: inherit;
  background-color: rgba(255, 255, 255, 0.6);
}

.sv-navbar.sv-navbar-light.sv-navbar-fixed {
  background-color: rgba(255, 255, 255, 0.9);
}

.sv-navbar.sv-navbar-transparent {
  background-color: transparent;
}

.sv-navbar,
.sv-navbar.sv-navbar-solid {
  background-color: rgba(15, 19, 28, 0.3);
}

.sv-navbar.sv-navbar-fixed {
  background-color: rgba(26, 35, 51, 0.9);
}

.sv-navbar.sv-navbar-align-center {
  text-align: center;
}

.sv-navbar.sv-navbar-align-right {
  text-align: right;
}

.sv-navbar .sv-nav-table {
  display: table;
  width: 100%;
  height: 100%;
}

.sv-navbar .sv-nav-table > * {
  display: table-cell;
  vertical-align: middle;
}

.sv-navbar .sv-nav-table > .sv-nav-row {
  display: table-row;
}

.sv-navbar .sv-nav-table > .sv-nav-row-full {
  height: 100%;
}

.sv-navbar .sv-nav-table > .sv-nav-row-center > * {
  display: table-cell;
  vertical-align: middle;
}

.sv-navbar .sv-nav-table > .sv-nav-icons,
.sv-navbar .sv-nav-table > .sv-nav-logo {
  width: 1%;
}

.sv-navbar .sv-nav-logo img {
  height: auto;
}

.sv-navbar .sv-nav-icons {
  white-space: nowrap;
}

.sv-navbar .sv-nav-icons > * {
  white-space: initial;
}

@media (max-width: 420px) {
  .sv-navbar.sv-navbar-top .sv-nav-logo {
    display: none;
  }
}

.sv-navbar a {
  color: inherit;
}

.sv-navbar ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.sv-navbar ul > li > a {
  white-space: nowrap;
}

.sv-navbar ul > li > a:hover,
.sv-navbar ul > li > a:focus {
  text-decoration: none;
}

.sv-navbar .sv-navbar-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.sv-navbar .sv-nav {
  position: relative;
  width: 100px;
}

.sv-navbar .sv-nav .sv-nav {
  padding-right: 0;
  padding-left: 0;
}

.sv-navbar .sv-nav li.single-icon > a {
  padding: 0 15px;
}

.sv-navbar .sv-nav li.single-icon > a > i,
.sv-navbar .sv-nav li.single-icon > a > span {
  height: 32px;
  font-size: 1.1rem;
  line-height: 32px;
  vertical-align: middle;
}

.sv-navbar .sv-nav li > a .sv-item-descr {
  display: block;
  font-size: 0.7em;
  font-style: italic;
  opacity: 0.7;
}

.sv-navbar .sv-nav li > a {
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition: 0.15s color;
  -o-transition: 0.15s color;
  transition: 0.15s color;
}

.sv-navbar .sv-nav li > a:hover,
.sv-navbar .sv-nav li > a.hover {
  color: rgb(169, 169, 169);
}

.sv-navbar .sv-nav li.active > a {
  color: #e0e0e0;
}

.sv-navbar .sv-nav > li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.sv-navbar .sv-nav > li:last-child {
  margin-right: -21px;
}

@media (max-width: 767px) {
  .sv-navbar .sv-nav > li:last-child {
    margin-right: -10px;
  }
}

.sv-navbar .sv-nav > li > a {
  position: relative;
  display: block;
  padding: 6px 21px;
}

@media (max-width: 1199px) {
  .sv-navbar .sv-nav > li > a {
    padding: 6px 18px;
  }
}

.sv-navbar .sv-nav .dropdown {
  position: absolute;
  display: none;
  min-width: 250px;
  padding: 9px 0;
  margin-top: 12px;
  margin-left: 9px;
  background-color: rgba(15, 19, 28, 0.9);
  border-bottom: 4px solid rgba(26, 35, 51, 0.2);
  opacity: 0;
  z-index: 1;
}

.sv-navbar .sv-nav .dropdown > li {
  position: relative;
}

.sv-navbar .sv-nav .dropdown > li > a {
  display: block;
  padding: 6px 17px;
  padding-right: 64px;
}

.sv-navbar .sv-nav .dropdown > li > a:hover {
  text-decoration: none;
}

.sv-navbar .sv-nav .sv-drop-item > a::after {
  content: " +";
}

.sv-navbar .sv-nav .sv-drop-item .sv-drop-item > a::after {
  position: absolute;
  right: 20px;
}

.sv-navbar .sv-nav .sv-drop-item .sv-drop-item .dropdown {
  top: 0;
  left: 5px;
  margin-top: -9px;
  margin-left: 100%;
}

.sv-navbar.sv-navbar-light .sv-nav .dropdown {
  background-color: #fff;
}

.sv-navbar .sv-nav-right {
  text-align: right;
}

.sv-navbar .sv-nav-right > * {
  text-align: left;
}

.sv-navbar .sv-nav-right .sv-mega-item > .dropdown {
  right: 0;
  left: auto;
}

.sv-navbar .sv-nav-center {
  text-align: center;
}

.sv-navbar .sv-nav-center > * {
  text-align: left;
}

.sv-navbar .sv-nav-center .sv-mega-item > .dropdown {
  right: 0;
  left: auto;
}

.sv-navbar .sv-drop-item.sv-drop-left .dropdown {
  margin-left: -100%;
}

/* Navbar Left */
.sv-navbar-left.sv-navbar-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  z-index: 999;
}

.sv-navbar-left.sv-navbar-side ~ .sv-main,
.sv-navbar-left.sv-navbar-side ~ .sv-search {
  margin-left: 280px;
}

.sv-navbar-left.sv-navbar-side.sv-navbar-lg {
  width: 300px;
}

.sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-main,
.sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-search {
  margin-left: 300px;
}

@media (max-width: 991px) {
  .sv-navbar-left.sv-navbar-side {
    display: none;
  }
  .sv-navbar-left.sv-navbar-side ~ .sv-main,
  .sv-navbar-left.sv-navbar-side ~ .sv-search,
  .sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-main,
  .sv-navbar-left.sv-navbar-side.sv-navbar-lg ~ .sv-search {
    margin-left: 0;
  }
}

/* Nav Togglers */
.sv-nav-toggler-right,
.sv-nav-toggler-left {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}

.sv-nav-toggler-right > li,
.sv-nav-toggler-left > li {
  display: inline-block;
}

.sv-nav-toggler-right > li + li,
.sv-nav-toggler-left > li + li {
  margin-left: 15px;
}

.sv-nav-toggler-right > li > a,
.sv-nav-toggler-left > li > a {
  display: block;
  padding: 12px;
  color: #fff;
  background-color: #171e22;
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
}

.sv-nav-toggler-right > li > a > span,
.sv-nav-toggler-left > li > a > span {
  height: 25px;
  vertical-align: text-bottom;
}

.sv-nav-toggler-left {
  right: auto;
  left: 20px;
}

/*------------------------------------------------------------------

  Navbar Side

 -------------------------------------------------------------------*/
.sv-navbar-side {
  position: fixed;
  top: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background-color: #171e22;
  z-index: 1002;
}

.sv-navbar-side.sv-navbar-left-side {
  left: 0;
  width: 250px;
  margin-left: -250px;
}

@media (max-width: 400px) {
  .sv-navbar-side.sv-navbar-left-side {
    width: 200px;
    margin-left: -200px;
  }
}

.sv-navbar-side.sv-navbar-right-side {
  right: 0;
  width: 250px;
  margin-right: -250px;
}

@media (max-width: 400px) {
  .sv-navbar-side.sv-navbar-right-side {
    width: 200px;
    margin-right: -200px;
  }
}

.sv-navbar-side.sv-navbar-lg.sv-navbar-left-side {
  width: 350px;
  margin-left: -350px;
}

@media (max-width: 550px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-left-side {
    width: 300px;
    margin-left: -300px;
  }
}

@media (max-width: 450px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-left-side {
    width: 250px;
    margin-left: -250px;
  }
}

.sv-navbar-side.sv-navbar-lg.sv-navbar-right-side {
  width: 350px;
  margin-right: -350px;
}

@media (max-width: 550px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-right-side {
    width: 300px;
    margin-right: -300px;
  }
}

@media (max-width: 450px) {
  .sv-navbar-side.sv-navbar-lg.sv-navbar-right-side {
    width: 250px;
    margin-right: -250px;
  }
}

.sv-navbar-side .sv-nav-logo {
  display: block;
  width: 100%;
  padding: 20px 25px;
}

.sv-navbar-side.sv-navbar-lg .sv-nav-logo {
  padding-top: 30px;
  padding-bottom: 30px;
}

.sv-navbar-side .nano {
  height: 100%;
  overflow-y: auto;
}

.sv-navbar-side .sv-nav {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.sv-navbar-side .sv-nav > li:last-child {
  margin-right: 0;
}

.sv-navbar-side .sv-nav .dropdown > li,
.sv-navbar-side .sv-nav > li {
  position: static;
  display: block;
}

.sv-navbar-side .sv-nav .dropdown > li > a,
.sv-navbar-side .sv-nav > li > a {
  padding: 12px 25px;
  white-space: normal;
}

.sv-navbar-side .sv-nav .sv-drop-item > a,
.sv-navbar-side .sv-nav > .sv-drop-item > a,
.sv-navbar-side .sv-nav .bropdown-back > a {
  position: relative;
}

.sv-navbar-side .sv-nav .sv-drop-item .sv-drop-item > a::after,
.sv-navbar-side .sv-nav .sv-drop-item > a::after,
.sv-navbar-side .sv-nav > .sv-drop-item > a::after {
  position: absolute;
  right: 20px;
}

.sv-navbar-side .sv-nav .dropdown {
  display: block;
  padding: 0;
  background-color: transparent;
  border-bottom: 0;
  opacity: 1;
}

.sv-navbar-side .sv-nav .dropdown::before {
  content: none;
}

.sv-navbar-side .sv-nav .sv-drop-item > .dropdown,
.sv-navbar-side .sv-nav .sv-drop-item .sv-drop-item > .dropdown {
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  margin-left: 0;
}

.sv-navbar-side .sv-nav .sv-drop-item > .dropdown > li > a,
.sv-navbar-side .sv-nav .sv-drop-item .sv-drop-item > .dropdown > li > a {
  display: none;
}

.sv-navbar-side .dropdown > .bropdown-back > a::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  color: inherit;
  border: none;
  border-top: 3px solid transparent;
  border-right: 3px solid;
  border-bottom: 3px solid transparent;
  -webkit-transition: 0.13s opacity;
  -o-transition: 0.13s opacity;
  transition: 0.13s opacity;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  will-change: opacity;
}

.sv-navbar-side .sv-nav-icons {
  list-style: none;
}

.sv-navbar-side .sv-nav-icons li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.sv-navbar-side .sv-nav-icons li > a {
  display: inline-block;
  padding: 0 15px;
}

.sv-navbar-side .sv-nav-icons li > a > i,
.sv-navbar-side .sv-nav-icons li > a > span {
  height: 32px;
  font-size: 1.2rem;
  line-height: 32px;
  vertical-align: middle;
}

.sv-navbar-overlay {
  position: fixed;
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  background-color: #000;
  opacity: 0;
  z-index: 1001;
}

/*------------------------------------------------------------------

  Typography

 -------------------------------------------------------------------*/
html {
  font-size: 14px;
}

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.7;
  letter-spacing: 0.015em;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-bottom: 1.5rem;
}

b,
strong {
  font-weight: 600;
}

label {
  font-weight: 600;
  color: #fff;
}

/* headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 1.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

h1,
.h1 {
  font-size: 3rem;
}

h2,
.h2 {
  font-size: 2.35rem;
}

h3,
.h3 {
  font-size: 1.75rem;
}

h4,
.h4 {
  font-size: 1.32rem;
}

h5,
.h5 {
  font-size: 1.02rem;
}

h6,
.h6 {
  font-size: 0.88rem;
}

.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

.display-1 {
  font-size: 4.7rem;
}

.display-2 {
  font-size: 4.2rem;
}

.display-3 {
  font-size: 3.7rem;
}

.display-4 {
  font-size: 3.2rem;
}

.sv-decorated-h,
.sv-decorated-h-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sv-decorated-h > span,
.sv-decorated-h > a,
.sv-decorated-h-2 > span,
.sv-decorated-h-2 > a {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.sv-decorated-h::after,
.sv-decorated-h::before,
.sv-decorated-h-2::after,
.sv-decorated-h-2::before {
  content: "";
  display: block;
  -webkit-box-flex: 100;
  -ms-flex: 100;
  flex: 100;
  border-bottom: 4px solid;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

.sv-decorated-h::before,
.sv-decorated-h-2::before {
  -webkit-box-flex: 20px;
  -ms-flex: 20px;
  flex: 20px;
  width: 20px;
  min-width: 20px;
}

.sv-decorated-h-2::after,
.sv-decorated-h-2::before {
  border-bottom-color: #293139;
}

.sv-decorated-h-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sv-decorated-h-3 > span,
.sv-decorated-h-3 > a {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding-right: 20px;
}

.sv-decorated-h-3::after {
  content: "";
  display: block;
  -webkit-box-flex: 100;
  -ms-flex: 100;
  flex: 100;
  border-bottom: 4px solid #168add;
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
}

/* Title */
.sv-title {
  position: relative;
  z-index: 1;
}

/* Sub Title */
.sv-sub-title {
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  color: #168add;
  z-index: 1;
}

.sv-title + .sv-sub-title {
  margin-top: 1rem;
}

/* Back title */
.sv-title-back {
  margin-bottom: 0;
  font-size: 6rem;
  color: inherit;
  opacity: 0.1;
}

.sv-title-back + * {
  position: relative;
  margin-top: -40px;
}

.sv-title-back + .sv-sub-title {
  margin-top: -50px;
}

/* Title Separator */
.sv-title-sep {
  display: block;
  margin: 30px auto;
  line-height: 0;
  color: inherit;
}

.sv-title-sep::after {
  content: "";
  display: inline-block;
  width: 80%;
  max-width: 80px;
  vertical-align: middle;
  border-bottom: 1px dotted;
  opacity: 0.4;
}

.sv-title-sep-icon {
  display: block;
  margin: 30px auto;
  line-height: 0;
  color: inherit;
}

.sv-title-sep-icon .icon {
  font-size: 1.9rem;
  vertical-align: middle;
}

.sv-title-sep-icon::before,
.sv-title-sep-icon::after {
  content: "";
  display: inline-block;
  width: 60px;
  vertical-align: middle;
  border-bottom: 1px dotted;
  opacity: 0.4;
}

.sv-title-sep-icon::before {
  margin-right: 20px;
}

.sv-title-sep-icon::after {
  margin-left: 20px;
}

/* mega menu titles */
.sv-mega-item > .dropdown > ul li > label {
  font-family: "Montserrat", sans-serif;
}

/*---------------------------
  Element Info Boxes
 ----------------------------*/
.sv-info-box {
  position: relative;
  display: block;
  padding: 24px;
  padding-right: 40px;
  padding-left: 118px;
  margin-bottom: 1.7rem;
  overflow: hidden;
  color: #fff;
  background-color: #0f131c;
  border: 1px solid #1a2333;
  border-radius: 12px;
}

.sv-info-box h1,
.sv-info-box h2,
.sv-info-box h3,
.sv-info-box h4,
.sv-info-box h5,
.sv-info-box h6,
.sv-info-box .h1,
.sv-info-box .h2,
.sv-info-box .h3,
.sv-info-box .h4,
.sv-info-box .h5,
.sv-info-box .h6 {
  margin-top: -6px;
  margin-bottom: 0.7rem;
  color: inherit;
}

.sv-info-box.sv-info-box-noicon {
  padding-left: 40px;
}

.sv-info-box .sv-info-box-icon {
  position: absolute;
  display: block;
  width: 52px;
  height: 52px;
  margin-top: -3px;
  margin-left: -85px;
  font-size: 1.7rem;
  line-height: 44px;
  text-align: center;
  border: 4px solid;
  border-radius: 26px;
}

.sv-info-box .sv-info-box-close-btn {
  display: block;
  float: right;
  margin-top: -7px;
  margin-right: -20px;
  font-size: 1.3rem;
  cursor: pointer;
}

/*------------------------------------------------------------------

  Social Icons - Header, Footer

 -------------------------------------------------------------------*/

/* Header/Footer socials (inline row, smaller tiles) */
.ps-social-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 6px; /* spacing between icons */
  align-items: center;
}

.ps-social-inline .ps-social {
  width: 28px; /* smaller tile size */
  aspect-ratio: 1 / 1;
  font-size: 14px; /* smaller icon */
  border-radius: 6px;
  background: #2a3142;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #cdd6f4;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ps-social-inline .ps-social:hover {
  transform: translateY(-2px);
  background: #334057;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35),
    0 6px 18px color-mix(in oklab, var(--brand) 45%, transparent);
  text-decoration: none;
}

/* Brand colors (same as profile page) */
.ps-social--discord {
  --brand: #5865f2;
}
.ps-social--twitch {
  --brand: #9146ff;
}
.ps-social--steam {
  --brand: #1b2838;
}
.ps-social--youtube {
  --brand: #ff0033;
}
.ps-social--facebook {
  --brand: #1877f2;
}
.ps-social--instagram {
  --brand: #e1306c;
}

/* keep your other ps-social styles */
.ps-social-inline {
  position: relative;
  z-index: 10;
}
.ps-social-inline .ps-social {
  position: relative; /* create stacking context */
  z-index: 10; /* sit above masks/stretched links */
  pointer-events: auto; /* ensure clicks are accepted */
}

/* any decorative header layers should ignore mouse events */
.header::before,
.header::after,
.nav-overlay,
.header-blur,
.header-mask {
  pointer-events: none;
}

/*------------------------------------------------------------------

  Helpers

 -------------------------------------------------------------------*/

/* =============== Text Color Helper =============== */
.text-main-1 {
  color: #168add !important;
}

.text-main-2 {
  color: #a714b9 !important;
}

.text-main-3 {
  color: #38a220 !important;
}

.text-main-4 {
  color: #22a2b1 !important;
}

.text-main-5 {
  color: #1464d2 !important;
}

.text-main-6 {
  color: #ef9e2b !important;
}

.text-primary {
  color: #0275d8 !important;
}

.text-success {
  color: #38a220 !important;
}

.text-info {
  color: #22a2b1 !important;
}

.text-warning {
  color: #ef9e2b !important;
}

.text-danger {
  color: #e2361f !important;
}

.text-white {
  color: #fff !important;
}

.text-black {
  color: #000 !important;
}

.text-dark-1 {
  color: #171e22 !important;
}

.text-dark-2 {
  color: #232930 !important;
}

.text-dark-3 {
  color: #293139 !important;
}

.text-dark-4 {
  color: #303e47 !important;
}

/* =============== Bg Color Helper =============== */
.bg-main-1 {
  background-color: #168add !important;
}

.bg-main-2 {
  background-color: #a714b9 !important;
}

.bg-main-3 {
  background-color: #38a220 !important;
}

.bg-main-4 {
  background-color: #22a2b1 !important;
}

.bg-main-5 {
  background-color: #1464d2 !important;
}

.bg-main-6 {
  background-color: #ef9e2b !important;
}

.bg-primary {
  background-color: #0275d8 !important;
}

.bg-success {
  background-color: #38a220 !important;
}

.bg-info {
  background-color: #22a2b1 !important;
}

.bg-warning {
  background-color: #ef9e2b !important;
}

.bg-danger {
  background-color: #e2361f !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-black {
  background-color: #000 !important;
}

.bg-dark-1 {
  background-color: #171e22 !important;
}

.bg-dark-2 {
  background-color: #232930 !important;
}

.bg-dark-3 {
  background-color: #293139 !important;
}

.bg-dark-4 {
  background-color: #303e47 !important;
}

/* Fix dropdown clipping */
select.form-control.custom-select {
  height: auto; /* let it grow to fit text */
  min-height: 42px; /* make it taller (tweak if needed) */
  line-height: 1.5; /* prevent descenders from being cut */
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  background-color: #0e141a; /* keep dark theme look */
  color: #fff; /* white text */
  border: 1px solid #2c2f36;
}

/* Fix option text too */
select.form-control.custom-select option {
  color: #fff;
  background: #0e141a;
}

/*------------------------------------------------------------------

  Videos - home, user_videos & videos page css

 -------------------------------------------------------------------*/

/* =============== Video card =============== */
video {
  width: 100%;
  border-radius: 12px; /* Makes the corners round */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Soft outer glow */
  overflow: hidden; /* Ensures inner content doesn't overflow the rounded corners */
  display: block; /* Avoid inline spacing issues */
}

.video-item {
  background-color: #232930;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
  flex: 1 1 calc(25% - 20px);
  /* 4 items per row with 20px gap */
  max-width: calc(25% - 20px);
  margin-bottom: 20px;
}

.video-item:hover {
  transform: translateY(-5px);
}

.video-title {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.video-thumbnail img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.rounded-circle {
  border-radius: 50%;
}

@media (max-width: 992px) {
  .video-item {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 576px) {
  .video-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* vid Box Home*/
.vid-box,
.vid-box-1 {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.vid-box-1,
.vid-box-rounded-1 {
  padding: 20px;
}

/* Transparent Box Home*/
.bg-dark-trans-home {
  background-color: rgba(35, 41, 48, 0.33);
}

/* =============== Videos Top Bar — Full Styles =============== */
/* Layout row that holds category + search + results count */
/* The row container must not clip */
.search-bar-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  overflow: visible;
}

/* Holder anchors the field; create a stacking context */
.yt-search-holder {
  position: relative;
  width: 100%;
  max-width: 680px;
  isolation: isolate;
}

/* Capsule shell */
.yt-search-wrap {
  position: relative; /* needed for the select caret overlay */
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #111;
  border: 1px solid #2b2b2b;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.yt-search-wrap:focus-within {
  border-color: #3a3a3a;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03) inset;
}

/* Field contents */
.yt-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 14px;
  color: #e6e6e6;
  font-size: 15px;
  min-height: 40px;
  line-height: 1.2;
}
input.yt-search-input {
  caret-color: #e6e6e6;
}

/* Right segment button for the SEARCH field */
.yt-search-btn {
  width: 56px;
  border: none;
  outline: none;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease;
}
.yt-search-btn:hover {
  background: #2a2a2a;
}

/* ——— Category SELECT that looks like the capsule ——— */
.yt-select-wrap {
  position: relative;
}
select.yt-search-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  width: 100%; /* covers the whole capsule, incl. arrow area */
  padding-right: 56px; /* leave room for the caret segment */
}

/* Decorative caret segment (sits on top-right, click passes to select underneath) */
.yt-select-caret {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border-left: 1px solid #2b2b2b;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  pointer-events: none; /* clicks go to the select */
}

/* Dark options list (Chromium/Firefox/Edge) */
select.yt-search-input option,
select.yt-search-input optgroup {
  background: #111;
  color: #e6e6e6;
}
select.yt-search-input option:hover,
select.yt-search-input option:focus,
select.yt-search-input option:checked {
  background: #1a1a1a;
  color: #fff;
}

/* Suggestions dropdown base (used when not portaled) */
.suggest-box {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 4000;
  width: 100%;
  background: #111;
  border: 1px solid #2b2b2b;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* When portaled to <body>, force it above everything */
.suggest-portal {
  position: fixed !important;
  z-index: 2147483647 !important; /* max out */
}

/* Suggestion rows */
.suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #e6e6e6;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.suggest-item:hover,
.suggest-item.active {
  background: #1a1a1a;
}
.suggest-item .badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #2b2b2b;
  color: #bbb;
}

/* Scrollbar (subtle dark) */
.suggest-box::-webkit-scrollbar {
  width: 10px;
}
.suggest-box::-webkit-scrollbar-thumb {
  background: #2b2b2b;
  border-radius: 10px;
  border: 2px solid #111;
}
.suggest-box::-webkit-scrollbar-track {
  background: #111;
}

/* Closed custom select looks like the input capsule */
.yt-select-display {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 24px;
  background: #111;
  border: 1px solid #2b2b2b;
  padding: 0;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.yt-select-display:focus {
  outline: none;
}
.yt-select-display:focus-visible,
.yt-select-display[aria-expanded="true"] {
  border-color: #3a3a3a;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03) inset;
}
.yt-select-label {
  flex: 1;
  padding: 10px 14px;
  color: #e6e6e6;
  font-size: 15px;
  line-height: 1.2;
}
.yt-select-caret {
  width: 56px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border-left: 1px solid #2b2b2b;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  pointer-events: none;
}

/* Menu styled like suggestions panel with rounded corners */
.yt-select-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 4000;
  width: 100%;
  background: #111;
  border: 1px solid #2b2b2b;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* when portaled to <body> */
.yt-select-portal {
  position: fixed !important;
  z-index: 2147483647 !important;
}

.yt-select-item {
  padding: 10px 14px;
  color: #e6e6e6;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-select-item[aria-selected="true"] {
  background: #1a1a1a;
  color: #fff;
}
.yt-select-item:hover {
  background: #1a1a1a;
}

/* Keep the row from clipping */
.search-bar-row {
  overflow: visible;
}

@media (max-width: 992px) {
  .yt-search-holder {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .search-bar-row {
    gap: 10px;
  }
  .yt-search-holder,
  .yt-search-wrap,
  .suggest-box {
    max-width: 100%;
  }
}

/*------------------------------------------------------------------

  Watch - watch content

 -------------------------------------------------------------------*/

/* FullWidth Posts */
.sv-blog-fullwidth .sv-post-by {
  margin-top: 0;
  font-size: 1em;
  text-align: right;
}

.sv-blog-fullwidth .sv-post-by img {
  float: right;
  height: auto;
  margin-left: 20px;
}

/*------------------------------------------------------------------

  profile - profile_header, profile css

 -------------------------------------------------------------------*/

/* =============== Profile_header and Image =============== */
.profile-header {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: auto;
}

.profile-banner {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0; /* Round only the top corners of the banner */
}

.profile-picture {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid transparent;
  object-fit: cover;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Profile info box */
.profile-info {
  text-align: center;
  background-color: #0f131c;
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto; /* Remove any extra margins */
  padding: 70px 10px 10px; /* Adjust top padding to remove gap */
  z-index: 1;
  border-radius: 0 0 10px 10px; /* Round only the bottom corners of the info section */
  border-bottom: 1px solid rgba(35, 41, 48, 0.9);
  border-left: 1px solid rgba(35, 41, 48, 0.9);
  border-right: 1px solid rgba(35, 41, 48, 0.9);
  border-top: none;
}

.profile-info h2,
.profile-info h4 {
  margin: 5px 0;
}

.profile-info h4 {
  color: #dd163b;
}

/* =============== Team box =============== */
.team-logo {
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
}

.team-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* =============== Profile menu scoped styling =============== */
.profile-menu {
  background-color: rgba(211, 211, 211, 0); /* Dark background for contrast */
  border-radius: 8px;
  padding: 10px 15px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Navbar links */
.profile-menu .navbar-nav .nav-link {
  color: #ffffff !important;
  font-family: "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 500;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover state */
.profile-menu .navbar-nav .nav-link:hover,
.profile-menu .navbar-nav .nav-link:focus {
  color: rgb(169, 169, 169) !important;
  background-color: rgba(211, 211, 211, 0.01);
  border-radius: 6px;
  transform: scale(1.05); /* Optional hover effect for a dynamic feel */
}

/* Active link */
.profile-menu .navbar-nav .nav-item.active .nav-link {
  color: rgb(169, 169, 169) !important;
  font-weight: 600;
}

/* Dropdown menu */
.profile-menu .dropdown-menu {
  background-color: rgba(35, 41, 48, 0.969);
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.969);
}

.profile-menu .dropdown-item {
  color: #fff !important;
  font-family: "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 500;

  transition: background-color 0.3s ease, color 0.3s ease;
}

.profile-menu .dropdown-item:hover {
  color: rgb(169, 169, 169) !important;
  background-color: rgba(211, 211, 211, 0.01);
  border-radius: 6px;
  transform: scale(1.05); /* Optional hover effect for a dynamic feel */
}

/* Active dropdown item */
.profile-menu .dropdown-item.active {
  color: rgb(169, 169, 169) !important;
  font-weight: 600;
  background-color: transparent; /* Optional: keep background consistent */
}

/* =============== Global Overlay for Steam Library =============== */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2147483000;
}

.overlay.show {
  display: flex;
}

.overlay-content {
  position: relative;
  width: min(1100px, 92vw);
  max-height: 86vh;
  background: #0f131c;
  color: #e6eef7;
  border: 1px solid #1a2333;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 16px 16px 8px;
}

.overlay-content .close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: #e6eef7;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.overlay-scroll {
  overflow: auto;
  max-height: calc(86vh - 48px);
  padding-right: 6px;
}

.game-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.game-image {
  width: calc(33.333% - 7px);
}

.game-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid #1a2333;
}

@media (max-width: 720px) {
  .game-image {
    width: calc(50% - 6px);
  }
}

.birthday-notification {
  margin: 16px auto;
  max-width: 720px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  animation: birthdayPop 0.6s ease;
}

@keyframes birthdayPop {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* =============== Profile BIO (card) =============== */
.profile-bio .bio-card {
  --bg: #0f131c;
  --border: #1a2333;
  --fg: #e6eef7;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  color: var(--fg);
}

.bio-text {
  line-height: 1.6;
}

.bio-private {
  color: #a5b5c8;
}

/* ===== Sidebar (scoped) ===== */
.profile-sidebar {
  position: sticky;
  top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

/* Card */
.ps-card {
  background: #1e2330; /* dark panel */
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-card__title {
  margin: 0;
  padding: 14px 18px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #e9eefb;
  position: relative;
  text-transform: uppercase;
}
.ps-card__title .accent {
  color: #2fb2ff;
} /* blue accent like header */
.ps-card__title::after {
  content: "";
  position: absolute;
  right: 18px;
  left: 180px;
  bottom: 10px;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
.ps-card__body {
  padding: 16px;
}

/* Social grid */
.ps-social-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ps-social {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 8px;
  background: #2a3142;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 22px;
  color: #cdd6f4;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ps-social:hover {
  transform: translateY(-2px);
  background: #334057;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.ps-social--discord {
  --brand: #5865f2;
}
.ps-social--twitch {
  --brand: #9146ff;
}
.ps-social--steam {
  --brand: #1b2838;
}
.ps-social--youtube {
  --brand: #ff0033;
}
.ps-social--facebook {
  --brand: #1877f2;
}
.ps-social--instagram {
  --brand: #e1306c;
}
.ps-social:hover {
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--brand) 45%, transparent);
}

/* Video list */
.ps-video {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ps-video + .ps-video {
  margin-top: 6px;
}
.ps-video:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.ps-video__thumb {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0f1320;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ps-video__meta {
  min-width: 0;
} /* enable text truncation */
.ps-video__title {
  font-size: 1rem;
  margin: 0 0 4px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-video__title a {
  color: #fff;
  text-decoration: none;
}
.ps-video__title a:hover {
  color: #cfe8ff;
}

.ps-video__stats {
  font-size: 12px;
  color: #a8b0c4;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-video__stats .fas {
  opacity: 0.85;
}
.ps-video__stats .dot {
  opacity: 0.6;
  margin: 0 2px;
}

.ps-empty {
  margin: 0;
  color: #a8b0c4;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .profile-sidebar {
    position: static;
  }
}

/* =============== Edit Profile =============== */
/* Connected image + input “tile” */
.upload-tile {
  border-radius: 0.5rem;
  overflow: hidden; /* makes the label connect flush to the image */
  background: rgba(255, 255, 255, 0.03);
}

/* Keep both previews same size */
.upload-preview {
  display: block;
  width: 100%;
  height: 260px; /* <-- your fixed size; keep or adjust */
  object-fit: cover;
}

/* Make file input look attached to the image */
.custom-file,
.custom-file-input,
.custom-file-label {
  width: 100%;
}

.custom-file-label {
  border-top-left-radius: 0;
  border-top-right-radius: 0; /* removes top radius so it “joins” the image */
  margin-top: 0 !important;
}

/*------------------------------------------------------------------

  status On/Offline - profile_header, profile, members & team css

 -------------------------------------------------------------------*/

/* =============== Profile header =============== */
.status-indicator {
  position: absolute;
  bottom: 105px; /* Adjust as necessary */
  right: 230px; /* Adjust as necessary */
  width: 15px; /* Size of the circle */
  height: 15px; /* Size of the circle */
  border-radius: 50%; /* Makes the circle */
}

.profile-picture.online {
  border-color: #4caf50;
  box-shadow: 0 0 20px rgba(255, 251, 0, 0.5); /* Green glow effect */
}

.profile-picture.offline {
  border-color: #f44336;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); /* Green glow effect */
  background-color: rgb(102, 102, 102); /* Red for offline */
}

/* =============== Members & Teams =============== */
.user-avatar {
  border: 3px solid transparent;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.user-avatar.online {
  border-color: #4caf50;
  box-shadow: 0 0 20px rgba(255, 251, 0, 0.5); /* Green glow effect */
}

.user-avatar.offline {
  border-color: #f44336;
  background-color: rgb(102, 102, 102); /* Red for offline */
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); /* Red glow effect */
}

/*------------------------------------------------------------------

  members - css

 -------------------------------------------------------------------*/

/* =============== Members grid =============== */
.sv-feature-1 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 10px;
  background-color: #0f131c;
  border: 1px solid #1a2333;
  border-radius: 4px;
}

.sv-feature-1 .sv-feature-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 116px;
  height: 50px;
  padding-right: 10px;
  font-size: 3rem;
  line-height: 50px;
  color: #fff;
  text-align: center;
  border-right: 1px solid #293139;
  border-radius: 3px;
}

.sv-feature-1 .sv-feature-icon img {
  max-width: 100%;
  height: auto;
}

.sv-feature-1 .sv-feature-cont {
  padding-top: 8px;
  padding-left: 38px;
}

/* Titles */
.sv-feature-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.sv-feature-title a {
  color: inherit;
  text-decoration: none;
}

.sort-form {
  margin-bottom: 20px;
}

.sort-form select {
  padding: 5px 10px;
  font-size: 16px;
}

.sort-form label {
  margin-right: 10px;
  font-weight: bold;
  color: white;
}

/* 🎂 Birthday badge for members */
/* Make the avatar container a positioning context */
.sv-feature-1 .sv-feature-icon {
  position: relative;
}

/* Birthday badge pinned to the avatar’s top-left corner */
.bday-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ff4081;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 64, 129, 0.7), 0 0 20px rgba(255, 64, 129, 0.5);
  animation: bdayPulse 1.5s infinite;
}

@keyframes bdayPulse {
  0% {
    box-shadow: 0 0 5px rgba(255, 64, 129, 0.8),
      0 0 15px rgba(255, 64, 129, 0.6);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 64, 129, 1), 0 0 30px rgba(255, 64, 129, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 64, 129, 0.8),
      0 0 15px rgba(255, 64, 129, 0.6);
  }
}

/* If your avatar size changes on mobile, keep the badge readable */
@media (max-width: 576px) {
  .bday-badge {
    top: -4px;
    left: -4px;
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/*------------------------------------------------------------------

  Register - css

 -------------------------------------------------------------------*/

/* =============== Password meter =============== */
.pw-meter {
  margin-top: 8px;
  height: 8px;
  background: #2c3545;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.pw-meter .bar {
  height: 100%;
  width: 0%;
  background: #dc3545; /* weak (red) default */
  transition: width 0.2s ease, background-color 0.2s ease;
}
.pw-meter .label {
  margin-top: 6px;
  font-size: 12px;
  color: #a5b5c8;
}

/* color states */
.pw-meter.medium .bar {
  background: #ffc107;
} /* amber */
.pw-meter.strong .bar {
  background: #28a745;
} /* green */

/*------------------------------------------------------------------

  Teams - css

 -------------------------------------------------------------------*/

/* =============== Team name length =============== */
.team-name-ellipsis {
  display: inline-block;
  max-width: 200px; /* Adjust as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/*------------------------------------------------------------------

  Galleries - css

 -------------------------------------------------------------------*/

/* =============== Galleries - Equal spacing =============== */
.row.equal-spacing {
  margin-left: -15px;
  margin-right: -15px;
}
.equal-spacing > .col-md-4 {
  padding: 15px;
}

/*------------------------------------------------------------------

  Footer - css

 -------------------------------------------------------------------*/

/* =============== Footer Nav =============== */
.footer-nav {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.footer-nav li > a:hover,
.footer-nav li > a.hover {
  color: rgb(169, 169, 169);
}

.footer-nav li > a {
  font-weight: 600;
  -webkit-transition: 0.15s color;
  -o-transition: 0.15s color;
  transition: 0.15s color;
  display: block;
  text-transform: uppercase;
}

.footer-nav > li {
  position: relative;
  display: block;
  text-align: left;
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 1px; /* <-- Add this line for spacing */
  font-family: "Montserrat", sans-serif;
  font-size: 1.07rem;
  color: #fff;
  -webkit-transition: 0.3s background-color;
  -o-transition: 0.3s background-color;
  transition: 0.3s background-color;
  z-index: 1000;
  will-change: background-color;
}

.footer-nav > li:last-child {
  margin-bottom: 0; /* optional: remove margin from last item */
}

/*------------------------------------------------------------------

  Like/Dislike - videos & articles css

 -------------------------------------------------------------------*/

/* =============== Like Dislike Thumbs =============== */
.like-dislike-icons i {
  color: transparent;
  -webkit-text-stroke: 1.5px white;
  cursor: pointer;
  transition: 0.2s ease;
}
.like-dislike-icons i.liked {
  color: white;
  -webkit-text-stroke: 0;
}
.like-dislike-icons i.disliked {
  color: white;
  -webkit-text-stroke: 0;
}

/*------------------------------------------------------------------

  Comments - videos & articles css

 -------------------------------------------------------------------*/

/* =============== Comments =============== */
.edit-info {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.sv-comment .sv-review-rating {
  float: right;
  margin-top: 5px;
  font-size: 1rem;
}

.sv-comment:hover .edit-info {
  opacity: 1;
}

.sv-comments .sv-comment::after {
  content: "";
  display: block;
  clear: both;
}

.sv-comments .sv-comment h4 {
  margin-top: 25px;
}

.sv-comments .sv-comment .sv-comment {
  margin-left: 120px;
}

@media (max-width: 767px) {
  .sv-comments .sv-comment .sv-comment {
    margin-left: 80px;
  }
}

@media (max-width: 575px) {
  .sv-comments .sv-comment .sv-comment {
    margin-left: 30px;
  }
}

.sv-comments .sv-comment .sv-comment,
.sv-comments .sv-comment + .sv-comment {
  padding-top: 20px;
  clear: both;
}

.sv-comments .sv-comment .sv-comment-meta {
  margin-bottom: 15px;
  font-size: 0.8em;
}

.sv-comments .sv-comment .sv-comment-meta img {
  height: auto;
  margin-right: 11px;
}

.sv-comments .sv-comment .sv-comment-text {
  padding-bottom: 15px;
  border-bottom: 1px solid #293139;
}

/*------------------------------------------------------------------

  Admin - css

 -------------------------------------------------------------------*/

/* =============== Enable_Disable =============== */
.form-control,
.form-check-input,
.btn,
.table {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}

.btn {
  width: auto;
  padding: 6px 12px;
}

.alert {
  padding: 10px;
  background-color: #d9edf7;
  border: 1px solid #bce8f1;
  margin-top: 10px;
}

.table {
  border-collapse: collapse;
  width: 100%;
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.875rem;
}

.btn-danger {
  background-color: #d9534f;
  color: #fff;
  border: none;
}

.btn-success {
  background-color: #5cb85c;
  color: #fff;
  border: none;
}

.btn-primary {
  background-color: #0275d8;
  color: #fff;
  border: none;
}

.form-check-label {
  margin-left: 5px;
}

/* Bootstrap Toggle Style */
.toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

.toggle input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 25px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* === Search Forms === */
/* From Style 2 */
.sv-form-style-1 .form-control {
  color: #171e22;
  background-color: #fff;
  border-color: #fff;
}

.sv-form-style-1 .form-control:focus,
.sv-form-style-1 .form-control.focus {
  background-color: #fff;
  border-color: #168add;
}

/* Search + button as one unit */
.input-group-search {
  display: flex;
  align-items: stretch; /* same vertical size */
  width: 100%;
  height: 44px; /* choose your height */
}

/* Input */
.input-group-search .form-control {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  line-height: 1; /* avoid extra vertical space */
  border: 1px solid #ccc;
  border-right: 0; /* join with button */
  border-radius: 8px 0 0 8px;
}

/* Button */
.input-group-search .sv-btn {
  height: 100%;
  box-sizing: border-box;
  margin: 0; /* kill any default top/bottom margins */
  padding: 0 18px; /* only horizontal padding */
  display: flex;
  align-items: center; /* center text vertically */
  justify-content: center;
  line-height: 1; /* exact height match */
  border: 1px solid #168add;
  background: #168add;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.input-group-search .sv-btn:hover {
  background: #0f6ca8;
}

/* === Admin Sidebar Menu (new style) === */
.list-group {
  background: #1e2330; /* dark panel background */
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.25rem;
}

.list-group-item-action {
  background: transparent;
  color: #e9eefb;
  padding: 12px 16px;
  font-weight: 600;
  border: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Hover effect */
.list-group-item-action:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #2fb2ff; /* accent blue */
  transform: translateX(3px);
  text-decoration: none;
}

/* Inactive items */
.list-group-item-action:not(.active) {
  background: transparent;
  color: #cdd6f4;
}

/* Active state */
.list-group-item-action.active {
  background: rgba(47, 178, 255, 0.1); /* subtle accent background */
  border-left: 3px solid #2fb2ff; /* accent bar */
  color: #2fb2ff;
  font-weight: 700;
}

/* Section title / separator */
.sidebar-separator-title {
  background: #232a37;
  color: #a8b0c4;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 16px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Big icons */
.big-icon {
  font-size: 96px;
  color: #2fb2ff; /* accent */
  opacity: 0.8;
  text-align: center;
  display: block;
  margin: 1rem auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.big-icon:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Sidebars */
.sv-sidebar {
  position: relative;
  height: 100%;
}

.sv-sidebar-sticky-parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.sv-sidebar-sticky-parent > .sv-sidebar {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* Tables */
.sv-table {
  width: 100%;
  color: #fff;
  border: 1px solid #232930;
}

.sv-table th {
  font-weight: 600;
  text-transform: uppercase;
}

.sv-table thead {
  font-size: 1.32rem;
  background-color: #1e2330;
}

.sv-table thead th,
.sv-table thead td {
  padding: 15px 25px;
}

.sv-table tbody th {
  padding: 19px 25px;
}

.sv-table tbody td {
  padding: 28px 25px;
}

.sv-table tbody tr {
  background-color: #232930;
}

.sv-table tbody tr:nth-of-type(odd) {
  background-color: #293139;
}

.sv-table tbody tr > * + * {
  border-left: 1px solid #171e22;
}

.sv-table.sv-table thead th,
.sv-table.sv-table thead td {
  padding: 11px 18px;
}

.sv-table.sv-table tbody th {
  padding: 14px 18px;
}

.sv-table.sv-table tbody td {
  padding: 20px 18px;
}

/*------------------------------------------------------------------

  Bootstrap 5 form-switch styling for Bootstrap 4

 -------------------------------------------------------------------*/

/* =============== Bootstrap 5 Switch Style on Bootstrap 4 =============== */
.form-switch {
  padding-left: 2.5em;
  position: relative;
}

.form-switch .form-check-input[type="checkbox"] {
  width: 2em;
  height: 1em;
  margin-left: -2.5em;
  background-color: #dee2e6;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2em;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.form-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0.1em;
  width: 0.8em;
  height: 0.8em;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease-in-out;
}

.form-switch .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-switch .form-check-input:checked::before {
  transform: translateX(1em);
}

/*------------------------------------------------------------------

  Image carousel - homepage

 -------------------------------------------------------------------*/

/* =============== Image slider =============== */
#imageSlider {
  max-width: 100%;
  height: 500px; /* Change this to your preferred height */
  overflow: hidden;
  position: relative;
}

/* Make all images fill the carousel size and be centered */
#imageSlider .carousel-item img {
  width: 100%;
  height: 500px; /* Same height as #imageSlider */
  object-fit: cover; /* Ensures images cover the area without distortion */
  object-position: center;
}

/* Optional: Keep carousel caption readable */
.carousel-caption {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  padding: 15px;
  border-radius: 5px;
}

@media (max-width: 768px) {
  #imageSlider,
  #imageSlider .carousel-item img {
    height: 300px;
  }
}

/*------------------------------------------------------------------

  Latest Members - homepage

 -------------------------------------------------------------------*/

/* =============== Latest members (card) =============== */
.sv-new-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 blocks per row */
  gap: 10px;
}

.sv-member-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05); /* matches the grey squares */
  aspect-ratio: 1 / 1; /* perfect square */
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sv-member-block:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.sv-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 6px;
}

.sv-member-username {
  font-size: 0.85rem;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.sv-new-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sv-member-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  aspect-ratio: 1 / 1;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sv-member-block:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.sv-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 6px;
}

.sv-member-username {
  font-size: 0.85rem;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

/*------------------------------------------------------------------

  Latest News Widget - homepage

 -------------------------------------------------------------------*/

/*------------------------------------------------------------------

  Summernote

 -------------------------------------------------------------------*/
.note-editor.note-frame {
  border: none;
}

.panel-heading.note-toolbar {
  padding: 10px 26px;
  background-color: #232930;
}

.note-editor.note-frame .note-editing-area .note-editable {
  padding: 25px;
  color: #fff;
  background-color: #0f131c;
}

.note-editor.note-frame .note-statusbar {
  background-color: #0d1113;
}

.note-toolbar {
  background-color: #0f131c;
}

.note-toolbar .note-btn {
  padding: 6px 15px;
  color: inherit;
  background-color: #171e22;
  border: none;
}

.note-toolbar .note-btn:hover {
  background-color: #0d1113;
}

.note-toolbar .dropdown-menu {
  color: inherit;
  background-color: #232930;
  -webkit-box-shadow: 0 4px 10px 0 #232930;
  box-shadow: 0 4px 10px 0 #232930;
}

.note-toolbar .dropdown-menu a {
  display: block;
  padding: 4px 10px;
  color: inherit;
}

.note-toolbar .dropdown-menu a:hover,
.note-toolbar .dropdown-menu a:focus,
.note-toolbar .dropdown-menu a:active {
  text-decoration: none;
}

.note-toolbar .dropdown-menu a:hover {
  background-color: #171e22;
}

.note-toolbar .dropdown-toggle::after {
  display: none;
}

.note-popover .popover-content .note-color-palette div .note-color-btn,
.note-toolbar.panel-heading .note-color-palette div .note-color-btn {
  border-color: #171e22;
}

.note-popover .popover-content > .btn-group,
.panel-heading.note-toolbar > .btn-group {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
}

.link-dialog .custom-checkbox input {
  top: 6px;
  left: 0;
  opacity: 1;
  z-index: 1;
}

/* Fixed header: contacts + nav together */
.sv-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050; /* above page content */
}

/* Make contacts bar opaque and keep its border */
.sv-contacts-top {
  background: #0f131c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Ensure nav stays opaque and casts a light shadow */
.svx-nav {
  background: #111419;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Dropdowns / notifications above both bars */
.svx-nav .svx-dropdown,
#notif-dropdown {
  z-index: 1060;
}

/* Spacer to preserve layout flow when header is fixed */
#sv-header-spacer {
  display: block;
  width: 100%;
  height: 0;
}

/* Safety: avoid clipping sticky/fixed descendants */
.sv-header,
.sv-header .container {
  overflow: visible !important;
}