/* ======================================================
Project : Sridevi Enterprises
File    : navbar.css
====================================================== */

/* ===========================================
   Navbar
=========================================== */

.navbar {

    padding: 14px 0;

    background: #FFFFFF;

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

    border-bottom: 3px solid #1E4FA3;

}

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

.navbar-logo {

    width: 65px;

    height: 65px;

}

/* ===========================================
   Brand
=========================================== */

.brand-title {

    font-family: 'Poppins', sans-serif;

    font-size: 1.2rem;

    font-weight: 600;

    color: #1E4FA3;

}

.brand-tagline {

    font-family: 'Inter', sans-serif;

    color: #666;

    font-size: .75rem;

}

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

.nav-link {

    position: relative;

    transition: .25s;

}

.nav-link:hover {

    color: #1E4FA3 !important;

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background: #1E4FA3;

    transition: .25s;

}

.nav-link:hover::after {

    width: 100%;

}

/* ===========================================
   Search

   Reuses the Products page's .search-bar component
   (products.css) for icon placement, input height,
   padding, radius, and focus state — only the
   navbar-specific container width is set here.
=========================================== */

.navbar-search-bar {

    width: 320px;

}

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

@media(max-width:991px) {

    .navbar-search-bar {

        width: 100%;

        margin-top: 15px;

    }

    .navbar-nav {

        margin-top: 15px;

    }

}

/* Very narrow phones only (320px): Bootstrap's .navbar-brand sets
   white-space:nowrap, which the logo wordmark/tagline inherit. At the
   narrowest supported width the unwrapped tagline is a few pixels
   wider than the viewport, causing sitewide horizontal scroll. Letting
   just the tagline wrap (and the text column shrink) fixes it without
   changing anything at 360px and up. */
@media(max-width:350px) {

    .navbar-brand > div {

        min-width: 0;

    }

    .brand-tagline {

        white-space: normal;

    }

}

/* ===========================================
   Active Navigation Link
=========================================== */

.nav-link.active {

    color: #1E4FA3 !important;

    font-weight: 600;

}

.nav-link.active::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 100%;

    height: 2px;

    background: #1E4FA3;

}