/* ==========================================================================
   Header CSS extracted from https://balramravi.com
   Merged from: assets/css/balram.css, assets/css/responsive.css,
                assets/css/theme.min.css (curated — see note at bottom)
   assets/css/vendor.min.css contributed nothing (3rd-party plugin CSS only:
   AOS scroll animations, Fancybox — unrelated to the header).
   ========================================================================== */

/* ==========================================================================
   1. THEME.MIN.CSS — base framework behavior the header relies on
   ========================================================================== */

/* --- Base .header positioning / scroll-triggered pill effect --- */
.header {
  position: relative;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}
.header-section {
  position: relative;
  z-index: 1;
  background-color: #fff;
  display: none;
}
.header-box-shadow-on-scroll.scrolled .header-section {
  box-shadow: 0 1px 10px rgba(140,152,164,.125);
}
.header[data-hs-header-options*=fixMoment] {
  transition: .3s ease;
}
.header.js-header-fix-moment {
  position: fixed;
  top: 0;
  bottom: auto;
}
.header.js-header-fix-moment .header-hide-content {
  display: none;
}
.header.header-untransitioned {
  transition: none;
}

/* --- header-show-hide effect states (driven by balramravi-header.js) ---
   Header slides/fades in once scrollY passes data-hs-header-options.fixMoment;
   before that it's "capped" fixed-but-hidden between the header's own height
   and fixMoment. fixEffect on this header is "slide" -> header-moved-up. */
.header-invisible {
  display: none;
}
.header-moved-up {
  transform: translate3d(0, -100%, 0);
}
.header-faded {
  opacity: 0;
  visibility: hidden;
}

/* --- Base Bootstrap collapse (drives #navBar show/hide on mobile) --- */
/* .collapse:not(.show) {
  display: none;
} */

/* --- .header-abs-top: header floats over hero content --- */
.header-abs-top {
  position: absolute;
  top: 0;
  bottom: auto;
}
@media (max-width: 991.98px) {
  .header-abs-top .header-abs-top-inner {
    max-height: 75vh;
    overflow: hidden;
    overflow-y: auto;
  }
  .header-abs-top .header-abs-top-inner::-webkit-scrollbar {
    width: .5rem;
  }
  .header-abs-top .header-abs-top-inner::-webkit-scrollbar-thumb {
    background-color: rgba(189,197,209,.6);
    visibility: hidden;
  }
  .header-abs-top .header-abs-top-inner:hover::-webkit-scrollbar-thumb {
    visibility: visible;
  }
}

/* --- .header-bg-transparent: transparent until js-header-fix-moment kicks in --- */
.header-bg-transparent:not(.js-header-fix-moment) .header-section {
  background-color: transparent;
}
@media (max-width: 991.98px) {
  .header-bg-transparent .navbar-nav {
    background-color: #fff;
    padding: .875rem 1.5rem;
  }
}

/* --- Base nav-link --- */
.nav-link {
  display: block;
  padding: .5rem 1rem;
}
.nav-link:focus, .nav-link:hover {
  text-decoration: none;
}
.header .navbar-nav-item:first-child .nav-link {
  padding-left: 0;
}
.navbar-nav-item:focus .nav-link, .navbar-nav-item:hover .nav-link {
  color: #333;
}
.header .nav-link.active, .header .navbar-nav-item.active .nav-link {
  color: #377dff;
}
.header .nav-link {
  color: #677788;
}

/* --- Base navbar / navbar-nav / navbar-collapse / navbar-toggler --- */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 0;
}
.navbar-nav {
display: flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: auto;
    height: 40px;
    justify-content: center;
    line-height: 38px;
}

li.navbar-nav-item.active{
  color: #000;
  border-radius: 300px;
  background: linear-gradient(88deg, #CBAE37 0.68%, #FFFEF2 50.98%, #E2BE63 101.27%);
}
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}
.navbar-toggler {
  padding: .75rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: #f8fafd;
  border: .0625rem solid transparent;
  border-radius: .3125rem;
}
.navbar-toggler:focus, .navbar-toggler:hover {
  text-decoration: none;
}

