/* Start custom CSS for html, class: .elementor-element-860037b *//*=========================================
HAVIONEDGE HEADER
CSS PART 1
=========================================*/


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');



:root{

--he-blue:#1565D8;

--he-dark:#0B1F4D;

--he-text:#475569;

--he-border:#DCE7F8;

}



/* RESET */


.he-header *,
.he-mobile-menu *,
#heSearchModal *{

box-sizing:border-box;

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

}





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


.he-header{

width:100vw;

margin-left:calc(50% - 50vw);

position:sticky;

top:0;

z-index:9999;


/* PREMIUM BACKGROUND */

background:linear-gradient(
135deg,
#ffffff 0%,
#f5f9ff 55%,
#eaf3ff 100%
);


border-bottom:1px solid #d9e7ff;


}



.he-container{

height:72px;

width:100%;

padding:0 28px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}




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


.he-logo{

display:flex;

align-items:center;

gap:8px;

flex-shrink:0;

}



.he-logo-icon{

font-size:30px;

line-height:1;

display:flex;

align-items:center;

}



.he-logo-text{

font-size:29px;

font-weight:700;

letter-spacing:-.5px;

color:var(--he-dark);

white-space:nowrap;

}





/*=========================================
DESKTOP NAV
=========================================*/


.he-nav{

flex:1;

display:flex;

justify-content:center;

align-items:center;

gap:22px;

}



.he-nav a{

font-size:14px;

font-weight:500;

color:#334155;

white-space:nowrap;

position:relative;

transition:.3s;

}



.he-nav a:hover{

color:var(--he-blue);

}



.he-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--he-blue);

transition:.3s;

}



.he-nav a:hover::after{

width:100%;

}




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


.he-right{

display:flex;

align-items:center;

gap:10px;

margin-right:10px;

}




.he-search-btn{

height:40px;

padding:0 17px;

border:none;

border-radius:12px;

background:linear-gradient(
135deg,
#1565D8,
#2D8CFF
);


color:#fff;

display:flex;

align-items:center;

justify-content:center;

gap:7px;

font-size:14px;

font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:0 8px 20px rgba(21,101,216,.18);

}



.he-search-btn:hover{

transform:translateY(-2px);

box-shadow:0 15px 30px rgba(21,101,216,.25);

}



.he-search-btn svg{

width:18px;

height:18px;

stroke:#fff;

fill:none;

stroke-width:2;

}



.he-mobile-btn{

display:none;

width:40px;

height:40px;

border:none;

border-radius:12px;

background:#1565D8;

color:#fff;

font-size:18px;

align-items:center;

justify-content:center;

cursor:pointer;

}
/*=========================================
HAVIONEDGE HEADER
CSS PART 2
=========================================*/


/*=========================================
MOBILE FLYOUT BASE
=========================================*/


.he-mobile-menu{

position:fixed;

top:0;

left:-330px;

width:310px;

height:100vh;

background:#fff;

z-index:10001;

transition:.35s ease;

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

overflow-y:auto;

}



.he-mobile-menu.active{

left:0;

}




.he-overlay{

position:fixed;

inset:0;

background:rgba(15,23,42,.45);

z-index:10000;

opacity:0;

visibility:hidden;

transition:.3s;

}



.he-overlay.active{

opacity:1;

visibility:visible;

}





/* MOBILE TOP */


.he-mobile-top{

height:70px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 20px;

border-bottom:1px solid #E8EDF5;

}



.he-mobile-logo{

font-size:22px;

font-weight:700;

color:#0B1F4D;

}



#heMenuClose,
#heSearchClose{

display:flex;

align-items:center;

justify-content:center;

border:none;

cursor:pointer;

}




#heMenuClose{

width:38px;

height:38px;

border-radius:50%;

background:#F1F5FF;

color:#1565D8;

font-size:26px;

}



#heMenuClose:hover{

background:#1565D8;

color:#fff;

}





/* MOBILE LINKS */


.he-mobile-menu nav{

display:flex;

flex-direction:column;

padding:20px;

gap:6px;

}



.he-mobile-menu nav a{

padding:13px 14px;

border-radius:12px;

font-size:15px;

font-weight:500;

color:#334155;

transition:.3s;

}



.he-mobile-menu nav a:hover{

background:#EEF5FF;

color:#1565D8;

}







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


#heSearchModal{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

background:rgba(10,20,40,.55);

backdrop-filter:blur(10px);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:100000;

}



#heSearchModal.active{

opacity:1;

visibility:visible;

}





.he-search-window{

width:100%;

max-width:720px;

max-height:90vh;

overflow-y:auto;

background:#fff;

border-radius:24px;

padding:35px;

position:relative;

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

}





/* SEARCH CLOSE */


#heSearchClose{

position:absolute;

right:18px;

top:18px;

width:42px;

height:42px;

border-radius:50%;

background:#F1F5FF;

color:#1565D8;

font-size:28px;

font-weight:500;

line-height:1;

}



#heSearchClose:hover{

background:#1565D8;

color:#fff;

transform:rotate(90deg);

}





/* SEARCH HEADING */


.he-search-heading h2{

font-size:30px;

font-weight:700;

color:#0B1F4D;

margin-bottom:8px;

}



.he-search-heading p{

font-size:14px;

color:#64748B;

margin-bottom:25px;

}






/* INPUT */


.he-search-input{

height:58px;

display:flex;

align-items:center;

gap:12px;

border:2px solid #E5EDF9;

border-radius:16px;

padding:0 18px;

margin-bottom:25px;

transition:.3s;

}



.he-search-input:focus-within{

border-color:#1565D8;

box-shadow:0 0 0 5px rgba(21,101,216,.08);

}



.he-search-input svg{

width:20px;

height:20px;

stroke:#1565D8;

fill:none;

stroke-width:2;

}



.he-search-input input{

width:100%;

height:100%;

border:none;

outline:none;

font-size:15px;

}





/* TOOLS */


.he-search-tools{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

}



.he-search-tools a{

padding:16px;

border:1px solid #E5EDF9;

border-radius:14px;

font-size:14px;

font-weight:500;

color:#334155;

background:#fff;

transition:.3s;

}



.he-search-tools a:hover{

border-color:#1565D8;

color:#1565D8;

transform:translateY(-3px);

}





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


@media(max-width:1100px){


.he-container{

padding:0 22px;

}


.he-nav{

gap:15px;

}


.he-nav a{

font-size:13px;

}


.he-logo-text{

font-size:27px;

}


}




@media(max-width:991px){


.he-container{

height:68px;

padding:0 16px;

}


.he-nav{

display:none;

}



.he-logo-icon{

font-size:27px;

}



.he-logo-text{

font-size:27px;

}



.he-right{

margin-left:auto;

gap:8px;

}



.he-search-btn{

width:40px;

height:40px;

padding:0;

}



.he-search-btn span{

display:none;

}



.he-mobile-btn{

display:flex;

}


}





@media(max-width:600px){


.he-container{

height:66px;

padding:0 12px;

}



.he-logo-icon{

font-size:25px;

}



.he-logo-text{

font-size:24px;

}



.he-search-tools{

grid-template-columns:1fr;

}



.he-search-window{

padding:25px;

}



}/* End custom CSS */