:root {
  --primary-color: #5030ff;
  --secondary-color: rgb(192, 193, 255);
  --orange-color: #e67e22;
  --dark-orange-color: #d66f15;
  --white-color: #fff;
  --dark-color: #000;
  --light-color: #ececec;
  --gray-color: #a0a0a0;
  --facebook: #0866ff;
  --linkedin: #0077b5;
  --youtube: #ff0000;
  --light-gray-color: #f1f1f1;
}

.foot-content {
  background-color: var(--light-color);
  color: var(--primary-color);
}

.bg-main {
  background-color: var(--primary-color) !important;
}

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

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

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

.text-main {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-orange {
  color: var(--orange-color) !important;
}

.text-gray {
  color: var(--gray-color) !important;
}

.border-main {
  color: var(--primary-color) !important;
}

.text-space {
  letter-spacing: 0.08em !important;
}

/* .navbar-toggler {
  font-size: 0.5rem !important;
} */

.sub-btn {
  padding: 0.4em 1em;
  color: var(--light-color);
  background-color: var(--orange-color);
  border: 2px solid transparent;
  outline: none;
  border-radius: 0.4em;
  display: block;
  width: 100%;
  transition: color 400ms ease, background-color 400ms ease;
}

.sub-btn:hover {
  background-color: var(--dark-orange-color);
  color: var(--light-color);
}

.text-hover {
  transition: color 400ms ease;
  cursor: pointer;
}

.text-hover:hover {
  color: var(--secondary-color);
}

.text-facebook {
  transition: color 400ms ease, background-color 400ms ease;
}

.text-facebook:hover {
  color: var(--facebook);
}

.text-linkedin {
  transition: color 400ms ease, background-color 400ms ease;
}

.text-linkedin:hover {
  color: var(--linkedin);
}

.text-youtube {
  transition: color 400ms ease, background-color 400ms ease;
}

.text-youtube:hover {
  color: var(--youtube);
}

.font-primary {
  font-size: 2.2rem !important;
}


/* .background-img {
  background-image: url("/assets/images/bg-img-hero.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1;
} */



.containerBody {
  position: relative;
}

.positionSticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 1;
}

.gridLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center !important;
  align-items: start;
}

.color-picker {
  position: absolute !important;
  top: -1.5rem !important;
  left: 0.4rem !important;
}

.picker-label {
  position: absolute !important;
  bottom: 0.15rem !important;
  left: 4.1rem !important;
}

.nav-picker-label {
  position: absolute !important;
  bottom: -3.8rem !important;
  right: 5.4rem !important;
}

.nav-color-picker {
  position: absolute !important;
  bottom: -3.85rem !important;
  right: 1.6rem !important;
}

.nav-text-picker-label {
  position: absolute !important;
  bottom: -1.8rem !important;
  left: 5.2rem !important;
}

.nav-text-color-picker {
  position: absolute !important;
  bottom: -2.3rem !important;
  left: 1.6rem !important;
}

.boxShadowEffect {
  box-shadow: 0.15em 0.15em 0.4em var(--gray-color),
    inset 0.3em 0.3em 0.6em var(--light-color),
    inset -0.25em -0.25em 0.6em var(--gray-color);
}

.nav-link:hover,.nav-link:focus {
  color: var(--gray-color) !important;
}

.dropdown-toggle::after {
  display: none;
}

.navbar-toggler {
  padding: 0.14rem 0.6rem 0.2rem 0.6rem !important;
}

#navHeader {
  transition: 600ms ease;
}


/* .text-input {
    padding: 0.4em 1em;
    border: 2px solid transparent;
    outline: none;
    border-radius: 0.4em;
} */