@use '../../utils' as *;

/*----------------------------------------*/
/*  3.4 header-common
/*----------------------------------------*/

.rs-sticky {
	position: fixed !important;
	top: 0;
	z-index: 111;
	inset-inline-end: 0;
	inset-inline-start: 0;
	width: 100%;
	-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
	background: #F1F5EB !important;
	box-shadow: 0px 10px 20px 0px rgba(0, 29, 8, 0.10);
	border-top: 0;

	&-2{
		padding-bottom: 20px;
		background: transparent !important;
		box-shadow: none;
	}
	
	.header-top {
		position: fixed !important;
		top: -100%;
		z-index: 111;
		inset-inline-end: 0;
		inset-inline-start: 0;
		width: 100%;
		-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
		animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
		background: var(--rr-gray-900);
		border-top: 0;
	}

	&.header-2{
		background: var(--rr-heading-primary) !important;

		.main-menu{
			.mobile-menu{
				ul{
					li{
						a{
							color: var(--rr-common-white) !important;

							&:hover{
								color: var(--rr-theme-primary) !important;
							}
						}
					}
				}
			}
		}
	}
}

.rs-sticky.header-2 .main-menu .mobile-menu ul li ul.submenu li a {
    color: var(--rr-heading-primary) !important;
}
.header__area {
    position: relative;
    width: 100%;
    z-index: 99;
	
	@media(max-width: 1199px){
		padding: 15px 0;
	  }
}

.header3{
	background-color: var(--rr-common-white) !important;
}

.header__logo {
	max-width: 198px;
	@media #{$xs, $sm} {
		max-width: 160px;
	}
	@media #{$xxs} {
		max-width: 160px;
	}

	&.header__logo-3{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 30px;
		.header__hamburger{
			@media #{$xxl, $xl, $lg, $md, $sm, $xs} {
				margin-left: 55px;
			  }
			.sidebar__toggle{
				background: var(--rr-heading-primary);
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				.bar-icon{
					span{
						background: var(--rr-common-white);
					}
				}
			}
		}
		.logo-3{
			width: 164px;
			@media #{$xxl, $xl, $lg, $md, $sm, $xs} {
				width: 130px;
			  }
		}
	}
}

.header-container{
	max-width: 1825px;
	width: 100%;
	margin: 0 auto;
}

@media(max-width: 1900px){
	.header-container{
		padding: 0 20px;
	}
}
.header2{
	position: absolute;
	@media #{$md, $sm, $xs}{
		padding: 0;
	}
	&__bg{
		background: var(--rr-heading-primary1);
		border-radius: 60px;
	}
	&__left{
		margin-left: 30px;
	}
	&__right{
		margin-right: 20px;
	}
	&__menu{
	   & ul{
			& li{
				// margin-inline-end: 24px !important;

				> {
					& a{
						padding: 39px 0 !important;
					}
				}
				ul{
					li{
						a{
							padding: 5px 25px !important;
						}
					}
				}
			}
		}
	}
	&__main{
		margin-top: 30px;

		@media #{$lg, $md, $sm, $xs} {
			padding-top: 10px;
			padding-bottom: 10px;
			margin-top: 0;
		}
	}
}
.rs-sticky{
	.header2__main{
		margin-top: 0;
	}
}