/* --- Toggler icon swap: shows/hides the two <span> icons in the markup --- */
.navbar-toggler .navbar-toggler-default {
  display: flex;
}
.navbar-toggler .navbar-toggler-toggled {
  display: none;
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-default {
  display: none;
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-toggled {
  display: flex;
}

/* --- navbar-expand-lg: collapsed <992px, expanded >=992px --- */
@media (max-width: 991.98px) {
  .navbar-expand-lg > .container {
    padding-right: 0;
    padding-left: 0;
  }
  .navbar-expand-lg.navbar {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .navbar-expand-lg .navbar-brand, .navbar-expand-lg .navbar-brand > img {
    width: 7rem;
  }
  .navbar-expand-lg .navbar-nav {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .navbar-expand-lg .navbar-nav-last-item {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  .navbar-expand-lg .nav-link {
    display: flex;
    align-items: center;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .navbar-nav .navbar-nav-last-item {
    text-align: right;
    padding-left: 1rem;
    padding-right: 0;
  }
  .header .navbar-body, .header .navbar-nav {
    margin-left: auto;
  }
}

/* ==========================================================================
   2. BALRAM.CSS — site-specific overrides on top of the theme above
   ========================================================================== */

/* Logo & nav container get a floating "pill" look once scrolled/fixed */
.header.js-header-fix-moment #logoAndNav {
align-items: center;
    box-shadow: 0 4px 40px rgba(0, 0, 0, .16);
    display: flex;
    margin: 0 auto;
    margin-top: 12px;
    gap: 8px;
    height: 56px;
    padding: 10px 12px;
    border-radius: 32px;
    background: #fff;
}

#logoAndNav {
  max-width: max-content;
  display: none;
}

.header-box-shadow-on-scroll.scrolled .header-section {
  background: transparent;
  box-shadow: none !important;
  display: block !important;
}

/* Nav link colors (default / non-fixed state) */
.header .nav-link.active,
.header .navbar-nav-item.active .nav-link {
  color: #333;
}
.header .nav-link.active:hover {
  color: #333;
}
.header .nav-link {
  color: #333;
  font-weight: 500;
}

/* Resume/subscribe button */
.subscribe-btn {
  background: #141A1D !important;
  color: #fff;
  border: none;
  outline: none !important;
  border-radius: 30px;
}
.subscribe-btn:hover {
  background: #141A1D !important;
  color: #fff;
  border: none;
  outline: none !important;
  border-radius: 30px;
}
.resume-link:hover {
  box-shadow: 0 4px 11px rgb(20 26 29 / 35%) !important;
}

/* Nav link colors + button style once .js-header-fix-moment (scrolled/fixed) is active */
.header.js-header-fix-moment .nav-link.active,
.header.js-header-fix-moment .navbar-nav-item.active .nav-link {
  color: #333;
}
.header.js-header-fix-moment .nav-link {
  padding: 10px 12px;
  height: 40px;
  padding-left: 16px !important;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-muted);
}
.header.js-header-fix-moment .subscribe-btn {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #15224b !important;
  border: none;
}

/* Logo fill-color swap (logo-header.w wraps the two inline SVG logos) */
.logo-header.w .logo-fill {
  fill: #333;
  transform: translateX(4px);
}
.logo-fill {
  fill: #fff;
  z-index: 0;
  transition: all 0.3s;
}
.header.js-header-fix-moment .logo-header.w #logo-w1 {
  fill: #333;
  transform: translateX(5px);
}
.header.js-header-fix-moment .logo-header.w #logo-w2 {
  fill: #333;
  transform: translateX(-100px);
}
.header.js-header-fix-moment .logo-header.w #logo-p {
  fill: #333;
  transform: translateX(-148px);
}

/* ==========================================================================
   3. RESPONSIVE.CSS — mobile breakpoint overrides (320–480px)
   ========================================================================== */

@media (min-width: 320px) and (max-width: 480px) {
  .header-box-shadow-on-scroll.scrolled .header-section {
    padding: 0px 16px;
    display: none;
  }
  button.navbar-toggler.btn.btn-icon.btn-sm.rounded-circle {
    display: none;
  }
  .logo-res-view {
    padding-top: 20px !important;
    display: block;
  }
  .logo-res-svg {
    margin: 0 auto !important;
  }
}

/* ==========================================================================
   NOTE on theme.min.css curation:
   theme.min.css is a 400KB multi-purpose theme bundle. Generic classes like
   .nav-link, .btn, .collapse also power dozens of unrelated components
   (tabs, pills, sidebar nav, modals, button groups) elsewhere in the theme.
   Rules that only matched those unrelated components were excluded. Also
   excluded: header-floating, header-white-*, left/center-aligned-navbar,
   navbar-nav-wrap*, and mega-menu dropdown/hs-mega-menu item styling, since
   none of those classes or a dropdown submenu appear in the header markup
   this was extracted from.
   ========================================================================== */

