.headerBg {
  background: #fff;
  transition: all 200ms ease-in-out;
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid #eee;
}

#header select:hover {
  background: var(--content) !important;
}

#header select {
  background: var(--content) !important;
}

#header select option {
  background: var(--content) !important;
  color: #fff !important;
  padding: 0;
  text-align: center;
}

#navbar_main .navbar-brand {
  transition: all 300ms ease-in-out;
}

.navbar-brand img {
  transition: all 300ms ease-in-out;
}

@media (max-width: 990px) {
  body {
    background-color: #f5f5f5;
    margin-top: 77px;
  }

  .navbar-brand img {
    height: 40px !important;
  }

  #navbar_main .navbar-nav .nav-item:hover a span {
    color: #fff !important;
  }

  .nav-item.active a span {
    color: #fff !important;
  }

  .nav-item a span {
    padding-left: 10px !important;
  }

  .navbar-nav .navbar-brand img {
    filter: invert(1);
    height: 90px !important;
  }

}

@media (min-width: 991px) {
  body {
    background-color: #f5f5f5 ;
    margin-top: 0px;
  }
}

.navbar-brand img {
  height: 100%;
  width: 220px;
  object-fit: contain;
}

.nav-item.active {
  background-color: var(--content);
}

@media (min-width: 990px) {
  .myheader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .my100 {
    width: 100%;
  }
}

.hd-p5 {
  margin-top: 120px;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.navbar {
  padding: 10px 0 !important;
}


.navbar-brand img {
  object-fit: contain;
}

#navbar_main .navbar-nav {
  align-items: center;
}

@media (max-width: 990px) {
  .navbar-nav {
    display: block !important;
  }
}

#navbar_main .navbar-nav a {
  color: var(--content-color) !important;
  font-size: 15px;
  font-weight: bold;
  transition: all 200ms ease-in-out;
} 
/* #navbar_main .navbar-nav a:hover {
  color: #15c65c !important;
} */

#navbar_main .navbar-nav .nav-link span {
  color: #fff;
  font-size: 18px;
  transition: all 200ms ease-in-out;
} 

#navbar_main .navbar-nav .nav-item {
  transition: all 200ms ease-in-out;
}

#navbar_main .navbar-nav .nav-item:hover {
  background-color: #383838;
}

#navbar_main .navbar-nav.top .nav-link span {
  font-size: 16px !important;
  color: var(--content);
}

#navbar_main .navbar-nav.top .nav-item:hover {
  background-color: #3838381f;
}

#navbar_main .navbar-nav p {
  color: var(--content-color) !important;
  font-size: 12px !important;
  font-weight: normal;
  font-style: italic;
  margin: 0;
}

#navbar_main .navbar-brand {
  padding: 0 !important;
  margin-right: 30px;
  position: relative;
}

@media (max-width: 1189px) {
  #navbar_main .nav-item {
    margin-right: 9px;
    padding-left: 0 !important;
  }
}

.mainMenu  {
  z-index: 2;
}

.offcanvas-end {
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border-left: 0 !important;
  background: none !important;
  transform: translateX(100%);
}

@media (max-width: 576px) {
  .offcanvas-end {
    width: 100%;
  }
  .mainMenu {
    width: 100%;
  }
  .menuBox {
    transform: translateX(0px) !important;
    width: 100%;
  }
  .menuBox:hover {
    transform: translateX(0px) !important;
    border-radius: 0 !important;
  }

  .menuBox:hover div {
    animation-name: none !important;
  }
}

.offcanvas-body .box {
  background: #fff;
  width: 100%;
}

.offcanvas {
  transition: all .5s ease-in-out !important;
}

.menuBox {
  height: 33.33333333333333%;
  transition: all 300ms ease-in-out;
  transform: translateX(25px);
  box-shadow: 5px -10px 20px #00000038;
}

.menuBox.blue {
  background-image: linear-gradient(to right, rgb(0, 153, 255) , rgb(0, 70, 223));
}

.menuBox.green {
  background-image: linear-gradient(to right, rgb(0, 255, 157) , rgb(0, 223, 48));
}

.menuBox.orange {
  background-image: linear-gradient(to right, rgb(255 219 42) , rgb(193 116 0));}

.menuBox:hover {
  border-radius: 20px 0 0 20px;
  transform: translateX(0px);
}

.menuBox:hover div {
  animation-name: air;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.mainMenu button {
  position: absolute;
  right: 10px;
  top: 10px;
}

.social i {
  color: #666;
  transition: all 200ms ease-in-out;
}

.social a:hover i {
  color: var(--primary);
}

.sticky {
  position: sticky;
  top: 150px;
}

.navPoint {
  position: fixed;
  right: 5px;
  top: 40%;
  z-index: 500;
  background: #131a2248 !important;
  border-radius: 25px;
  overflow: hidden;
  max-width: 50px;
  transition: all 300ms ease-in-out;
}

.navPoint:hover {
  max-width: 500px;
  background: var(--content) !important;
  padding: 10px;
}

.navPoint:hover span {
  opacity: 1;
  max-width: 1000px;
  margin-right: 10px;
}

.navPoint .point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid white;
}

.navPoint .active .point {
  border: 1px solid var(--primary);
  background-color: var(--primary);
}

.navPoint .active {
  background: none !important;
}

.navPoint span {
  opacity: 0;
  position: relative;
  max-width: 0;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

.navPoint .list-group-item {
  border: 0;
  background: none;
  padding: 0 10px;
  transition: all 300ms ease-in-out;
}

.navPoint:hover .list-group-item {
  border: 0;
  padding: 10px 10px;
}

.navPoint .list-group-item:hover {
  background-color: var(--primary);
}

.dropdown .drop {
  opacity: 0;
  overflow: hidden;
  max-height: 0;
  transition: all 200ms ease-in-out;
  position: absolute;
  width: 250px;
}

.dropdown a {
  cursor: pointer;
}

.dropdown:hover .drop {
  opacity: 1;
  overflow: auto;
  max-height: 500px;
}