header{
	&.ph{
		// background-color: $theme-silver;
		
		
		top: 0;
		z-index: 11;
		width: 100%;
		.custom-logo{
			height: auto !important;
		}

	nav.pn{

		ul{
			li {
				padding: 20px 10px;
				transition: 0.4s;
				position: relative;
				display:inline-block;
				&.first{
					padding-left: 7px;
				}
				 a{
					color: $theme-black;
					text-transform: capitalize;
					
					position: relative;
					&:before{
						content: '';
						position: absolute;
						// width: 100%;
				background-color: $theme-primary	;
						    bottom: -7px;
						    left: 0;
						    margin: auto;
						    right: 0;
						width: 0px;
								height: 2.5px;
						transition:0.4s cubic-bezier(0, 1.21, 1, 1.11);

					}
					&:after{
						content: '';
						position: absolute;
					    right: 0;
					    margin: auto;
					    bottom: 68px;
					    left: 0;
						width: 0; 

						height: 0; 
					  border-left: 5px solid transparent;
					  border-right: 5px solid transparent;
					  border-top: 5px solid $theme-secondary;
					  opacity: 0;
					  transition-delay:0.2s;
					  transition:0.4s ease-in;
						

					}


				}
				&:hover{
					 a{
					 		color: $theme-primary;
						&:before{
							width: 100%;

						}
						&:after{
							opacity: 1;
							transition-delay:0.3s;
						}
					}
				}

				&.menu-item-has-children{
					&:after {
						content: "\f107";
						height: 10px;
						width: 15px;
						display: inline-block;
						color: $theme-sp-grey;
						left: 5px;
						font-family: $icon-font-family; 
						position: relative;
						top: -2px;
						font-weight: bold;
					}
				}

			
				ul{
					// width: 100%;
					position: absolute;
					// padding-left: 0px;
					width: 300px;
					background: $theme-dk-grey;
					top: 50px;
					left: 0;
					font-family: $base-font-family;
					display: none;
				    z-index: 111;

					li{
						display: block;
						border-bottom: 1px solid $theme-primary;
						padding: 4px 24px;
						a{
							font-size: $base-font-size;
							text-transform: capitalize;
						}
						span{
							&:before, &:after{
								display: none !important;
							}
						}
						&:hover{
							background: $theme-primary;
							> ul{
								display: block;
							}
						}

						&:before {
							  position: absolute;
							  content: '';
							  width: 6px;
							  height: 6px;
							  background: $theme-primary;
							  top: 40%;
							  left: 10px;
							  border-radius: 50%;
						}

						ul{
							// background: red;
							background: $theme-dk-grey;
						    left: 220px;
						    top: 0;
						    display: none;
						}
					}

				}
			}

		}

	}
}
}