/* =====================================================
   HEADER & NAVIGATION
===================================================== */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1050;
    background:transparent;
    transition:all .35s ease;
}

/* Sticky Header */

.site-header.sticky{
    background:rgba(15,23,42,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

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

.navbar{
    min-height:90px;
    padding:18px 0;
    transition:all .35s ease;
}

.site-header.sticky .navbar{
    min-height:75px;
    padding:12px 0;
}

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

.logo{
    height:65px;
    width:auto;
    transition:all .35s ease;
}

/* Text Logo */

.logo-text{
    font-family:var(--font-heading);
    font-size:1.75rem;
    font-weight:700;
    color:var(--primary);
    letter-spacing:.5px;
    transition:.35s;
}

/* White logo after scroll */

.site-header.sticky .logo-text{
    color:#fff;
}

/* If using SVG logo */

.site-header.sticky .logo{
    filter:brightness(0) invert(1);
}

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

.navbar-nav{
    align-items:center;
}

.nav-item{
    margin-left:12px;
}

.nav-link{

    position:relative;
    font-weight:600;
    color:#111827;
    padding:8px 0 !important;
    transition:.3s;

}

/* Underline */

.nav-link::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--secondary);
    transition:.3s;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}

.nav-link:hover{

    color:var(--primary);

}

.nav-link.active{

    color:var(--primary);

}

/* Sticky Menu */

.site-header.sticky .nav-link{

    color:#fff;

}

.site-header.sticky .nav-link:hover{

    color:var(--secondary);

}

.site-header.sticky .nav-link.active{

    color:var(--secondary);

}

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

.btn-quote{

    background:var(--secondary);
    color:#fff;
    border:none;
    padding:12px 30px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;

}

.btn-quote:hover{

    background:#d97706;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(245,158,11,.35);

}

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

.navbar-toggler{

    border:none;
    box-shadow:none;
    padding:0;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler i{

    font-size:2rem;
    color:#111827;
    transition:.3s;

}

/* White icon after scroll */

.site-header.sticky .navbar-toggler i{

    color:#fff;

}

/* =====================================================
   OFFCANVAS
===================================================== */

.offcanvas{

    width:320px;
    background:var(--primary);
    color:#fff;

}

.offcanvas-header{

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

}

.offcanvas-title{

    font-family:var(--font-heading);
    font-weight:700;
    color:#fff;

}

.offcanvas .nav-link{

    color:rgba(255,255,255,.85);
    padding:16px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.06);

}

.offcanvas .nav-link:hover{

    color:var(--secondary);

}

.offcanvas .nav-link.active{

    color:var(--secondary);

}

.offcanvas .btn-quote{

    margin-top:15px;

}

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

@media (max-width:991.98px){

    .navbar{

        min-height:80px;

    }

    .logo{

        height:42px;

    }

    .logo-text{

        font-size:1.5rem;

    }

}

@media (max-width:576px){

    .navbar{

        min-height:72px;

    }

    .logo{

        height:36px;

    }

    .logo-text{

        font-size:1.35rem;

    }

    .btn-quote{

        width:100%;

    }

}