﻿

.top-header .navbar{
	padding: 5px 0px;
}

.top-header{
	background: #ffffff;
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0 auto;
	z-index: 20;

}

.top-header .navbar .navbar-collapse ul li a{
	/*text-transform: uppercase;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
	font-weight: 500;*/
}



.top-header .navbar .navbar-collapse ul li a.active{
	/*background: #00cb86;*/
	color: #ffffff;
	-webkit-transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}
	.top-header .navbar .navbar-collapse ul li a.active::after {
		width: 20px;
		height: 20px;
		content: "";
		float: left;
		position: absolute;
		bottom: -8px;
		left: 0;
		right: 0;
		margin: auto;
		background: url(../images/menu-arrow.png) no-repeat center;
		border-radius: 10px;
		transition: ease all 0.3s;
		transform: translateY(0%) rotate(140deg);
		-webkit-transform: translateY(0%) rotate(140deg);
		-o-transform: translateY(0%) rotate(140deg);
		-ms-transform: translateY(0%) rotate(140deg);
		-moz-transform: translateY(0%) rotate(140deg);
		-webkit-transition: all 0.5s ease-in-out 0s;
		-moz-transition: all 0.5s ease-in-out 0s;
		-ms-transition: all 0.5s ease-in-out 0s;
		-o-transition: all 0.5s ease-in-out 0s;
		transition: all 0.5s ease-in-out 0s;
		
	}
	.top-header .navbar .navbar-collapse ul li a:hover {
	/*	background: #2e3488;
		color: #ffffff;*/
		/*border-radius:15px;*/
	}


.top-header.fixed-menu{
	width: 100%;
	position: fixed;
	box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	background: #fff;
	z-index: 20;
}


/* For small screens (max-width: 992px) */
@media (max-width: 992px) {
	
	/*.navbar .navbar-collapse .dropdown-menu {
		max-height: 300px;*/ /* Set the desired maximum height for the dropdown menu */
		/*overflow-y: auto;
	}   الكود لحل مشكله القائمة عندما سويت كود يثبت الهيدر مع الجاف سكربت كوستم والستايل هيدر*/
	.navbar-light .navbar-nav {
		max-height: 370px; /* Set the desired maximum height for the dropdown menu */
		overflow-y: auto;
	}


	.top-header.fixed-menu {
		position: fixed;
	}

	/* Adjust the position of the page content when the dropdown menu is open */
	.navbar .navbar-collapse .show .dropdown-menu {
		transform: translateY(100%); /* Adjust the percentage as needed */
	}



}

