/* Start custom CSS for html, class: .elementor-element-fbc1054 *//* =========================
HEADER
========================= */
.main-header{
position:relative;
z-index:9999;
font-family:'Poppins',sans-serif;
}
/* =========================
TOP BAR
========================= */
.top-bar{
background:#082b57;
color:#fff;
padding:10px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}
.top-left{
display:flex;
gap:25px;
}
.top-left a{
color:#fff;
text-decoration:none;
font-size:14px;
}
.top-left i{
color:#ffc107;
margin-right:8px;
}
.top-right{
display:flex;
gap:10px;
}
.top-right a{
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.1);
color:#fff;
transition:.3s;
}
.top-right a:hover{
background:#ffc107;
color:#082b57;
}
/* =========================
NAVBAR
========================= */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;
background:#fff;
transition:.4s ease;
box-shadow:
0 8px 25px rgba(0,0,0,.04);
}
/* STICKY */
.navbar.sticky{
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
animation:slideDown .4s ease;
box-shadow:
0 10px 30px rgba(0,0,0,.08);
}
@keyframes slideDown{
from{
transform:translateY(-100%);
}
to{
transform:translateY(0);
}
}
/* =========================
LOGO
========================= */
.logo img{
height:70px;
width:auto;
}
/* =========================
MENU
========================= */
.nav-links{
display:flex;
align-items:center;
gap:35px;
list-style:none;
margin:0;
padding:0;
}
.nav-links li a{
text-decoration:none;
color:#082b57;
font-size:16px;
font-weight:600;
position:relative;
transition:.3s;
}
.nav-links li a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:#ffc107;
transition:.3s;
}
.nav-links li a:hover::after{
width:100%;
}
.nav-links li a:hover{
color:#0b63ce;
}
/* =========================
BUTTON
========================= */
.nav-btn{
text-decoration:none;
padding:14px 28px;
border-radius:50px;
background:
linear-gradient(
135deg,
#082b57,
#0b63ce
);
color:#fff;
font-weight:600;
transition:.3s;
}
.nav-btn:hover{
transform:translateY(-3px);
}
/* =========================
MOBILE BUTTON
========================= */
.menu-btn{
display:none;
font-size:26px;
color:#082b57;
cursor:pointer;
}
/* =========================
TABLET
========================= */
@media(max-width:1024px){
.navbar{
padding:18px 25px;
}
.nav-links{
gap:20px;
}
}
/* =========================
MOBILE
========================= */
@media(max-width:991px){
.menu-btn{
display:block;
}
.nav-btn{
display:none;
}
.nav-links{
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
flex-direction:column;
align-items:flex-start;
padding:25px;
display:none;
box-shadow:
0 15px 40px rgba(0,0,0,.08);
}
.nav-links.active{
display:flex;
}
}
@media(max-width:768px){
.top-bar{
flex-direction:column;
gap:12px;
text-align:center;
padding:12px;
}
.top-left{
flex-direction:column;
gap:8px;
}
.navbar{
padding:15px;
}
.logo img{
height:55px;
}
}
@media(max-width:480px){
.logo img{
height:45px;
}
.top-left a{
font-size:13px;
}
}
/* ACTIVE MENU */
.nav-links li a.active{
color:#0b63ce;
font-weight:700;
}
.nav-links li a.active::after{
width:100%;
height:3px;
background:#ffc107;
}/* End custom CSS */