/*==================================================
  PREMIUM NAVBAR
  Financial Solutions
  Part 1 - Foundation
==================================================*/

/*=========================
ROOT VARIABLES
=========================*/

:root{

    --navy:#06172d;
    --navy-light:#0c2747;
    --blue:#00c8ff;
    --green:#22c55e;

    --white:#ffffff;
    --text:#edf6ff;
    --text-light:#bdd3ea;

    --border:rgba(255,255,255,.10);

    --glass:rgba(9,24,45,.72);

    --shadow:
    0 20px 50px rgba(0,0,0,.35);

    --transition:.35s ease;

    --radius:18px;

}

/*=========================
HEADER
=========================*/

.main-header{

    position:fixed;

    top:20px;

    left:0;

    width:100%;

    z-index:9999;

    display:flex;

    justify-content:center;

    pointer-events:none;

    overflow: visible;

}

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

.navbar{

    width:min(1400px,92%);

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 34px;

    border-radius:22px;

    background:var(--glass);

    backdrop-filter:blur(22px);

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

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:all .4s ease;

    pointer-events:auto;

    position:relative;

    overflow:visible;

}

/*=========================
TOP GLOW
=========================*/

.navbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(0,200,255,.12),
        rgba(34,197,94,.12),
        transparent
    );

    opacity:.9;

    pointer-events:none;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:16px;

    text-decoration:none;

    z-index:2;

}

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

.logo-img{

    width:36px;

    height:36px;

    border-radius:16px;

    object-fit:cover;

    background:#36787d;

    padding:4px;

    box-shadow:

    0 0 18px rgba(0,200,255,.25);

}

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

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-size:1.35rem;

    font-weight:800;

    color:#fff;

    letter-spacing:.4px;

}

.logo-subtitle{

    margin-top:4px;

    font-size:.78rem;

    color:var(--text-light);

    letter-spacing:2px;

    text-transform:uppercase;

}

/*==================================================
  PART 2
  NAVIGATION MENU
==================================================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:12px;

    list-style:none;

    margin:0;

    padding:0;

    position:relative;

    z-index:2;

}

/*=========================
NAV LINKS
=========================*/

.nav-links li{

    position:relative;

}

.nav-links a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:48px;

    padding:0 18px;

    text-decoration:none;

    color:var(--text);

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

    border-radius:14px;

    transition:all .35s ease;

    overflow:hidden;

}

/*=========================
SHINE EFFECT
=========================*/

.nav-links a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transition:.7s;

}

.nav-links a:hover::before{

    left:120%;

}

/*=========================
BOTTOM LINE
=========================*/

.nav-links a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:8px;

    width:0;

    height:3px;

    border-radius:20px;

    transform:translateX(-50%);

    background:

    linear-gradient(
        90deg,
        var(--blue),
        var(--green)
    );

    transition:.35s;

}

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

.nav-links a:hover{

    color:#fff;

    background:

    rgba(255,255,255,.06);

    box-shadow:

    0 10px 30px rgba(0,200,255,.18),

    inset 0 0 0 1px rgba(255,255,255,.06);

    transform:translateY(-2px);

}

.nav-links a:hover::after{

    width:70%;

}

/*=========================
ACTIVE LINK
=========================*/

.nav-links a.active{

    color:#fff;

    background:

    linear-gradient(

        135deg,

        rgba(0,200,255,.20),

        rgba(34,197,94,.18)

    );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 12px 35px rgba(0,200,255,.20);

}

.nav-links a.active::after{

    width:70%;

}

/*=========================
FOCUS
=========================*/

.nav-links a:focus-visible{

    outline:none;

    box-shadow:

    0 0 0 3px rgba(0,200,255,.35);

}

/*==================================================
  PART 3
  NAV ACTION BUTTONS
==================================================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:16px;

    position:relative;

    z-index:2;

}

/*=========================
LOGIN BUTTON
=========================*/

.login-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:110px;

    height:48px;

    padding:0 24px;

    text-decoration:none;

    color:var(--text);

    font-size:15px;

    font-weight:600;

    border-radius:14px;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    transition:all .35s ease;

}

.login-btn:hover{

    color:#fff;

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

    border-color:rgba(0,200,255,.45);

    transform:translateY(-3px);

    box-shadow:

    0 12px 30px rgba(0,200,255,.20);

}

/*=========================
FREE CONSULTATION BUTTON
=========================*/

.header-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    min-width:210px;

    height:52px;

    padding:0 34px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    color:#fff;

    border-radius:16px;

    background:

    linear-gradient(
        135deg,
        #00c8ff,
        #22c55e
    );

    box-shadow:

    0 15px 35px rgba(0,200,255,.35);

    transition:all .4s ease;

}

/*=========================
BUTTON SHINE
=========================*/

.header-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transition:.8s;

}

