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

.ip-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background:var(--ip-header-bg,#FFFFFF);
border-bottom:1px solid #E5E7EB;
box-shadow:0 2px 10px rgba(0,0,0,.05);
transition:box-shadow .3s ease;
}

.ip-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:var(--ip-header-height,68px);
gap:24px;
}

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

.ip-header-left{
display:flex;
align-items:center;
flex-shrink:0;
}

.ip-logo{
display:flex;
align-items:center;
}

.ip-logo img{
width:var(--ip-logo-width,220px);
height:auto;
display:block;
transition:.3s;
}

.ip-logo a{
font-size:28px;
font-weight:700;
color:#000080;
text-decoration:none;
}

.ip-logo img:hover{
transform:scale(1.03);
}

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

.ip-menu{
flex:1;
display:flex;
justify-content:center;
align-items:center;
margin:0 20px;
}

.ip-menu ul{
display:flex;
align-items:center;
justify-content:center;
gap:30px;
margin:0;
padding:0;
list-style:none;
}

.ip-menu li{
position:relative;
margin:0;
padding:0;
}

.ip-menu a{
display:block;
position:relative;
padding:10px 0;
font-size:15px;
font-weight:600;
color:var(--ip-menu-color,#111827);
text-decoration:none;
transition:.3s;
}

.ip-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:#FFBC00;
transition:.3s;
}

.ip-menu a:hover::after,
.ip-menu .current-menu-item>a::after{
width:100%;
}

.ip-menu a:hover{
color: #000080;
transform:translateY(-2px);
}

.ip-menu .current-menu-item>a,
.ip-menu .current-menu-parent>a{
color:#000080;
}

/*
==================================================
RIGHT
==================================================
*/

.ip-header-right{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}

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

.ip-login-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:95px;
height:42px;
padding:0 18px;
background:#000080;
color:#FFFFFF;
font-size:14px;
font-weight:600;
text-decoration:none;
border-radius:10px;
transition:.3s;
}

.ip-login-btn:hover{
background:#000080;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,128,.15);
}


.ip-login-btn:focus{
outline:none;
box-shadow:0 0 0 3px rgba(0,0,128,.15);
}

/*
==================================================
MEGA TOGGLE
==================================================
*/

.ip-mega-toggle{
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
background:#000080;
border:none;
border-radius:12px;
cursor:pointer;
color:#FFFFFF;
box-shadow:0 4px 12px rgba(0,0,128,.18);
transition:all .3s ease;
}


.ip-mega-toggle svg{
width:22px;
height:22px;
display:block;
}

.ip-mega-toggle:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,128,.25);
}

.ip-mega-toggle.active{
background:#FFBC00;
color:#000080;
transform:rotate(90deg);
}

.ip-mega-toggle:focus{
outline:none;
box-shadow:0 0 0 3px rgba(255,188,0,.35);
}

/*
==================================================
ANNOUNCEMENT BAR
==================================================
*/

.ip-announcement-bar{
background:#000080;
color:#FFFFFF;
height:36px;
display:flex;
align-items:center;
overflow:hidden;
white-space:nowrap;
font-size:13px;
font-weight:600;
}

.ip-marquee{
display:inline-block;
padding-left:100%;
animation:ipmarquee 18s linear infinite;
}

@keyframes ipmarquee{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}

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

.ip-mega-menu{
display:none;
position:fixed;
top:68px;
left:0;
right:0;
max-height:calc(100vh - 68px);
overflow-y:auto;
background:#FFFFFF;
border-top:1px solid #E5E7EB;
box-shadow:0 12px 35px rgba(0,0,0,.08);
padding:40px 0;
z-index:99998;
}


.ip-mega-menu.active{
display:block;
}

.ip-mega-menu-list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
max-width:1200px;
margin:0 auto;
padding:0 15px;
list-style:none;
}

.ip-mega-menu-list>li{
margin:0;
padding:0;
}

.ip-mega-menu-list>li>a{
display:block;
margin-bottom:16px;
font-size:17px;
font-weight:700;
color:#000080;
text-decoration:none;
text-transform:uppercase;
letter-spacing:.3px;
}

.ip-mega-menu-list .sub-menu{
margin:0;
padding:0;
list-style:none;
}

.ip-mega-menu-list .sub-menu li{
margin:0;
padding:0;
}

