/* header section */

.unibright-header{
    width:100%;
    background:#fff;
    height:80px;
    position:relative;
    z-index:999;
    border-bottom:1px solid rgba(0,0,0,.05);
}

.unibright-header .container-width{
    height:100%;
}

.navbar{
    height:80px;
    padding:0;
}

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-width{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.navbar-brand{
    padding:0;
    margin:0;
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.navbar-brand img{
    max-width:64px;
    max-height: 48px;
    height:auto;
    display:block;
}

.navbar-collapse{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:1;
}

.navbar-nav{
    gap:10px; 
    margin:0 auto;
    align-items:center;
}

.nav-item{
    position:relative;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 8px !important;
    color:rgba(11, 11, 46, 1) !important;
    font-size:16px;
    font-style: Medium;
    font-weight:500;
    transition:.3s;
}

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

.navbar-toggler:hover{
    background:#E8E3FF;
}

.navbar-toggler:focus{
    box-shadow:none!important;
}

.navbar-toggler-icon{
    background-image:none;
    position:relative;
    width:22px;
    height:2px;
    background:rgb(225,255,255);
    transition:.3s;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
    content:"";
    position:absolute;
    left:0;
    width:22px;
    height:2px;
    background:rgb(225,255,255);
    transition:.3s;
}

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

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

.navbar-toggler.active .navbar-toggler-icon{
    background:transparent;
}
.navbar-toggler.active .navbar-toggler-icon::before{
    top:0;
    transform:rotate(45deg);
    background:#7B61FF;
}
.navbar-toggler.active .navbar-toggler-icon::after{
    top:0;
    transform:rotate(-45deg);
    background:#7B61FF;
}

.dropdown-toggle::after{
    display: none !important;
}



.nav-arrow{
    margin-left:6px;
    font-size:14px;
    transition: transform .3s ease;
}

.nav-item.show .nav-arrow{
    transform: rotate(180deg);
}

.nav-item:hover > .nav-link .nav-arrow,
.nav-item.show > .nav-link .nav-arrow{
    transform:rotate(-180deg);
}


.nav-item > .dropdown-menu{
    display:none;
}

.nav-item.show > .dropdown-menu{
    display:block;
}

.ai-services-dropdown{
    min-width:280px;
    padding:12px 10px;
    margin-top:14px;
    background:#fff;
    border:none;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.ai-services-dropdown li{
    list-style:disc;
    margin-left:22px;
    color:#474650;
    margin: 0;
}

.ai-services-dropdown li + li{
    margin-top:18px;
}

.ai-services-dropdown .dropdown-item{
    display:block;
    padding:12px 22px;
    margin:0;
    color:#474650;
    font-size:15px;
    font-weight:500;
    transition:all .3s ease;
}


.ai-services-dropdown .dropdown-item:hover{

    background:transparent;

    color:#7B61FF;

    padding-left:5px;

}

.ai-services-dropdown .dropdown-item:hover,
.ai-services-dropdown .dropdown-item:focus{
    background:#F6F4FF;
    color:#7B61FF;
    padding-left:28px;
}

.ai-services-dropdown .dropdown-item:active{
    background:#F6F4FF;
    color:#7B61FF;
}

.mega-menu{
    width:100%;
    left:0;
    right:0;
    top:100%;
    margin-top:18px;
    border:none!important;
    border-radius:24px;
background: #FFFFFFD1;
    padding:35px;
    box-shadow:0 18px 60px rgba(0,0,0,.12);
    backdrop-filter: blur(28px);
    animation:dropdownFade .25s ease;
}

.container-m{

    width:92%;
    margin:auto;

}

.mega-banner img{

    width:100%;
    display:block;

    border-radius:18px;

}

.menu-box{

    height:100%;

}

.menu-box .mega-menu-heading{

    display:flex;
    align-items:center;
    gap:10px;

    color:#7B61FF;

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

    margin-bottom:18px;

}

.menu-box .mega-menu-heading img{

    width:22px;
    height:22px;

    object-fit:contain;

    flex-shrink:0;

}

.menu-box .mega-menu-heading i{

    font-size:20px;
    width:22px;
    text-align:center;
    flex-shrink:0;

}

.menu-box ul{

    margin:0;

    padding-left:20px;

    list-style:disc;

}

.menu-box ul li{

    margin-bottom:12px;

}

.menu-box ul li:last-child{

    margin-bottom:0;

}

.menu-box ul li a{

    color:#474650;

    text-decoration:none;

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

    transition:.30s ease;

}

.menu-box ul li a:hover{

    color:#7B61FF;

    padding-left:5px;

}

.header-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-left:30px;
    flex-shrink:0;
}

.demos-btns{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:175px;
    height:48px;
    padding:0 22px;
    background: linear-gradient(90deg, #7B61FF 12%, #CCBBF5 95.67%);
    color:rgba(255, 255, 255, 1);
    border:none;
    border-radius:8px;
    font-size:16px !important;
    font-weight:500 !important;
    font-family:Inter;
    text-decoration:none;
    transition:all .35s ease;
}

.demos-btns img{
    width:18px;
    height:18px;
    object-fit:contain;
    transition:.35s ease;
}

.demos-btns:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(123,97,255,.30);
}

.demos-btns:hover img{
    transform:rotate(-10deg) scale(1.1);
}

.call-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:175px;
    height:48px;
    padding:0 20px;
    background: var(--Brand-color-Lavender, rgba(216, 216, 255, 1));
    color:rgba(5, 5, 62, 1);
    border-radius:10px;
    font-size:16px;
    font-weight:500 !important;
    font-style: Medium;
    text-decoration:none;
    transition:all .35s ease;
}

.call-btn img{
    width:18px;
    height:18px;
    object-fit:contain;
    transition:.35s ease;
}

.call-btn:hover{
    color:#05053E;
    background:#D8D0FF;
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(123,97,255,.18);
}

.call-btn:hover img{
    transform:scale(1.1);
}

/* Desktop: open dropdowns on hover as well as click */
@media(min-width:1301px){

    .navbar-nav{

        gap:30px;

    }

    .mega-menu{

        padding:45px;

    }

    .header-buttons{
        gap:16px;
        margin-left:40px;
    }

    .demos-btns,
    .call-btn{
        min-width:180px;
    }

    .nav-item:hover > .dropdown-menu{
        display:block;
    }

}

@media(min-width:1440px){

    .navbar-nav{

        gap:30px;

    }
      .mega-menu{

        padding:45px;

    }
       .header-buttons{
        gap:16px;
        margin-left:40px;
    }

    .demos-btns,
    .call-btn{
        min-width:180px;
    }

}
@media(min-width:300px) and (max-width:1300px){

    .navbar>.container,
    .navbar>.container-fluid,
    .navbar>.container-width{
        flex-wrap:wrap;
    }

    .navbar-brand{
        order:1;
    }

    .navbar-toggler{
        order:2;
        display:flex !important;
        margin-left:auto;
        z-index:1000;
    }

    .navbar-toggler-icon{
        display:block;
        transition:.3s;
    }

    .navbar-toggler.active .navbar-toggler-icon{
        background:transparent;
    }
    .navbar-toggler.active .navbar-toggler-icon::before{
        top:0;
        transform:rotate(45deg);
    }
    .navbar-toggler.active .navbar-toggler-icon::after{
        top:0;
        transform:rotate(-45deg);
    }

    #mainMenu.navbar-collapse{
        order:3;
        display:none !important;
        flex-direction:column;
        align-items:flex-start;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        max-height:calc(100vh - 80px);
        overflow-y:auto;
        background:#fff;
        padding:20px;
        box-shadow:0 15px 45px rgba(0,0,0,.15);
        z-index:998;
        border-top:1px solid rgba(0,0,0,.06);
    }

    #mainMenu.navbar-collapse.show{
        display:flex !important;
        animation:dropdownFade .25s ease;
    }

    #mainMenu .navbar-nav{
        flex-direction:column !important;
        align-items:flex-start !important;
        width:100%;
        margin:0 0 16px 0 !important;
        gap:2px;
    }

    #mainMenu .nav-item{
        width:100%;
    }

    #mainMenu .nav-link{
        width:100%;
        padding:12px 10px !important;
        justify-content:space-between;
        border-bottom:1px solid rgba(0,0,0,.05);
    }

    #mainMenu .dropdown-menu{
        display:none;
        position:static !important;
        opacity:1;
    }
    #mainMenu .nav-item.show > .dropdown-menu{
        display:block;
    }

    #mainMenu .ai-services-dropdown,
    #mainMenu .mega-menu{
        width:100%;
        max-width:100%;
        margin-top:8px;
        box-shadow:none;
        border-radius:12px;
        padding:16px;
    }

    #mainMenu .container-m{
        width:100%;
    }

    #mainMenu .mega-menu .row.g-5 > [class*="col-"],
    #mainMenu .mega-menu .row.gy-4 > [class*="col-"]{
        width:100% !important;
        flex:0 0 100% !important;
        max-width:100% !important;
    }

    #mainMenu .mega-banner img{
        border-radius:12px;
    }

    #mainMenu .header-buttons{
        flex-direction:column !important;
        align-items:stretch;
        width:100%;
        gap:10px;
        margin-left:0 !important;
    }

    #mainMenu .demos-btns,
    #mainMenu .call-btn{
        width:100%;
        min-width:unset;
    }
}

/* Small phones: tighten up spacing further */
@media(max-width:480px){

    .unibright-header{
        height:64px;
    }

    .navbar{
        height:64px;
    }

    .navbar-brand img{
        max-width:52px;
        max-height:38px;
    }

    .navbar-toggler{
        width:40px;
        height:40px;
    }

    #mainMenu.navbar-collapse{
        top:64px;
        padding:14px;
    }

    .demos-btns,
    .call-btn{
        height:44px;
        font-size:15px !important;
    }
}


/* ends here */