/**
* Nav
**/
.nav-float {
	position: fixed;
	z-index: var(--z-index-top);
	top: 0;
	left: 0;
	right: 0;

	.nav-bar-top {
		display: flex;
		justify-content: flex-end;
		font-size: var(--font-size-sm);
		background: var(--smx-color-background-light);
		padding: var(--space-xs);

		.nav-small {
			display: grid;
			grid-template-columns: repeat(3, auto);
		}
	}

	.nav-panel {
		backdrop-filter: var(--backdrop-blur-lg) saturate(2);
		background-color: rgba(var(--smx-color-background-light-rgb), 0.72);

		padding: var(--space-xxs);
		box-shadow:
			inset 0 0 0.16rem 0.01rem rgba(var(--smx-color-white-rgb), 0.6),
			0 0.3rem 0.4rem rgba(0, 0, 0, 0.1);

		.nav-container {
			max-width: 1200px;
			margin: 0 auto;
		}

		.nav-bar {
			display: flex;
			justify-content: space-between;

			.logo {
				padding: var(--space-sm);
				svg {
					color: var(--smx-color-primary);
					height: 1rem;
				}
			}

			.main-nav {
				font-weight: 500;

				.nav-list {
					display: flex;
					list-style: none;
					padding: 0;

					li.menu-item {
						font-size: var(--font-size-sm);
						position: relative;

						a {
							display: block;
							color: var(--smx-color-text-bold);
							padding: var(--space-sm) var(--space-md);
							text-decoration: none;
							border-radius: var(--border-radius-sm);

							&:hover,
							&:focus {
								background: var(--smx-color-primary);
								color: var(--smx-color-background-light);
							}
						}

						&::after {
							content: '';
							position: absolute;
							top: 100%;
							left: 0;
							width: 100%;
							height: 30px;
						}

						&.menu-item-has-children {
							> a {
								padding-right: var(--space-lg);

								&:after {
									content: '';
									position: absolute;
									top: 0.92rem;
									right: var(--space-sm);

									width: 0;
									height: 0;

									border-left: 4px solid transparent;
									border-right: 4px solid transparent;
									border-top: 4px solid var(--smx-color-black);
								}

								&:hover,
								&:focus {
									&:after {
										border-top: 4px solid var(--smx-color-background-light);
									}
								}
							}

							.sub-menu {
								position: absolute;
								left: 0;
								top: calc(2.4rem + var(--space-sm));
								background-color: var(--smx-color-white);
								padding: var(--space-md);
								border-radius: var(--border-radius-lg);
								list-style: none;
								padding: var(--space-sm);
								min-width: 14rem;
								display: none;
								border-bottom: 1px solid var(--smx-color-background-light);
								border-left: 1px solid var(--smx-color-background-light);
								border-right: 1px solid var(--smx-color-background-light);

								&.submenu-open {
									display: block;
								}

								&::before {
									content: '';
									position: absolute;
									top: -12px;
									left: var(--space-xxl);

									width: 0;
									height: 0;

									border-left: 12px solid transparent;
									border-right: 12px solid transparent;
									border-bottom: 12px solid var(--smx-color-white);
								}

								a {
									color: var(--smx-color-text-bold);

									&:hover,
									&:focus {
										background: var(--smx-color-background-light);
										color: var(--smx-color-text-bold);
									}
								}
							}
						}

						&.solutions {
							> a {
								padding-right: var(--space-lg);

								&:after {
									content: '';
									position: absolute;
									top: 0.92rem;
									right: var(--space-sm);

									width: 0;
									height: 0;

									border-left: 4px solid transparent;
									border-right: 4px solid transparent;
									border-top: 4px solid var(--smx-color-black);
								}

								&:hover,
								&:focus {
									&:after {
										border-top: 4px solid var(--smx-color-background-light);
									}
								}
							}
						}

						&.industry {
							> a {
								padding-right: var(--space-lg);

								&:after {
									content: '';
									position: absolute;
									top: 0.92rem;
									right: var(--space-sm);

									width: 0;
									height: 0;

									border-left: 4px solid transparent;
									border-right: 4px solid transparent;
									border-top: 4px solid var(--smx-color-black);
								}

								&:hover,
								&:focus {
									&:after {
										border-top: 4px solid var(--smx-color-background-light);
									}
								}
							}
						}

						&.menu-open {
							background: var(--smx-color-primary);
							color: var(--smx-color-background-light);
						}

						.sub-nav {
							display: none;
							position: absolute;
							left: 50%;
							transform: translateX(-30%);
							top: calc(2.4rem + var(--space-sm));
							background-color: var(--smx-color-white);
							padding: var(--space-md);
							border-radius: var(--border-radius-lg);
							border-bottom: 1px solid var(--smx-color-background-light);
							border-left: 1px solid var(--smx-color-background-light);
							border-right: 1px solid var(--smx-color-background-light);

							&.submenu-open {
								display: block;
							}

							&::before {
								content: '';
								position: absolute;
								top: -12px;
								left: 26%;

								width: 0;
								height: 0;

								border-left: 12px solid transparent;
								border-right: 12px solid transparent;
								border-bottom: 12px solid var(--smx-color-white);
							}
						}

						.mega-solutions {
							min-width: 360px;
							width: auto;

							h3 {
								font-size: var(--font-size-base);
								color: var(--smx-color-primary);
								margin: 0;
							}
							p {
								font-size: var(--font-size-sm);
								color: var(--smx-color-text-bold);
								margin: 0;
								display: grid;
								grid-template-columns: auto 1fr;
								gap: 0.5rem;

								span {
									width: 100%;
									display: block;
									border-top: 1px solid
										rgba(var(--smx-color-background-dark-rgb), 0.16);
									margin-top: 0.6rem;
								}
							}

							.solutions-list {
								display: flex;
								list-style: none;
								padding: 0;
								li {
									padding: 0;
									width: 240px;
									a {
										display: block;
									}
									a:hover {
										background: var(--smx-color-background-light);
										h4,
										div {
											color: var(--smx-color-text-bold);
										}
									}

									@media (max-width: 1024px) {
										width: 160px;
									}

									.thumb {
										img {
											display: block;
											max-width: 48px;
											height: auto;
										}
									}

									h4 {
										font-size: var(--font-size-base);
										margin: var(--space-sm) 0;
									}

									div {
										font-size: var(--font-size-sm);
									}
								}
							}

							.sub-footer {
								border-top: 1px solid
									rgba(var(--smx-color-background-dark-rgb), 0.16);
								display: flex;
								justify-content: space-between;
								padding-top: var(--space-sm);
								margin-top: var(--space-md);
							}
						}

						.mega-industries {
							min-width: 360px;
							width: auto;

							h3 {
								font-size: var(--font-size-base);
								color: var(--smx-color-primary);
								margin: 0;
							}
							p {
								font-size: var(--font-size-sm);
								color: var(--smx-color-text-bold);
								margin: 0;
								display: grid;
								grid-template-columns: auto 1fr;
								gap: 0.5rem;

								span {
									width: 100%;
									display: block;
									border-top: 1px solid
										rgba(var(--smx-color-background-dark-rgb), 0.16);
									margin-top: 1.1rem;
								}
							}

							.industries-list {
								display: flex;
								list-style: none;
								padding: 0;
								li {
									padding: 0;
									a {
										display: block;
									}
									a:hover {
										background: var(--smx-color-background-light);
										h4,
										div {
											color: var(--smx-color-text-bold);
										}
									}

									@media (max-width: 1024px) {
										width: 160px;
									}

									.thumb {
										img {
											display: block;
											width: 24px;
											height: 24px;
										}
									}

									h4 {
										font-size: var(--font-size-base);
										margin: var(--space-sm) 0;
									}

									div {
										font-size: var(--font-size-sm);
									}
								}
							}
						}
					}
				}
			}

			.button-contact {
				font-size: var(--font-size-sm);
			}
		}
	}

	/* tablet */
	@media (max-width: 1024px) {
	}
}