/*==================================================
NAVBAR
==================================================*/

.navbar-securx{
    position:relative;
    width:100%;
    z-index:999;
    padding:28px 0;
    background:#000;
    overflow:visible;
}

.navbar-securx .container,
.navbar-collapse{
    overflow:visible !important;
}

.navbar-brand img{
    height:70px;
}

.navbar-nav{
    gap:30px;
}

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

.navbar-nav .nav-link{

    position:relative;

    color:#ffffff;

    font-size:18px;

    padding:10px 0;

    transition:.35s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{

    color:#64d741;
}

.navbar-nav .nav-link.active::before{

    content:"";

    position:absolute;

    left:50%;
    top:-16px;

    transform:translateX(-50%);

    width:80px;
    height:5px;

    border-radius:30px;

    background:#64d741;
}

/*==================================================
CONTACT BUTTON
==================================================*/

.btn-contact{

    width:180px;
    height:50px;

    border:2px solid #ffffff;

    border-radius:60px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#ffffff;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:.35s;
}

.btn-contact:hover{

    background:#64d741;

    color:#fff;
}

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

.mega-menu{

    position:relative;
}

/* Hover bridge */

.mega-menu::after{

    content:"";

    position:absolute;

    top:100%;
    left:0;

    width:100%;
    height:35px;
}

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

.mega-dropdown{

    position:absolute;

    top:100%;
    left:50%;

    width:520px;

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

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:.35s ease;

    z-index:99999;
}

/* SHOW */

.mega-menu:hover > .mega-dropdown{

    opacity:1;
    visibility:visible;

    pointer-events:auto;

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

/*==================================================
TRIANGLE
==================================================*/

.mega-dropdown::before{

    content:"";

    position:absolute;

    top:-12px;
    left:50%;

    transform:translateX(-50%);

    width:24px;
    height:14px;

    background:#97d27d;

    clip-path:polygon(
        50% 0%,
        0% 100%,
        100% 100%
    );

    z-index:10;
}

/*==================================================
BOX
==================================================*/

.mega-content{

    border-radius:22px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #97d27d 0%,
            #7acd7b 35%,
            #47c8a4 70%,
            #08b8ac 100%
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.35);
}

 

/*==================================================
ITEMS
==================================================*/
/*==================================================
MEGA ITEM
==================================================*/

.mega-item{

    position:relative;

    display:flex;
    align-items:center;

    gap:18px;

    padding:22px 42px;

    text-decoration:none;

    color:#141414;

    font-size:18px;
    font-weight:500;

    overflow:hidden;

    transition:.35s;
}

/* Chevron */

.mega-item i{

    font-size:18px;

    flex-shrink:0;

    transition:.35s;
    
}

/*==================================================
TEXT
==================================================*/

.mega-text{

    display:block;

    transition:

        opacity .35s,
        transform .35s;

}

/*==================================================
LOGO
==================================================*/

/* Logo Area */

.mega-item-logo{

    position:absolute;

    left:78px;
    top:50%;

     width:320px;
    height:50px;

    display:flex;
    align-items:center;

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

    opacity:0;

    transition:.35s;

    pointer-events:none;
}

/* Actual Image */


.mega-item-logo img{

     height:25px;
  
    object-fit:contain;

    display:block;
}

.mega-item-logo-ctem{

     height:45px !important;
}


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

.mega-item:hover{

    background:

        linear-gradient(
            90deg,
            #171717 0%,
            #2b2b2b 50%,
            rgba(85,130,91,.95) 100%
        );

    color:#00d7a7;
}

.mega-item:hover i{

    color:#00d7a7;

    transform:translateX(4px);
}

/* Hide Text */

.mega-item:hover .mega-text{

    opacity:0;

    transform:translateX(15px);
}

.mega-item:hover .mega-item-logo{

    opacity:1;

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

/*==================================================
FIRST & LAST SPACING
==================================================*/

.mega-item:first-child{

    padding-top:26px;
}

.mega-item:last-child{

    padding-bottom:26px;
}


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

.navbar-toggler{
    border:none;
    padding:0;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:none !important;
}

.navbar-toggler-icon{
    background-image:none;
    position:relative;
    width:26px;
    height:2px;
    background:#ffffff;
    transition:.3s;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
    content:"";
    position:absolute;
    left:0;
    width:26px;
    height:2px;
    background:#ffffff;
    transition:.3s;
}

.navbar-toggler-icon::before{
    top:-8px;
}

.navbar-toggler-icon::after{
    top:8px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
    background:transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
    top:0;
    transform:rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
    top:0;
    transform:rotate(-45deg);
}

/*==================================================
MOBILE COLLAPSE PANEL
==================================================*/

@media (max-width:1199.98px){

    .navbar-securx{
        padding:18px 0;
    }

    .navbar-brand img{
        height:46px;
    }

    .navbar-collapse{
        position:fixed;
        top:0;
        right:0;
        width:min(340px,86vw);
        height:100vh;
        background:#0a0a0a;
        padding:90px 26px 30px;
        overflow-y:auto;
        transform:translateX(100%);
        transition:transform .4s ease;
        z-index:1000;
    }

    .navbar-collapse.show{
        transform:translateX(0);
        box-shadow:-20px 0 60px rgba(0,0,0,.45);
    }

    .navbar-nav{
        gap:0;
        width:100%;
    }

    .navbar-nav .nav-item{
        border-bottom:1px solid rgba(255,255,255,.08);
        width:100%;
    }

    .navbar-nav .nav-link{
        padding:16px 4px;
        font-size:17px;
    }

    .navbar-nav .nav-link.active::before{
        left:0;
        top:auto;
        bottom:0;
        transform:none;
        width:36px;
        height:3px;
    }

    .btn-contact{
        width:100%;
        margin-top:24px;
    }

    /* backdrop behind the sliding panel */
    .navbar-collapse::before{
        content:"";
        position:fixed;
        inset:0;
        width:100vw;
        height:100vh;
        background:rgba(0,0,0,.55);
        z-index:-1;
        opacity:0;
        pointer-events:none;
        transition:opacity .3s;
    }

    .navbar-collapse.show::before{
        opacity:1;
        pointer-events:auto;
    }

    /*==================================================
    MEGA MENU -> ACCORDION ON MOBILE
    ==================================================*/

    .mega-menu{
        position:static;
    }

    .mega-menu::after{
        display:none;
    }

    .mega-menu > .nav-link{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .mega-menu > .nav-link .dropdown-arrow{
        transition:transform .3s;
    }

    .mega-menu.open > .nav-link .dropdown-arrow{
        transform:rotate(180deg);
    }

    .mega-dropdown{
        position:static;
        width:100%;
        transform:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        max-height:0;
        overflow:hidden;
        transition:max-height .4s ease;
    }

    .mega-menu:hover > .mega-dropdown{
        transform:none;
    }

    .mega-menu.open > .mega-dropdown{
        max-height:600px;
    }

    .mega-dropdown::before{
        display:none;
    }

    .mega-content{
        border-radius:14px;
        margin:10px 0 14px;
    }

    .mega-item{
        padding:14px 20px;
        font-size:15px;
    }

    .mega-item:first-child{
        padding-top:18px;
    }

    .mega-item:last-child{
        padding-bottom:18px;
    }

    /* logo-swap hover effect doesn't apply on touch - keep text always visible */
    .mega-item-logo{
        display:none;
    }

    .mega-item:hover .mega-text{
        opacity:1;
        transform:none;
    }
}

@media (max-width:400px){

    .navbar-collapse{
        width:100vw;
    }
}