.header-btn:hover::before{

    left:150%;

}

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

.header-btn:hover{

    transform:

    translateY(-4px)

    scale(1.03);

    box-shadow:

    0 22px 50px rgba(0,200,255,.40),

    0 10px 25px rgba(34,197,94,.28);

}

/*=========================
BUTTON ACTIVE
=========================*/

.header-btn:active{

    transform:

    translateY(-1px)

    scale(.98);

}

/*=========================
BUTTON BORDER GLOW
=========================*/

.header-btn::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.22);

    opacity:0;

    transition:.35s;

}

.header-btn:hover::after{

    opacity:1;

}

/*=========================
BUTTON FOCUS
=========================*/

.login-btn:focus-visible,
.header-btn:focus-visible{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(0,200,255,.30);

}

/*==================================================
  PART 4
  MOBILE MENU + RESPONSIVE
==================================================*/

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

.menu-toggle{

    display:none;

    width:52px;

    height:52px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    transition:all .35s ease;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    z-index:10001;

}

.menu-toggle:hover{

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

    box-shadow:

    0 12px 30px rgba(0,200,255,.25);

}

.menu-toggle span{

    width:24px;

    height:2.5px;

    border-radius:20px;

    background:#ffffff;

    transition:all .35s ease;

}

/*=========================
ACTIVE ICON
=========================*/

.menu-toggle.active span:nth-child(1){

    transform:
    translateY(8px)
    rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:
    translateY(-8px)
    rotate(-45deg);

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:340px;

    max-width:90%;

    height:100vh;

    background:

    linear-gradient(
        180deg,
        #06172d,
        #0c2747
    );

    backdrop-filter:blur(30px);

    padding:120px 35px 40px;

    transition:.45s ease;

    z-index:10000;

    overflow-y:auto;

    box-shadow:

    -15px 0 50px rgba(0,0,0,.35);

}

.mobile-menu.active{

    right:0;

}

.mobile-menu ul{

    list-style:none;

    margin:0;

    padding:0;

}

.mobile-menu li{

    margin-bottom:14px;

}

.mobile-menu a{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:56px;

    text-decoration:none;

    color:#fff;

    font-size:16px;

    font-weight:600;

    border-radius:14px;

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

    border:1px solid rgba(255,255,255,.08);

    transition:all .35s ease;

}

.mobile-menu a:hover{

    background:

    linear-gradient(

        135deg,

        rgba(0,200,255,.18),

        rgba(34,197,94,.18)

    );

    transform:translateX(6px);

}

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

.mobile-login{

    margin-top:25px;

}

.mobile-consult{

    margin-top:12px;

    background:

    linear-gradient(
        135deg,
        #00c8ff,
        #22c55e
    ) !important;

    color:#fff !important;

    font-weight:700;

    box-shadow:

    0 18px 40px rgba(0,200,255,.35);

}

/*=========================
OVERLAY
=========================*/

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/*=========================
SCROLL EFFECT
=========================*/

.main-header.scrolled .navbar{

    height:72px;

    background:rgba(6,23,45,.92);

    box-shadow:

    0 20px 60px rgba(0,0,0,.45);

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1200px){

    .navbar{

        width:95%;

        padding:0 24px;

    }

}

@media(max-width:992px){

    .nav-links{

        display:none;

    }

    .nav-actions{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}

@media(max-width:768px){

    .main-header{

        top:12px;

    }

    .navbar{

        height:74px;

        border-radius:18px;

        padding:0 18px;

    }

    .logo-title{

        font-size:1.05rem;

    }

    .logo-subtitle{

        display:none;

    }

    .logo-img{

        width:70px;

        height:70px;

    }

}

@media(max-width:480px){

    .navbar{

        width:96%;

        padding:0 14px;

    }

    .mobile-menu{

        width:100%;

        max-width:100%;

    }

}

/*==================================================
        MEGA MENU
        PART 2
==================================================*/

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

.premium-dropdown{

    position:relative;

}

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

.dropdown-toggle{

    display:flex !important;

    align-items:center;

    gap:10px;

}

.dropdown-icon{

    font-size:12px;

    transition:.35s ease;

}

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

.mega-menu{

    position:absolute;

    top:78px;

    left:50%;

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

    width:850px;

    max-width:850px;

    opacity:0;

    visibility:hidden;

    z-index:999;

    border-radius:22px;

    overflow: visible;

    background:

    linear-gradient(

        135deg,

        rgba(8,27,52,.98),

        rgba(12,40,74,.97)

    );

    backdrop-filter:blur(30px);

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

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    0 40px 80px rgba(0,0,0,.45),

    0 0 50px rgba(0,200,255,.10);

    transition:all .45s ease;

}

/*==============================
TOP GLOW
==============================*/

.mega-menu::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(0,200,255,.08),

        rgba(34,197,94,.08),

        transparent

    );

    pointer-events:none;

}

