/* ======================================================
   NADINI MODERN HEADER CSS
   Bootstrap 4 Compatible
   Responsive Desktop + Tablet + Mobile
   ====================================================== */

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --bg:#ffffff;
    --soft:#f8fafc;
    --border:#e5e7eb;
    --text:#334155;
    --muted:#64748b;
    --danger:#ef4444;
    --shadow:0 8px 28px rgba(15,23,42,.08);
    --radius:18px;
}

.header1{
    position:relative;
    z-index:999;
    background:#fff;
}

.header1 .navbar{
    padding:.75rem 0;
    background:#fff;
    transition:.3s;
}

.header1 .container{
    align-items:center;
}

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

/* top menu */
.top-menu{
    border-bottom:1px solid var(--border);
}

.top-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--soft);
    color:var(--primary);
    position:relative;
    margin-left:10px;
    text-decoration:none;
    transition:.25s;
    box-shadow:0 3px 10px rgba(0,0,0,.04);
}

.top-link:hover{
    background:var(--primary);
    color:#fff!important;
    transform:translateY(-2px);
}

.top-link i{
    font-size:20px!important;
}

.badge{
    border-radius:30px;
    font-size:11px;
    min-width:18px;
}

.top-link .badge{
    position:absolute;
    top:-2px;
    right:-2px;
}

/* search */
.search-top{
    width:100%;
}

.search-top .form-header{
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    overflow:hidden;
    box-shadow:var(--shadow);
    margin:0;
}

.search-top input{
    border:none!important;
    height:52px;
    background:transparent;
    font-size:15px;
    color:var(--text);
}

.search-top input:focus{
    outline:none;
    box-shadow:none;
}

.search-top button{
    border:none;
    background:var(--primary);
    color:#fff;
    transition:.3s;
}

.search-top button:hover{
    background:var(--primary-dark);
}

/* second navbar */

#navbar-sticky{
    border-bottom:1px solid var(--border);
}

#navbar-sticky .nav-link{
    color:var(--text)!important;
    font-weight:600;
    padding:14px 18px!important;
    border-radius:12px;
    transition:.25s;
}

#navbar-sticky .nav-link:hover{
    color:var(--primary)!important;
    background:#eff6ff;
}

#navbar-sticky .active .nav-link{
    color:var(--primary)!important;
}

/* collapse */

.navbar-collapse{
    transition:.3s;
}

/* mobile collapse */

@media(max-width:991px){

.navbar-collapse{
    margin-top:15px;
    background:#fff;
    border-radius:18px;
    padding:15px;
    box-shadow:var(--shadow);
}

.navbar-collapse .nav-link{
    padding:14px 10px!important;
    border-bottom:1px solid #f3f4f6;
}

.navbar-collapse .nav-link:last-child{
    border:none;
}

}

/* nav search */

#nav-search{
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
}

/* navbar toggler */

.navbar-toggler{
    border:none!important;
    box-shadow:none!important;
}

.navbar-toggler:focus{
    outline:none;
}

/* floating bottom bar */

.bottom-bar{
    position:fixed;
    bottom:12px;
    left:12px;
    right:12px;
    background:#fff;
    border-radius:22px;
    box-shadow:0 12px 35px rgba(0,0,0,.15);
    z-index:9999;
    padding:8px 0;
}

.bottom-bar .row{
    margin:0;
}

.bottom-bar .col{
    text-align:center;
    cursor:pointer;
    color:var(--muted);
    position:relative;
    transition:.25s;
}

.bottom-bar .col:hover{
    color:var(--primary);
}

.bottom-bar i{
    display:block;
    font-size:20px;
    margin-bottom:5px;
}

.bottom-bar small{
    display:block;
    font-size:11px;
    font-weight:600;
}

.bottom-bar .badge{
    position:absolute;
    top:2px;
    right:26%;
}

/* fixed search */

#nav-search{
    padding:10px 0;
}

/* sticky animation */

.sticky-active{
    animation:slideDown .25s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

@keyframes slideDown{
    from{
        transform:translateY(-100%);
    }
    to{
        transform:translateY(0);
    }
}

/* desktop */

@media(min-width:992px){

.header1 .navbar{
    min-height:72px;
}

.search-top input{
    font-size:16px;
}

}

/* tablet */

@media(max-width:991px){

.top-menu{
    display:none!important;
}

.header1 .navbar{
    padding:.6rem 0;
}

.navbar-brand img{
    max-height:40px;
}

.search-top input{
    height:48px;
}

}

/* mobile */

@media(max-width:768px){

body{
    padding-bottom:90px;
}

.header1{
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.navbar-brand img{
    max-height:38px;
}

.bottom-bar{
    left:8px;
    right:8px;
    bottom:8px;
}

.bottom-bar i{
    font-size:18px;
}

.bottom-bar small{
    font-size:10px;
}

.search-top input{
    height:46px;
    padding-left:16px;
}

}

/* small phone */

@media(max-width:480px){

.header1 .container{
    padding-left:12px;
    padding-right:12px;
}

.top-link{
    width:42px;
    height:42px;
}

.search-top input{
    font-size:14px;
}

#navbar-sticky .nav-link{
    font-size:14px;
}

}

/* utility */

.bg-tipis{
    background:#fff!important;
}

.fs-28{
    font-size:28px;
}

.text-primary{
    color:var(--primary)!important;
}

.text-danger{
    color:var(--danger)!important;
}

.m-b-24{
    margin-bottom:24px;
}

.p-lr-8{
    padding:2px 8px;
}

.p-lr-4{
    padding:2px 6px;
}

html{
    scroll-behavior:smooth;
}
.bottom-bar{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    background:#F8FAFC;
    border:1px solid #E2E8F0;
    border-radius:22px;
    box-shadow:0 10px 35px rgba(15,23,42,.12);
    padding:8px 6px;
    z-index:9999;
}

.bottom-bar .col{
    color:#64748B;
    transition:.25s;
}

.bottom-bar .col:hover{
    color:#2563EB;
}

.bottom-bar i{
    font-size:20px;
    margin-bottom:4px;
}

.bottom-bar small{
    font-size:11px;
    font-weight:600;
}

.bottom-bar .badge{
    background:#EF4444;
    border:2px solid #F8FAFC;
}