/* Fonts Used 

font-family: 'Kanit', sans-serif;
font-family: 'Open Sans', sans-serif;

green = #00c07e
bouncing blue = #012b67

*/



#mainNav {
font-family: 'Open Sans', sans-serif;
    font-weight: 900;
    font-size: 16px;
      min-height: 60px;
    background-color: #00c07e;
    border: none;

}


#mainNav .navbar-toggler {
  font-size: 12px;
  padding: 8px;
  color: #FFF;
  border: none;
    border-radius: 0px;
}

#mainNav .navbar-toggler:focus {
  outline: none;
}

#mainNav .navbar-brand {
  padding: 4px 0;
    margin-bottom: 10px;
}


  #mainNav .nav-link {
      font-size: 16px; 
	  padding: 14px 10px 14px 10px;
	  margin: 10px 18px 0px 18px;
	  color: #FFF;
	  background: none;
      transition: all ease 0.3s;
      letter-spacing: 1px;
      

  }
  #mainNav .nav-link:hover {
    color: #012b67;
      border: none;
      
  }


  #mainNav .nav-link:active {
    color: #012b67;
      border: none;
	  background: none;
      
  }


#mainNav li {
    margin: 0px 0px 0px 0px;
}


@media (max-width: 480px) {
      #mainNav .nav-link {
      font-size: 20px;      
	  padding: 8px 0px 4px 0px;
	  margin: 16px 18px 10px 18px;
    
    }
}


@media (max-width: 1180px) {

    
}

@media (min-width: 1924px) {
    
  #mainNav .nav-link {
      font-size: 16px;
	  padding: 14px 10px 14px 10px;
	  margin: 10px 18px 0px 18px;
      
    }
}


.quantityHolder {
  position: relative;
  z-index: 2;
}


.quantity {
  position: absolute;
  z-index: 2;
  padding: 2px 0 0 2px;
  color: #fff;
  line-height: 15px;
  font-weight: 400;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #012b67;
  font-size: 13px;
  top: 3px;
  left: 45px;
  text-align: center;
margin: 0px 0px 0px 0px;
}

/*drop-down override*/

  #mainNav .dropdown:hover>.dropdown-menu {
  display: block;
}


  #mainNav .dropdown-menu {
  background-color: #012b67;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    border-radius: 0px 0px 20px 20px;
    border: #012b67 1px solid;
    padding: 20px;
}

  #mainNav .dropdown-item {
    font-size: 16px;
    font-weight: 600;
	color: #FFF;
	padding: 8px 10px 8px 10px;
    text-transform: uppercase;
    transition: all ease 0.3s;

}

#mainNav .dropdown-divider {
  border-top: 1px solid rgba(50, 50, 50, 0.9);
}

  #mainNav .dropdown-item:hover,
  #mainNav .dropdown-item:focus {
  background-color: #FFF;
  color: #012b67;
}


.dropdown:hover>.dropdown-menu {
  display: block;
}


 .dropdown-menu {
  background-color: #00c07e;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    border-radius: 0px 0px 20px 20px;
    border: #00c07e 1px solid;
    padding: 20px;
}

 .dropdown-item {
    font-size: 16px;
    font-weight: 600;
	color: #fff;
	padding: 8px 10px 8px 10px;
    text-transform: uppercase;
    transition: all ease 0.3s;

}

 .dropdown-divider {
  border-top: 1px solid rgba(50, 50, 50, 0.9);
}

 .dropdown-item:hover,
 .dropdown-item:focus {
  background-color: #FFF;
  color: #012b67;
}


.title {
    text-transform: uppercase;
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    color: #00c07e;
    
}

.navbar .megamenu{ padding: 1rem; }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }

}	
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
      max-height: 90vh;
      margin-top:0px;
  }
}
/* ============ mobile view .end// ============ */