/* =========================================================
   CUSTOM MEGA MENU
========================================================= */


/* =========================================================
   MEGA MENU PARENT
========================================================= */

.cmm-mega-parent {
    position: relative !important;
}


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

.cmm-mega-parent > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/*
 * Arrow
 */
.cmm-dropdown-icon {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-top: -4px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    transition:
        transform 0.2s ease;

    flex-shrink: 0;
}


/*
 * Arrow when menu is hovered/open.
 */
.cmm-mega-parent:hover > a .cmm-dropdown-icon,
.cmm-mega-parent.cmm-open > a .cmm-dropdown-icon {
    transform: rotate(225deg);

    margin-top: 4px;
}


/* =========================================================
   MEGA MENU
========================================================= */

.cmm-mega-parent > .cmm-mega-menu {

    position: absolute;

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

    width: min(
        950px,
        calc(100vw - 40px)
    );

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

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 99999;
}


/* =========================================================
   INNER
========================================================= */

.cmm-mega-menu-inner {

    width: 100%;

    padding: 28px;

    box-sizing: border-box;
}


/* =========================================================
   DESKTOP OPEN
========================================================= */

.cmm-mega-parent:hover > .cmm-mega-menu,
.cmm-mega-parent.cmm-open > .cmm-mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

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


/* =========================================================
   ELEMENTOR
========================================================= */

.cmm-mega-menu .elementor {
    width: 100%;
}





/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cmm-mega-parent > a {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }


    .cmm-mega-parent > .cmm-mega-menu {

        position: static;

        width: 100%;

        transform: none;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        display: none;
    }


    .cmm-mega-parent.cmm-open > .cmm-mega-menu {

        display: block;

        transform: none;
    }


    .cmm-mega-menu-inner {

        padding: 20px;
    }


    .cmm-mega-parent.cmm-open
    > a
    .cmm-dropdown-icon {

        transform: rotate(225deg);

        margin-top: 4px;
    }

}