/*==============================
GRID
==============================*/

.mega-menu-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:18px;

    padding:22px 25px;

}

/*==============================
COLUMN
==============================*/

.mega-column{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/*==============================
HEADING
==============================*/

.mega-column h3{

    margin-bottom:10px;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

    position:relative;

    padding-bottom:12px;

}

.mega-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        #00c8ff,

        #22c55e

    );

}

/*==============================
LINKS
==============================*/

.mega-column a{

    display:flex;

    align-items:center;

    padding:8px 10px;

    margin:0;

    line-height:1.3;

    border-radius:14px;

    text-decoration:none;

    color:#d9ecff;

    font-size:15px;

    font-weight:500;

    transition:.35s;

}

/*==============================
CTA AREA
==============================*/

.mega-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:30px 45px;

    border-top:1px solid rgba(255,255,255,.08);

    background:

    rgba(255,255,255,.03);

}

.mega-footer-text h4{

    color:#ffffff;

    font-size:22px;

    margin-bottom:8px;

}

.mega-footer-text p{

    color:#bdd8f2;

    line-height:1.7;

}

/*==================================================
        MEGA MENU
        PART 3
        PREMIUM ANIMATIONS
==================================================*/

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

.premium-dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

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

}

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

.premium-dropdown:hover .dropdown-icon{

    transform:rotate(180deg);

    color:#00c8ff;

}

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

.mega-column a{

    position:relative;

    overflow:hidden;

}

/*==============================
LEFT ICON
==============================*/

.mega-column a::before{

    content:"→";

    margin-right:12px;

    color:#00c8ff;

    font-size:14px;

    transition:.35s;

}

/*==============================
SHINE EFFECT
==============================*/

.mega-column a::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transition:.7s;

}

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

.mega-column a:hover{

    color:#ffffff;

    background:

    linear-gradient(

        135deg,

        rgba(0,200,255,.16),

        rgba(34,197,94,.16)

    );

    transform:

    translateX(10px);

    box-shadow:

    0 10px 25px rgba(0,200,255,.18);

}

.mega-column a:hover::after{

    left:150%;

}

.mega-column a:hover::before{

    color:#22c55e;

    transform:translateX(5px);

}

/*==============================
CTA BUTTON
==============================*/

.mega-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 30px;

    text-decoration:none;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    border-radius:16px;

    background:

    linear-gradient(

        135deg,

        #00c8ff,

        #22c55e

    );

    box-shadow:

    0 18px 40px rgba(0,200,255,.30);

    transition:.4s ease;

    position:relative;

    overflow:hidden;

}

/*==============================
BUTTON SHINE
==============================*/

.mega-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.8s;

}

.mega-btn:hover::before{

    left:150%;

}

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

.mega-btn:hover{

    transform:

    translateY(-4px)

    scale(1.03);

    box-shadow:

    0 25px 50px rgba(0,200,255,.35),

    0 12px 25px rgba(34,197,94,.25);

}

.mega-btn i{

    transition:.35s;

}

.mega-btn:hover i{

    transform:translateX(6px);

}

/*==============================
COLUMN ANIMATION
==============================*/

.mega-column{

    transition:.35s;

}

.premium-dropdown:hover .mega-column{

    animation:megaFade .45s ease forwards;

}

@keyframes megaFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.mega-footer-text h4{

    transition:.35s;

}

.premium-dropdown:hover .mega-footer-text h4{

    color:#00c8ff;

}

/*==================================================
        MEGA MENU
        PART 4
        RESPONSIVE
==================================================*/

/*==============================
LAPTOP
==============================*/

@media(max-width:1200px){

    .mega-menu{

        width:900px;

    }

}

/*==============================
TABLET
==============================*/

@media(max-width:992px){

    .mega-menu{

        position:static;

        width:100%;

        max-width:100%;

        opacity:1;

        visibility:visible;

        transform:none;

        display:none;

        margin-top:15px;

        border-radius:18px;

    }

    .premium-dropdown.active .mega-menu{

        display:block;

    }

    .mega-menu-container{

        grid-template-columns:

        repeat(2,1fr);

        gap:30px;

        padding:30px;

    }

    .mega-footer{

        flex-direction:column;

        align-items:flex-start;

    }

}

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

@media(max-width:768px){

    .mega-menu{

        border-radius:16px;

    }

    .mega-menu-container{

        grid-template-columns:1fr;

        gap:25px;

        padding:25px;

    }

    .mega-column h3{

        font-size:18px;

    }

    .mega-column a{

        padding:14px;

        font-size:15px;

    }

    .mega-footer{

        padding:25px;

        text-align:center;

        align-items:center;

    }

    .mega-footer-text h4{

        font-size:20px;

    }

    .mega-btn{

        width:100%;

        justify-content:center;

    }

}