/* CSS Variables for Theme */
:root {
  --primary-color: #0B84E5;
  --secondary-color: #00BDFE;
  --light-bg: #0d83e51a;
  --gradient: linear-gradient(90deg, #0d83e5 0%, #04befe 100%);
  --focus-shadow: 0 0 0 0.2rem rgba(13, 131, 229, 0.18);
}

/* Background Styling */
.header-bottom,
.modal-header,
.bg-primary,
.footer-top .link-heading:after,
.chosen-container .chosen-results li.highlighted,
.page-index header.navbar-shrink,
.steps ul li.first a,
.steps ul li.checked a {
  background: var(--primary-color) !important;
}

.modal-menu .modal-header,
.cartminiview .badge-success,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
button.btn.btn-primary,
.wizard .actions li a,
.bg-secondary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.navbar-expand-lg .navbar-nav .nav-item .nav-link:not(.bg-secondary)::before {
  background: var(--secondary-color) !important;
  color: white;
}

.bg-light {
  background: var(--light-bg) !important;
}

.header-color {
  background: rgba(11, 132, 229, 0.92);
}

.themedefault {
  background-image: var(--gradient) !important;
}

/* Text & Font Colors */
.spinner-loader,
a,
.text-muted,
.h1, .h2, .h3, .h4, .h5, .h6,
h3.title,
.btn-addtocart,
.card-product:hover .service-name,
.page-link,
ul.nav-pills.flex-nowrap .nav-link.active,
.double-border h5 {
  color: #000;
}

.text-muted {
  opacity: 0.8;
}

/* Borders */
.card-product:hover,
ul.nav-pills.flex-nowrap .nav-link.active,
h3.title span,
.price-details table td.double-border {
  border-color: var(--secondary-color);
}

/* Form Focus Styling */
.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: var(--focus-shadow);
}

/* Shine Effect on Primary Buttons */
button.btn.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

button.btn.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: skewX(-20deg);
  z-index: 2;
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}