.megamenu-trigger:hover .megamenu{
	display: block !important;
}

.megamenu{
	background: #FFF;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 1300px;
    max-width: 100%;
	border-radius: 5px;
	transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
	box-shadow: var(--box-shadow);
	border-top: 3px solid var(--color-primary);
	z-index: 9999;
}

.megamenu .container{
	padding: 16px 24px;
    column-gap: 16px;
	display: flex;
	align-items: stretch;
}

.megamenu .text-bold{
	letter-spacing: 0.1rem;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 700;
	border-bottom: unset;
	font-family: var(--font-family-headline);
}

.mm-col{
	display: flex;
	flex-direction: column;
	flex-basis: 20%;
    max-width: 20%;
}

.mm-col:last-child{
	flex-basis: 40%;
	max-width: 40%;
	gap: 12px;
}

.mm-col .menu{
	flex-direction: column;
	align-items: flex-start;
}

.megamenu .menu-item{
	display: inline-flex;
	flex-basis: 40%;
}

.megamenu .menu-item a{
	display: inline-flex;
	align-items: center;
    gap: 10px;
	padding: 10px 0px;
    font-weight: normal;
    text-transform: uppercase;
	border-bottom: unset;
}

.megamenu .menu-item a:hover{
	color: var(--color-primary);
}

/* Baners */
.baner-col img{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
	object-fit: cover;
	transition: transform var(--transition);
}

.mm-col.baner-col a{
	display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    position: relative;
    padding: 16px 38px;
    height: 175px;
    text-align: right;
    font-size: 1.5rem;
	overflow: hidden;
}

.mm-col.baner-col a:last-child{
	text-align: left;
}

.baner-col a p{
	margin: 0;
    font-size: 0.9rem;
    letter-spacing: 0.15rem;
	text-transform: uppercase;
}

.baner-col a:hover img{
	transform: scale(1.08);
}