.header__main {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.header__middle{
		.mean__menu-wrapper{
			.main-menu{
				.mobile-menu{
					ul{
						li{
							@media #{$lg} {
								margin-inline-end: 15px;
							}
							a{
								@media #{$lg} {
									font-size: 14px;;
								}
							}
						}
					}
				}
			}
		}
	}

	.header__right{
		.header__action{
			gap: 25px;
			.search-icon{
				cursor: pointer;
				background: #1c243c;
				border-radius: 50%;
				width: 62px;
				height: 62px;
				line-height: 62px;
				text-align: center;
				@media #{$md, $sm, $xs} {
					display: none !important;
				}
			}
			.text{
				span{
					font-family: var(--rr-ff-body);
					color: var(--rr-text-body);
					font-weight: var(--rr-fw-regular);
					line-height: var(--rr-lh-h5);
					font-size: 16px;
					font-style: normal;
				}
				h4{
					a{
						font-family: var(--rr-ff-heading);
						color: var(--rr-heading-primary);
						font-weight: var(--rr-heading-primary);
						font-style: normal;
						font-size: 18px;
						line-height: 28px;

						&:hover{
							color: var(--rr-theme-primary);
						}
					}	
				}
				@media #{$xs} {
					display: none;
				}
			}
			.header__social{
				gap: 24px;

				a{
					position: relative;

					.icon-wrapper {
						position: absolute;
						top: -13px;
						left: 13px;
						width: 15px;
						height: 16px;
						display: flex;
						background: #FF3D00;
						align-items: center;
						border-radius: 500px;
						justify-content: center;
					}
				}
			}
			.header__message{
				gap: 10px;
				h6{
					font-family: var(--rr-ff-body);
					font-weight: var(--rr-fw-regular);
					line-height: var(--rr-lh-30);
					font-size: 16px;
					font-style: normal;

					@media #{$xs} {
						display: none;
					}

					&:hover{
						color: var(--rr-theme-primary);
					}
				}

				.circle-message{
					height: 50px;
					width: 50px;
					display: flex;
					background: var(--rr-theme-primary);
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					position: relative;
				}
			}
		}
		.action-3{
			margin-right: 74px;
			@media #{$lg, $md, $sm, $xs} {
				margin-right: 0;
			}
		}
		.lan-select-2{
			outline: none;

			.nice-2{
				outline: none;
				border: none;
				background: transparent;
			}
		}
	}
}

// Header Baricon
.bar-icon {
	width: 26px;
	height: 18px;
	@include flexbox();
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	transition: color .2s ease-out;
	span {
		width: 100%;
		height: 2px;
		background: var(--rr-theme-primary);
		display: inline-block;
		transition: color .2s ease-out;
		&:nth-child(2) {
			margin-left: 0px;
		}
	}
	&:hover {
		span {
			animation: qode-draw .8s cubic-bezier(.44,1.1,.53,.99) 1 forwards;
			&:nth-child(2) {
				margin-left: 0px;
				animation-delay: .1s;
			}
			&:nth-child(3) {
				animation-delay: .2s;
			}
		}
	}
	&.is-black {
		span {
			background: var(--rr-common-black);
		}
	}
	&.is-white {
		span {
			background: var(--rr-common-white);
		}
	}
}

// social menu
.social-media {
	@include flexbox();
	gap: 6px;
	
	a {
		color: var(--rr-gray-900);
		@include flexbox();
		align-items: center;
		position: relative;
		overflow: hidden;
		justify-content: center;
		width: 42px;
		height: 42px;
		background: var(--rr-common-white);
		font-size: 20px;
		@include border-radius(500px);
		border: 1px solid rgb(0 213 99 / 20%);
		&::before {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			@include border-radius(500px);
			transform: translate(-100%, 0) rotate(50deg);
			transform-origin: top left;
			transition: all 0.35s;
			background-color: var(--rr-theme-primary);
			z-index: -1;
			content: "";
		}
		&:hover {
			color: var(--rr-common-white);
			@include transform(translateY(-3px));
			&::before {
				transform: translate(0, 0);
			}
		}
	}
	&-2 {
		
		a {
			border-color: var(--rr-gray-200);
			color: var(--rr-theme-primary);
			&:hover {
				border-color: var(--rr-theme-primary)
			}
		}
	}
}

// header btn
.header__btn {
	gap: 15px;
}

