@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#e9e9e9;
}

a{
text-decoration:none;
}

li{
list-style:none;
}

/*========================
        NAVBAR
=========================*/

.navbar{

position:fixed;
top:0;
left:0;

width:100%;
height:90px;

background:#ffffff;

display:flex;
justify-content:space-between;
align-items:center;

padding:0 70px;

box-shadow:0 3px 18px rgba(0,0,0,.08);

z-index:9999;

transition:.4s;

}

/*========================
        BRAND
=========================*/

.brand{

display:flex;
align-items:center;
gap:15px;

}

.logo1{

width:58px;
height:58px;
object-fit:cover;

}

.logo{

display:flex;
flex-direction:column;

font-size:26px;
font-weight:700;
color:#061c36;

line-height:1.1;

}

.logo span{

font-size:14px;
font-weight:500;
color:#0d5fd6;

}

/*========================
        MENU
=========================*/

.nav-links{

display:flex;
align-items:center;
gap:28px;

}

.nav-links li{

position:relative;

}

.nav-links a{

font-size:15px;
font-weight:500;

color:#061c36;

transition:.3s;

display:flex;
align-items:center;
gap:6px;

}

.nav-links a:hover{

color:#0d5fd6;

}

/* Underline Animation */

.nav-links>li>a:not(.nav-btn)::after{

content:'';

position:absolute;

left:0;
bottom:-8px;

width:0;
height:2px;

background:#0d5fd6;

transition:.35s;

}

.nav-links>li:hover>a::after{

width:100%;

}

/*========================
        BUTTON
=========================*/

.nav-btn{

background:#061c36;

color:#fff !important;

padding:13px 28px;

border-radius:40px;

font-weight:600;

transition:.35s;

}

.nav-btn:hover{

background:#0d5fd6;

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(13,95,214,.25);

}

/*========================
      DROPDOWN
=========================*/

.dropdown-menu{

position:absolute;

top:65px;
left:0;

width:320px;

background:#fff;

border-radius:12px;

box-shadow:0 20px 40px rgba(0,0,0,.12);

opacity:0;
visibility:hidden;

transform:translateY(20px);

transition:.35s;

overflow:hidden;

}

.dropdown:hover .dropdown-menu{

opacity:1;
visibility:visible;

transform:translateY(0);

}

.dropdown-menu li{

border-bottom:1px solid #f1f1f1;

}

.dropdown-menu li:last-child{

border:none;

}

.dropdown-menu a{

display:block;

padding:15px 20px;

font-size:14px;

color:#061c36;

}

.dropdown-menu a:hover{

background:#061c36;

color:#fff;

}

.dropdown i{

font-size:12px;

transition:.3s;

}

.dropdown:hover i{

transform:rotate(180deg);

}

/*========================
     MENU BUTTON
=========================*/

.menu-btn{

display:none;

font-size:30px;

color:#061c36;

cursor:pointer;

}

/*========================
      RESPONSIVE
=========================*/

@media(max-width:1150px){

.navbar{

padding:0 25px;

}

.menu-btn{

display:block;

}

.nav-links{

position:absolute;

top:90px;
left:0;

width:70%;

background:#fff;

display:none;

flex-direction:column;

align-items:flex-start;

padding:25px;

gap:5px;

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.nav-links.active{

display:flex;

}

.nav-links li{

width:80%;

}

.nav-links a{

width:100%;

padding:14px 0;

justify-content:space-between;

}

.dropdown-menu{

position:static;

opacity:1;

visibility:visible;

transform:none;

display:none;

box-shadow:none;

width:100%;

background:#f8f9fb;

margin-top:10px;

}

.dropdown.active .dropdown-menu{

display:block;

}

.nav-btn{

width:100%;

justify-content:center;

}

}

@media(max-width:600px){

.navbar{

height:75px;

padding:0 18px;

}

.logo{

font-size:19px;

}

.logo span{

font-size:12px;

}

.logo1{

width:45px;
height:45px;

}

}