@media (min-width: 220px) and (max-width: 374px) {
/* ---------- iPhone 4 header ---------- */

.header-box-shadow-on-scroll.scrolled .header-section{
      padding: 0px 8px;
}
.header.js-header-fix-moment #logoAndNav{
    margin: 0 auto;
    margin-top: 12px;
    gap: 8px;
    height: 56px;
    padding: 8px 6px;
    min-width: auto;
}
.navbar-expand-lg.navbar {
        padding-bottom: 0rem;
    }
.navbar-expand-lg .navbar-nav{
  margin-top: 0rem;
        margin-bottom: 0rem;
        padding: 0px 0px;
}
.navbar-nav {
    padding-left: 0;
    margin-bottom: 0;
    width: auto;
    gap: 4px;
    height: 40px;
    line-height: 38px;
}
.header.js-header-fix-moment .nav-link{
  font-size: 14px;
  padding: 0px 8px;
    height: 40px;
    padding-left: 8px !important;
}
.logo-res-view{
  padding-top: 0px !important;
}
.profile-group{
      gap: 8px;
}
}

@media (min-width: 375px) and (max-width: 420px) {
  .header-box-shadow-on-scroll.scrolled .header-section{
      padding: 0px 8px;
}
.header.js-header-fix-moment #logoAndNav{
    margin: 0 auto;
    margin-top: 12px;
    gap: 8px;
    height: 56px;
    padding: 8px 6px;
    min-width: auto;
}
.navbar-expand-lg.navbar {
        padding-bottom: 0rem;
    }
.navbar-expand-lg .navbar-nav{
  margin-top: 0rem;
        margin-bottom: 0rem;
        padding: 0px 0px;
}
.navbar-nav {
    padding-left: 0;
    margin-bottom: 0;
    width: auto;
    gap: 6px;
    height: 40px;
    line-height: 38px;
}
.header.js-header-fix-moment .nav-link{
  font-size: 15px;
  padding: 0px 12px;
    height: 40px;
    padding-left: 12px !important;
}
.logo-res-view{
  padding-top: 0px !important;
}
 }

 @media (min-width: 421px) and (max-width: 520px) {

 .header-box-shadow-on-scroll.scrolled .header-section{
      padding: 0px 8px;
}
.header.js-header-fix-moment #logoAndNav{
    margin: 0 auto;
    margin-top: 12px;
    gap: 8px;
    height: 56px;
    padding: 8px 8px;
    min-width: auto;
}
.navbar-expand-lg.navbar {
        padding-bottom: 0rem;
    }
.navbar-expand-lg .navbar-nav{
  margin-top: 0rem;
        margin-bottom: 0rem;
        padding: 0px 0px;
}
.navbar-nav {
    padding-left: 0;
    margin-bottom: 0;
    width: auto;
    gap: 6px;
    height: 40px;
    line-height: 38px;
}
.header.js-header-fix-moment .nav-link{
font-size: 16px;
        padding: 0px 14px;
        height: 40px;
        padding-left: 14px !important;
}
.logo-res-view{
  padding-top: 0px !important;
}
}

@media (min-width: 521px) and (max-width: 1295px) {
.header-box-shadow-on-scroll.scrolled .header-section{
      padding: 0px 8px;
}
.header.js-header-fix-moment #logoAndNav{
          margin: 0 auto;
        margin-top: 12px;
        gap: 8px;
        height: 56px;
        padding: 12px 12px;
        min-width: auto;
}
.navbar-expand-lg.navbar {
        padding-bottom: 0rem;
    }
.navbar-expand-lg .navbar-nav{
  margin-top: 0rem;
        margin-bottom: 0rem;
        padding: 0px 0px;
}
.navbar-nav {
    padding-left: 0;
    margin-bottom: 0;
    width: auto;
    gap: 8px;
    height: 40px;
    line-height: 38px;
}
.header.js-header-fix-moment .nav-link{
        font-size: 17px;
        padding: 0px 16px;
        height: 40px;
        padding-left: 16px !important;
}
.logo-res-view{
  padding-top: 0px !important;
}
}