.header-top {
	padding: 5px 0;
	background: rgba(255, 255, 255, 0.1);
	
	&-menu {
		gap: 30px;
		list-style: none;
		
		li {
            gap: 6px;
            display: flex;
            align-items: center;
            color: var(--rr-common-white);
			font-family: var(--rr-ff-body);
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 17px;

            @media #{$md} {
                font-size: 12px;
            }

			a {
				display: flex;
				align-items: center;
				gap: 10px;
				color: var(--rr-common-white);
				
				&:hover {
					color: var(--rr-theme-primary);
				}
			}
		}
	}
	
	&-socail-menu {
		gap: 20px;
		list-style: none;
		display: flex;
		justify-content: center;
		align-items: center;
		.lan-select-2{
			width: 85px;
			.lan-home-2{
				background: transparent;
				color: #fff;
				border: none;

				option{
					background: #000;
					border: none;
				}
			}
		}
		span {
			a {
				display: flex;
				font-size:14px;
				color: var(--rr-common-white);
				font-family: var(--rr-ff-body);
				font-style: normal;
				line-height: 17px;

				@media #{$md} {
					font-size: 12px;
				}
				
				&:hover {
					color: var(--rr-theme-primary);
				}
			}
		}
	}
}

.header-top-3{
	padding: 5px 0;
	background: var(--rr-heading-primary);

	.header-top-socail-menu {
		gap: 15px !important;
	}

	.container-width {
		padding-left: 15px;
		padding-right: 15px;
		max-width: 1550px;
	}
	
	&-menu {
		gap: 30px;
		list-style: none;
		
		li {
            gap: 6px;
            display: flex;
            align-items: center;
            color: var(--rr-common-white);
			font-family: var(--rr-ff-body);
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 17px;
            
			a {
				display: flex;
				align-items: center;
				gap: 10px;
				color: var(--rr-common-white);
				
				&:hover {
					color: var(--rr-theme-primary);
				}
			}
		}
	}
	
	&-socail-menu {
		gap: 20px;
		list-style: none;
		display: flex;
		justify-content: center;
		align-items: center;
		.lan-select{

			.lan{
				background: transparent;
				color: #fff;
				border: none;

				option{
					background: #000;
					border: none;
				}
			}
		}
		li {
			a {
				display: flex;
				font-size:14px;
				color: var(--rr-common-white);
				font-family: var(--rr-ff-body);
				font-style: normal;
				font-weight: 500;
				line-height: 17px;
				
				&:hover {
					color: var(--rr-theme-primary);
				}
			}
		}
	}

	.header-top-menu{
		li{
			a{
				color: var(--rr-theme-primary);
				
				&:hover{
					text-decoration: underline;
				}
			}
		}
	}
	.header-top-social{
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 15px;
		color: rgba(255, 255, 255, 0.7);
		gap: 20px;

		a{
			&:hover{
				color: var(--rr-common-white);
			}
		}
	}
}
.inner-page{
	padding: 5px 0;
	background: var(--rr-heading-primary);
	
	&-menu {
		gap: 30px;
		list-style: none;
		
		li {
            gap: 6px;
            display: flex;
            align-items: center;
            color: var(--rr-common-white);
			font-family: var(--rr-ff-body);
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 17px;
            
			a {
				display: flex;
				align-items: center;
				gap: 10px;
				color: var(--rr-common-white);
				
				&:hover {
					color: var(--rr-theme-primary);
				}
			}
		}
	}
	
	&-socail-menu {
		gap: 20px;
		list-style: none;
		display: flex;
		justify-content: center;
		align-items: center;
		.lan-select{
			
			.lan{
				background: transparent;
				color: #fff;
				border: none;

				option{
					background: #000;
					border: none;
				}
			}
		}
		li {
			a {
				display: flex;
				font-size:14px;
				color: var(--rr-common-white);
				font-family: var(--rr-ff-body);
				font-style: normal;
				font-weight: 500;
				line-height: 17px;
				
				&:hover {
					color: var(--rr-theme-primary);
				}
			}
		}
	}

	.header-top-menu{
		li{
			a{
				color: var(--rr-theme-primary);
			}
		}
	}
	.header-top-social{
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 15px;
		color: rgba(255, 255, 255, 0.7);
		gap: 20px;

		a{
			&:hover{
				color: var(--rr-common-white);
			}
		}
	}
}

.header-select{
	margin-left: -18px;
}