/*==========================================
    ECAB V2
    Premium Navbar
==========================================*/


/*=========================
        Header
==========================*/

.main-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:.45s ease;

}


/*=========================
    Scroll Effect
==========================*/

.main-header.scrolled{

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

}


.navbar-toggler.open span:nth-child(1){

    transform:rotate(45deg) translate(6px,6px);

}

.navbar-toggler.open span:nth-child(2){

    opacity:0;

}

.navbar-toggler.open span:nth-child(3){

    transform:rotate(-45deg) translate(5px,-5px);

}
/*=========================
        Navbar
==========================*/

.navbar{

    padding:22px 0;

    transition:.35s ease;

}


.main-header.scrolled .navbar{

    padding:12px 0;

}


/*=========================
        Logo
==========================*/

.logo{

    height:54px;

    transition:.4s ease;

}

.logo-color{

    display:none;

}

.main-header.scrolled .logo-white{

    display:none;

}

.main-header.scrolled .logo-color{

    display:block;

}


/*=========================
        Menu
==========================*/

.navbar-nav{

    gap:12px;

}


.nav-link{

    position:relative;

    color:#fff;

    font-size:15px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    padding:14px 18px !important;

    transition:.35s;

}


.main-header.scrolled .nav-link{

    color:#0B1F48;

}


/*=========================
    Hover Line
==========================*/

.nav-link::after{

    content:"";

    position:absolute;

    left:18px;

    bottom:6px;

    width:0;

    height:2px;

    background:#00AEEF;

    transition:.35s;

}


.nav-link:hover::after,

.nav-link.active::after{

    width:calc(100% - 36px);

}


/*=========================
    Mega Menu
==========================*/

.mega-menu{

    position:static;

}


.mega-menu-content{

    width:100%;

    left:0;

    border:none;

    border-radius:22px;

    margin-top:18px;

    padding:40px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    display:block;

    transform:translateY(20px);

    transition:.35s;

}


.mega-menu:hover .mega-menu-content{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.mega-menu-content h5{

    color:#0B1F48;

    margin-bottom:18px;

    font-size:18px;

    font-weight:700;

}


.mega-menu-content a{

    display:block;

    color:#555;

    text-decoration:none;

    margin-bottom:12px;

    transition:.3s;

}


.mega-menu-content a:hover{

    color:#00AEEF;

    padding-left:8px;

}


/*=========================
        Right Side
==========================*/

.header-right{

    display:flex;

    align-items:center;

    gap:18px;

    margin-left:35px;

}


/*=========================
        Search
==========================*/

.icon-btn{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    color:#fff;

    transition:.35s;

}


.main-header.scrolled .icon-btn{

    background:#EEF5FA;

    color:#0B1F48;

}


.icon-btn:hover{

    transform:translateY(-3px);

}


/*=========================
        Language
==========================*/

.language-switch{

    display:flex;

    align-items:center;

    gap:8px;

}


.language-switch a{

    color:#fff;

    text-decoration:none;

    font-weight:600;

}


.main-header.scrolled .language-switch a{

    color:#0B1F48;

}


.language-switch span{

    color:#ddd;

}


/*=========================
    Quote Button
==========================*/

.quote-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 28px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(90deg,#184D9A,#00AEEF);

    overflow:hidden;

    position:relative;

    transition:.35s;

}


.quote-btn:hover{

    transform:translateY(-3px);

    color:#fff;

}


/*=========================
    Shine Effect
==========================*/

.quote-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.7s;

}


.quote-btn:hover::before{

    left:100%;

}


/*=========================
    Mega Image
==========================*/

.mega-image{

    border-radius:18px;

    overflow:hidden;

}


.mega-image img{

    width:100%;

    transition:.6s;

}


.mega-image:hover img{

    transform:scale(1.08);

}


/*=========================
    Mobile
==========================*/

.navbar-toggler{

    border:none;

    box-shadow:none;

}


.navbar-toggler span{

    display:block;

    width:28px;

    height:2px;

    background:#fff;

    margin:6px 0;

    transition:.35s;

}


.main-header.scrolled .navbar-toggler span{

    background:#0B1F48;

}

/*=========================
    Bootstrap Fixes
==========================*/

.navbar-collapse{
    flex-grow: 0;
}

.navbar-nav{
    align-items: center;
}

.navbar-nav .nav-item{
    position: relative;
}

/*=========================
    Desktop
==========================*/

@media (min-width:1200px){

    .navbar-toggler{
        display:none;
    }

}

.navbar{

    background:transparent !important;

}