/*==================================================
 MJ Trading Lanka International (Pvt) Ltd.
 File : header.css
 Version : 1.0
==================================================*/

/* ==========================
   TOP BAR
========================== */

.top-bar{
    background:var(--primary);
    color:var(--white);
    font-size:.9rem;
    padding:8px 0;
}

.top-bar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.top-left,
.top-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.top-left a,
.top-right a{
    color:var(--white);
    transition:var(--transition);
}

.top-left a:hover,
.top-right a:hover{
    color:var(--gold);
}

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

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    transition:var(--transition);
}

/* Sticky Header */

.header.sticky{
    background:rgba(7,27,47,.95);
    backdrop-filter:blur(15px);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

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

.navbar{
    padding:18px 0;
    transition:var(--transition);
}

.header.sticky .navbar{
    padding:12px 0;
}

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

.navbar-brand{
    display:flex;
    align-items:center;
    gap:15px;
}

.navbar-brand img{
    width:70px;
    height:auto;
}

.logo-text h3{
    margin:0;
    color:var(--white);
    font-size:1.25rem;
    font-weight:700;
}

.logo-text span{
    color:var(--gold);
    font-size:.82rem;
    display:block;
}

/* ==========================
   NAVIGATION
========================== */

.navbar-nav{
    align-items:center;
    gap:10px;
}

.nav-link{
    position:relative;
    color:var(--white)!important;
    font-weight:600;
    padding:12px 16px!important;
    transition:var(--transition);
}

.nav-link:hover{
    color:var(--gold)!important;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.35s ease;
    transform:translateX(-50%);
}

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

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

.dropdown-menu{
    border:none;
    border-radius:12px;
    box-shadow:0 10px 35px rgba(0,0,0,.15);
    padding:10px;
    margin-top:15px;
}

.dropdown-item{
    padding:10px 18px;
    border-radius:8px;
    transition:var(--transition);
}

.dropdown-item:hover{
    background:var(--primary);
    color:var(--white);
}

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

.btn-gold{
    background:var(--gold);
    color:var(--primary);
    border-radius:50px;
    padding:12px 28px;
    font-weight:700;
    transition:var(--transition);
}

.btn-gold:hover{
    background:var(--yellow);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}

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

.navbar-toggler{
    border:none;
    color:var(--white);
    font-size:1.5rem;
}

.navbar-toggler:focus{
    box-shadow:none;
}

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

@media(max-width:991px){

    .top-bar{
        display:none;
    }

    .navbar-collapse{
        background:var(--primary);
        margin-top:15px;
        padding:20px;
        border-radius:15px;
    }

    .navbar-nav{
        align-items:flex-start;
    }

    .btn-gold{
        margin-top:20px;
        width:100%;
        text-align:center;
    }

    .logo-text h3{
        font-size:1rem;
    }

    .logo-text span{
        font-size:.75rem;
    }

}

/*==========================================
FINAL HEADER COLOUR / CONTRAST FIX
==========================================*/

.top-bar {
    background: #04111F !important;
    color: #FFFFFF !important;
}

.top-bar a {
    color: #FFFFFF !important;
}

.top-bar a:hover {
    color: #F0C75E !important;
}

.header .navbar {
    background: rgba(7, 27, 47, 0.96);
}

.header.sticky .navbar {
    background: rgba(4, 17, 31, 0.98);
}

.header .logo-text h3 {
    color: #FFFFFF !important;
}

.header .logo-text span {
    color: #F0C75E !important;
}

.header .nav-link {
    color: #FFFFFF !important;
}

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

.header .navbar-toggler {
    color: #FFFFFF !important;
}

.header .dropdown-menu {
    background: #FFFFFF;
}

.header .dropdown-item {
    color: #071B2F !important;
}

.header .dropdown-item:hover,
.header .dropdown-item:focus {
    background: #071B2F !important;
    color: #FFFFFF !important;
}

@media (max-width: 991px) {
    .header .navbar-collapse {
        background: #071B2F !important;
    }
}


/*==================================================
FINAL HEADER CONTRAST
==================================================*/
.top-bar{background:#04111F!important;color:#fff!important;}
.top-bar a{color:#fff!important;}
.top-bar a:hover{color:#F0C75E!important;}
.header .navbar{background:rgba(7,27,47,.97);}
.header.sticky .navbar{background:rgba(4,17,31,.99);}
.header .logo-text h3{color:#fff!important;}
.header .logo-text span{color:#F0C75E!important;}
.header .nav-link{color:#fff!important;}
.header .nav-link:hover,.header .nav-link.active{color:#F0C75E!important;}
.header .navbar-toggler{color:#fff!important;}
.header .dropdown-menu{background:#fff;}
.header .dropdown-item{color:#071B2F!important;}
.header .dropdown-item:hover,.header .dropdown-item:focus{background:#071B2F!important;color:#fff!important;}
@media(max-width:991px){.header .navbar-collapse{background:#071B2F!important;}}