header{
}
.navbar{
  position: fixed;
  left: 100px;
  right: 100px;
  z-index: 999;
}
.navbar-brand{
  font-size: 30px;
  font-weight: bold;
}
.navbar-light .navbar-nav .nav-item {
padding: 5px 15px;
}
.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
  /* color: #000 !important; */
}
.navbar-light .navbar-nav .nav-link:active{
  color: #fff !important;
}
.navbar-light .navbar-nav .nav-link:hover{
  color: #fff !important;
}
.hero-section{
  background-image: url('../images/hero2.svg');
  /* background-color: #fff; */
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

.hero-section-about{
  background-image: url('../images/about.jpg');
  /* background-color: #fff; */
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  position: relative;
}
.ti{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ti h3{
  font-size: 25px;
  color: #fff;
}
.dropdown-item{
  position: relative;
}
.dropdown-menu {  
  min-width: 12rem !important;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: #fff !important;
  color: #000 !important;
}
.dropdown-item{
  
  transition: 0.5s ease-in-out;
  transform: translateX(-5px);
}
.dropdown-item i{
  vertical-align: middle;
  font-size: 11px;
  position: absolute;
  right: 10px;
  top: 12px;
  color: #7c7a7a;
  font-weight: 300;
}
.dropdown-item:focus, .dropdown-item:hover {
  color: #000;
  background-color: transparent;
  transform: translateX(3px);
  transition: 0.5s ease-in-out;
}
.active{
  background-color: #2e2e2f;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  /* transition: 0.5s ease-in-out; */
}
@media (min-width:320px) and (max-width: 768px) {
  .navbar {
    position: relative;
    left: 0;
    right: 0;
    z-index: 999;
}.navbar-light .navbar-nav .nav-link {
  color: #000 !important;
}
.navbar-light .navbar-nav .nav-link:active {
  color: #000 !important;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #000 !important;
}
.active{
  background-color: #fff;
  /* transition: 0.5s ease-in-out; */
}
.main-banner-text p {
  font-size: 14px;
  margin: 15px 0px 25px 0px;
}
.main-banner-text h3 {
  font-size: 35px;}
.hero-section{
  background-image: none;
  background-color: #fff;
  height: 100vh;
}.main-banner-img {
  padding-top: 0px;
}
.main-banner-text {
  padding-top: 10px;
}.services {
  padding: 25px 0px;
}
.head-title h4 {
  font-size: 25px;
  font-weight: 600;
}
}
/* tab */

@media (min-width:768px) and (max-width: 1024px) {
  .navbar {
    position: relative;
    left: 0;
    right: 0;
    z-index: 999;
}.navbar-light .navbar-nav .nav-link {
  color: #000 !important;
}
.navbar-light .navbar-nav .nav-link:active {
  color: #000 !important;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #000 !important;
}
.active{
  background-color: #fff;
  /* transition: 0.5s ease-in-out; */
}
.main-banner-text p {
  font-size: 14px;
  margin: 15px 0px 25px 0px;
}
.main-banner-text h3 {
  font-size: 35px;}
.hero-section{
  background-image: none;
  background-color: #fff;
  height: 75vh;
}.main-banner-img {
  padding-top: 0px;
}
.main-banner-text {
  padding-top: 10px;
}.services {
  padding: 25px 0px;
}
.head-title h4 {
  font-size: 25px;
  font-weight: 600;
}
}
/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.dropdown-menu li{
		position: relative;
	}
	.dropdown-menu .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.dropdown-menu .submenu-left{ 
		right:100%; left:auto;
	}

	.dropdown-menu > li:hover{ background-color: #fff; }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {

.dropdown-menu .dropdown-menu{
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}

}	
/* ============ small devices .end// ============ */