@charset "utf-8";
/* CSS Document */

/* =========================================
   Modern Header
========================================= */

#site-header{
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all .35s ease;
    box-shadow: 0 2px 15px rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
}

#site-header.nav-fixed{
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/* =========================================
   Logo
========================================= */

.logo{
    height:64px;
    transition:.3s;
}

#site-header.nav-fixed .logo{
    height:55px;
}

/* =========================================
   Navigation
========================================= */

.navbar-nav .nav-link{
    position:relative;
    padding:12px 18px;
    margin:0 3px;
    font-size:16px;
    font-weight:600;
    border-radius:10px;
    transition:.3s;
}

.navbar-nav .nav-link:hover{
    color:#c59d0b;
    background:rgba(212,175,55,.08);
}

.navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:6px;
    height:2px;
    background:#d4af37;
    transform:scaleX(0);
    transition:.3s;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{
    transform:scaleX(1);
}

/* =========================================
   Buttons
========================================= */

.btn-style{

    border-radius:50px;

    padding:12px 26px;

    font-weight:600;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.btn-style:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(0,0,0,.15);

}

/* =========================================
   Dropdown
========================================= */

.dropdown-menu{

    border:none;

    border-radius:18px;

    padding:10px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.dropdown-item{

    padding:12px 18px;

    border-radius:10px;

    transition:.3s;

}

.dropdown-item:hover{

    background:#f5f5f5;

    color:#c59d0b;

}

/* =========================================
   Theme Switch
========================================= */

.theme-switch-wrapper{

    margin-right:15px;

}

.mode-container{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    color:#222;

    border:1px solid rgba(0,0,0,.08);

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    transition:.35s;

}

.mode-container:hover{

    transform:rotate(180deg);

    background:#f5f5f5;

}

/* =========================================
   Dark Theme
========================================= */

[data-theme="dark"] #site-header{

    background:rgba(25,25,25,.95);

    border-bottom:1px solid rgba(255,255,255,.08);

}

[data-theme="dark"] .navbar-nav .nav-link{

    color:#f3f3f3;

}

[data-theme="dark"] .navbar-nav .nav-link:hover{

    background:rgba(212,175,55,.12);

    color:#FFD54A;

}

[data-theme="dark"] .dropdown-menu{

    background:#222;

}

[data-theme="dark"] .dropdown-item{

    color:#eee;

}

[data-theme="dark"] .dropdown-item:hover{

    background:#333;

}

[data-theme="dark"] .mode-container{

    background:#1f1f1f;

    color:#FFD54A;

    border:1px solid #444;

    box-shadow:0 4px 15px rgba(0,0,0,.35);

}

[data-theme="dark"] .mode-container:hover{

    background:#2b2b2b;

}

/* =========================================
   Mobile
========================================= */

@media (max-width:991px){

    .logo{

        height:55px;

    }

    .navbar-toggler{

        width:46px;

        height:46px;

        border:none;

        border-radius:12px;

        background:#f6f6f6;

    }

    .navbar-collapse{

        margin-top:15px;

        padding:20px;

        border-radius:20px;

        background:#fff;

        box-shadow:0 20px 40px rgba(0,0,0,.08);

    }

    .navbar-nav .nav-link{

        padding:14px;

        margin-bottom:8px;

    }

    [data-theme="dark"] .navbar-collapse{

        background:#202020;

    }

}

/* =========================================
   Smooth Animation
========================================= */

.navbar-nav .nav-link,
.btn-style,
.dropdown-item,
.mode-container{

    transition:all .3s ease;

}