:root{

--im-container:1400px;

--im-text:#28304A;
--im-muted:#667085;

--im-border:#EAEAEA;

--im-bg:#F8F3F3;
--im-accent:#F7E8E8;

}

/* =========================
CONTAINER
========================= */

.im-container{

width:min(
	var(--im-container),
	92%
);

margin:auto;

}

/* =========================
TOPBAR
========================= */

.im-topbar{

background:var(--im-bg);

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

}

.im-topbar .im-container{

height:42px;

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

}

.im-topbar-left{

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

color:var(--im-text);

}

.im-topbar-right{

display:flex;
align-items:center;

gap:14px;

}

.im-topbar-right p{

margin:0;

}

.im-topbar-right a{

color:var(--im-text);

text-decoration:none;

font-size:15px;

transition:.3s;

}

.im-topbar-right a:hover{

opacity:.7;

}

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

.im-header{

position:sticky;

top:0;

z-index:999;

background:#fff;

transition:.3s ease;

box-shadow:
0 4px 20px rgba(
0,
0,
0,
.04
);

}

.im-navbar .im-container{

height:95px;

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

gap:40px;

}

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

.im-logo{

flex-shrink:0;

}

.im-logo .custom-logo-link{

display:block;

}

.im-logo img,
.im-logo .custom-logo{

height:75px;

width:auto;

display:block;

}

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

.im-menu{

flex:1;

display:flex;
justify-content:center;

}

.im-menu ul{

display:flex;

align-items:center;

gap:40px;

margin:0;
padding:0;

list-style:none;

}

.im-menu li{

position:relative;

}

.im-menu a{

position:relative;

display:inline-block;

padding:6px 0;

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

line-height:1.4;

white-space:nowrap;

text-decoration:none;

color:var(--im-text);

transition:.3s;

}

/* underline */

.im-menu a::after{

content:'';

position:absolute;

left:0;
bottom:-8px;

width:100%;
height:2px;

background:var(--im-text);

transform:scaleX(0);

transform-origin:left;

transition:.3s;

}

.im-menu a:hover::after{

transform:scaleX(1);

}

.im-menu .current-menu-item > a::after,
.im-menu .current-menu-parent > a::after,
.im-menu .current-menu-ancestor > a::after{

transform:scaleX(1);

}

/* =========================
SEARCH
========================= */

.im-search-toggle{

width:46px;
height:46px;

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

border:none;

border-radius:50%;

background:transparent;

cursor:pointer;

font-size:20px;

color:var(--im-text);

transition:.3s;

}

.im-search-toggle:hover{

background:var(--im-bg);

}

/* =========================
SEARCH MODE
========================= */

.im-search-mode{

display:none;

padding:20px 0;

background:#fff;

animation:
imFadeDown .25s ease;

}

.im-search-form{

max-width:900px;

margin:auto;

display:flex;
align-items:center;

gap:15px;

padding:18px 24px;

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

border-radius:999px;

background:#fff;

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

animation:
imSearchUp .25s ease forwards;

}

.im-search-form input{

flex:1;

border:none;
outline:none;

background:none;

font-size:16px;

}

.im-search-form button{

border:none;
background:none;

cursor:pointer;

font-size:18px;

color:var(--im-muted);

}

.im-header.search-active .im-navbar{

display:none;

}

.im-header.search-active .im-search-mode{

display:block;

}

@keyframes imFadeDown{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes imSearchUp{

from{

opacity:0;
transform:translateY(-10px);

}

to{

opacity:1;
transform:translateY(0);

}

}

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

.im-mobile-toggle{

display:none;

width:44px;
height:44px;

border:none;
background:none;

cursor:pointer;

font-size:20px;

color:var(--im-text);

}

/* =========================
DRAWER
========================= */

.im-mobile-drawer{

position:fixed;

top:0;
left:-100%;

width:320px;
max-width:85vw;

height:100vh;

background:#fff;

z-index:9999;

overflow-y:auto;

transition:left .3s ease;

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

}

.im-mobile-drawer.active{

left:0;

}

.im-mobile-drawer-header{

display:flex;

align-items:center;
justify-content:space-between;

padding:20px;

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

}

.im-mobile-nav{

padding:20px;

}

.im-mobile-nav ul{

list-style:none;

margin:0;
padding:0;

}

.im-mobile-nav li{

margin:0;

}

.im-mobile-nav a{

display:block;

padding:14px 0;

text-decoration:none;

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

color:var(--im-text);

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

}

.im-mobile-social{

padding:20px;

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

}

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

.im-mobile-overlay{

position:fixed;

inset:0;

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

opacity:0;
visibility:hidden;

transition:.3s;

z-index:9998;

}

.im-mobile-overlay.active{

opacity:1;
visibility:visible;

}

/* =========================
SCROLLED
========================= */

.im-header.scrolled{

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

}

.im-header.scrolled
.im-navbar .im-container{

height:80px;

}

.im-header.scrolled
.im-logo img{

height:65px;

}

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

@media(max-width:991px){
	
.im-search-mode{

        padding:15px;

    }

    .im-search-form{

        max-width:100%;

        padding:12px 16px;

        border-radius:16px;

        gap:10px;

    }

    .im-search-form input{

        font-size:16px;

        min-width:0;

    }

    .im-search-form button{

        flex-shrink:0;

    }

.im-topbar{

display:none;

}

.im-navbar .im-container{

display:grid;

grid-template-columns:
44px
1fr
44px;

align-items:center;

height:72px;

gap:15px;

}

.im-mobile-toggle{

display:flex;

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

}

.im-menu{

display:none;

}

.im-logo{

display:flex;
justify-content:center;

}

.im-logo img,
.im-logo .custom-logo{

height:55px;

}

.im-search-toggle{

margin-left:auto;

}

}

@media(max-width:480px){

.im-logo img,
.im-logo .custom-logo{

height:50px;

}

.im-mobile-drawer{

width:280px;

}

}