.ip-mega-menu-list .sub-menu a{
display:block;
padding:8px 0;
font-size:15px;
font-weight:500;
color:#374151;
text-decoration:none;
transition:.3s;
border-radius:6px;
}

.ip-mega-menu-list .sub-menu a:hover{
color:#000080;
padding-left:8px;
background:#F8FAFC;
}

.ip-mega-toggle.active{
background:#000080;
color:#FFFFFF;
border-color:#000080;
}


body.menu-open{
overflow:hidden;
}

/*
==================================================
DESKTOP & TABLET
==================================================
*/

@media(min-width:768px){

body{
padding-top:68px;
}

.ip-header-inner{
height:68px;
}

.ip-header-left{
flex-shrink:0;
}

.ip-menu{
display:flex !important;
flex:1;
}

.ip-menu ul{
display:flex;
align-items:center;
justify-content:center;
gap:30px;
}

.ip-header-right{
display:flex;
align-items:center;
gap:14px;
}

.ip-login-btn{
height:42px;
padding:0 18px;
font-size:14px;
}

.ip-mega-toggle{
display:flex;
width:42px;
height:42px;
font-size:22px;
}
    
}
/*
==================================================
ACTIVE STATES
==================================================
*/

.ip-menu .current-menu-item>a,
.ip-menu .current-menu-parent>a,
.ip-menu .current_page_item>a{
color:#000080;
font-weight:700;
}

.ip-mega-menu .current-menu-item>a,
.ip-mega-menu .current-menu-parent>a{
color:#000080;
font-weight:700;
}

/*
==================================================
SMOOTH TRANSITIONS
==================================================
*/

.ip-menu,
.ip-mega-menu,
.ip-login-btn,
.ip-mega-toggle,
.ip-menu a{
transition:all .3s ease;
}
/*
==================================================
MOBILE
==================================================
*/

@media(max-width:767px){

body{
padding-top:60px;
}

.ip-header-inner{
height:60px;
gap:10px;
}

.ip-header-left{
flex:1;
min-width:0;
}

.ip-logo img{
width:auto;
max-width:170px;
height:auto;
}


.ip-menu{
display:none;
}

.ip-header-right{
display:flex;
align-items:center;
gap:8px;
}

.ip-login-btn{
min-width:78px;
height:38px;
padding:0 14px;
font-size:13px;
border-radius:8px;
}

.ip-mega-toggle{
width:38px;
height:38px;
font-size:20px;
border-radius:8px;
}

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

.ip-mega-menu{
display:none;
position:fixed;
top:60px;
left:0;
right:0;
bottom:0;
overflow-y:auto;
background:#FFFFFF;
padding:20px;
z-index:99999;
box-shadow:0 10px 25px rgba(0,0,0,.10);
}

.ip-mega-menu.active{
display:block;
}

.ip-mega-menu-list{
display:block;
margin:0;
padding:0;
}

.ip-mega-menu-list>li{
margin-bottom:28px;
padding-bottom:20px;
border-bottom:1px solid #F3F4F6;
}

.ip-mega-menu-list>li:last-child{
border:none;
margin-bottom:0;
}

.ip-mega-menu-list>li>a{
display:block;
margin-bottom:12px;
font-size:17px;
font-weight:700;
color:#000080;
text-decoration:none;
text-transform:uppercase;
}

.ip-mega-menu-list .sub-menu{
margin:0;
padding:0;
list-style:none;
}

.ip-mega-menu-list .sub-menu li{
margin:0;
padding:0;
}

.ip-mega-menu-list .sub-menu a{
display:block;
padding:10px 0;
font-size:15px;
font-weight:500;
color:#374151;
text-decoration:none;
border-bottom:1px solid #F9FAFB;
}

.ip-mega-menu-list .sub-menu a:hover{
color:#000080;
padding-left:8px;
}

}

/*
==================================================
ACCESSIBILITY
==================================================
*/

.ip-menu a:focus,
.ip-login-btn:focus,
.ip-mega-toggle:focus,
.ip-mega-menu a:focus{
outline:2px solid #FFBC00;
outline-offset:2px;
}

/*
==================================================
SCROLLBAR
==================================================
*/

.ip-mega-menu::-webkit-scrollbar{
width:6px;
}

.ip-mega-menu::-webkit-scrollbar-thumb{
background:#D1D5DB;
border-radius:10px;
}

.ip-mega-menu::-webkit-scrollbar-track{
background:#F8FAFC;
}
