/* =========================================================
   SIMPLE DROPDOWN
   ABOUT US / INSPIRATION / APPLICATION
========================================================= */

.about-dropdown-wrapper,
.inspiration-dropdown-wrapper,
.application-dropdown-wrapper {
    position: relative;
}


/* =========================================================
   DROPDOWN
========================================================= */

.simple-dropdown,
.about-menu {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    transform: translateX(-50%);

    width: 360px;

    padding: 8px 0;

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 0 0 14px 14px;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 1000;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


/* =========================================================
   SHOW
========================================================= */

.about-dropdown-wrapper:hover .about-menu,
.inspiration-dropdown-wrapper:hover .inspiration-menu,
.application-dropdown-wrapper:hover .application-menu {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%);
}


/* =========================================================
   HOVER BRIDGE
========================================================= */

.about-dropdown-wrapper::after,
.inspiration-dropdown-wrapper::after,
.application-dropdown-wrapper::after {

    content: "";

    position: absolute;

    top: 100%;
    left: 50%;

    width: 360px;
    height: 8px;

    transform: translateX(-50%);

    background: transparent;

    z-index: 999;
}


/* =========================================================
   MENU ITEM
========================================================= */

.simple-menu-item,
.about-menu-item {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 15px 28px;

    color: #252525;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.3;

    transition:
        color .2s ease,
        background-color .2s ease,
        padding-left .2s ease;
}


/* =========================================================
   SEPARATOR
========================================================= */

.simple-menu-item:not(:last-child)::after,
.about-menu-item:not(:last-child)::after {

    content: "";

    position: absolute;

    left: 28px;
    right: 28px;

    bottom: 0;

    height: 1px;

    background: #eeeeee;
}


/* =========================================================
   HOVER
========================================================= */

.simple-menu-item:hover,
.about-menu-item:hover {

    color: #0067b9;

    background: #f7f9fc;

    padding-left: 34px;
}


/* =========================================================
   ARROW
========================================================= */

.simple-menu-item i,
.about-menu-item i {

    font-size: 13px;

    color: #0067b9;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.simple-menu-item:hover i,
.about-menu-item:hover i {

    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   PRODUCTS SIMPLE DROPDOWN
========================================================= */

.products-dropdown-wrapper {
    position: relative;
}


.products-menu {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    width: 280px;
    min-width: 280px;

    padding: 8px 0;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 0 0 14px 14px;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(8px);

    z-index: 9999;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


.products-dropdown-wrapper:hover .products-menu {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* Hover bridge */

.products-dropdown-wrapper::after {

    content: "";

    position: absolute;

    top: 100%;
    left: 50%;

    width: 280px;
    height: 8px;

    transform: translateX(-50%);

    background: transparent;

    z-index: 9998;
}


/* Items */

.products-menu .simple-menu-item {

    padding: 15px 28px;

    font-size: 17px;
    font-weight: 600;
}


/* Hover */

.products-menu .simple-menu-item:hover {

    padding-left: 34px;

}