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

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    overflow-x:hidden;
}

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

.main-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    background:#081C3A;
    z-index:9999;
    transition:.35s;
    border-bottom:1px solid rgba(212,175,55,.20);
}

.main-header.scrolled{
    background:#06152C;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/*==============================
NAVBAR
==============================*/

.navbar{
    padding:15px 0;
}

.navbar-brand img{
    height:65px;
    transition:.3s;
}

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

.navbar-nav{
    gap:8px;
}

.nav-link{
    color:#fff !important;
    font-size:15px;
    font-weight:600;
    padding:30px 16px !important;
    transition:.3s;
    position:relative;
}

.nav-link:hover,
.nav-link.active{
    color:#D4AF37 !important;
}

.nav-link::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:18px;
    width:0;
    height:2px;
    background:#D4AF37;
    transform:translateX(-50%);
    transition:.35s;
}

.nav-link:hover::after{
    width:70%;
}

/*==============================
DROPDOWN
==============================*/

.dropdown-menu{
    border:none;
    border-radius:12px;
    background:#102A52;
    padding:10px 0;
    margin-top:0;
    min-width:260px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.dropdown-item{
    color:#fff;
    font-size:15px;
    padding:12px 22px;
    transition:.3s;
}

.dropdown-item:hover{
    background:#D4AF37;
    color:#081C3A;
    padding-left:30px;
}

/* Desktop Hover */

@media(min-width:992px){

.dropdown:hover>.dropdown-menu{
    display:block;
}

}

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

.appointment-btn{

display:inline-flex;
align-items:center;
gap:10px;
padding:14px 26px;
background:#D4AF37;
color:#081C3A;
font-weight:700;
text-decoration:none;
border-radius:50px;
transition:.35s;

}

.appointment-btn:hover{

background:#fff;
color:#081C3A;

}

/*==============================
TOGGLER
==============================*/

.navbar-toggler{

border:none;
box-shadow:none;

}

.navbar-toggler:focus{

box-shadow:none;

}

.navbar-toggler-icon{

background:none;

}

.navbar-toggler i{

color:#D4AF37;
font-size:30px;

}

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

@media(max-width:991px){

.navbar{

padding:12px 0;

}

.navbar-brand img{

height:55px;

}

.navbar-collapse{

margin-top:15px;
background:#081C3A;
padding:15px;
border-radius:12px;

}

.navbar-nav{

gap:0;

}

.nav-link{

padding:14px 0 !important;
border-bottom:1px solid rgba(255,255,255,.08);

}

.nav-link::after{

display:none;

}

.dropdown-menu{

position:static;
display:none;
background:#102A52;
box-shadow:none;
border-radius:8px;
margin:8px 0;

}

.dropdown-menu.show{

display:block;

}

.dropdown-item{

padding:12px 18px;

}

.header-right{

margin-top:20px;

}

.appointment-btn{

width:100%;
justify-content:center;

}

}

/*==============================
LARGE SCREEN
==============================*/

@media(min-width:1200px){

.container{

max-width:1320px;

}

}