/* ============================================================================= 
General
============================================================================= */

html {
  overflow-x: hidden !important;
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 27px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 16px;
  line-height: 2.5em;
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  h1 { font-size: 22px; }
  h2 { font-size: 20px; }
  /* h3's mobile size isn't set here -- a later, unconditional h3 rule
     further down this file (search "display: inline-block" near the
     block-title section) has equal selector specificity and would
     silently win over this one at every screen size anyway. Its real
     mobile override lives right after that rule instead, where it can
     actually take effect. See there for h4/h5 too, added at the same
     time to keep the full H1-H6 mobile ladder in proper descending
     order (22/20/19/18/17/16px, all above the 15px paragraph size). */
  p, li, span, div {
    font-size: 15px;
  }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 17px; 
    }
}

@media screen and (max-width: 600px) {
    html {
        font-size: 18px; 
    }
}

body{
	padding-top: 70px; /* adjust this to match your actual header height */
    font-size: 16px;
}

#loading > div:nth-child(3) > div > img{
  vertical-align: middle !important;
}

/* .totalexp/.total-clients (auto-incrementing counters, 9 spots across
   index/about/experience/services/footer) have no font-size of their
   own, so on narrow screens the "General" mobile rule just above
   (p, li, span, div{font-size:15px}) was forcibly shrinking them to a
   flat 15px even inside large headings -- e.g. index.php's "With 41+
   years of hands-on..." h2 rendered "41+ years" noticeably smaller
   than the rest of the sentence. inherit instead of a fixed size since
   these spans sit inside many different contexts (h2/h3/p). */
.totalexp,
.total-clients {
  font-size: inherit;
}

.site-main-menu a.active {
  color: #0a1119;
  opacity: 1;
  border-bottom: 2px solid #007ced;
}

.site-nav {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.lmpixels-scroll-to-top {
  bottom: 20px !important;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  color: #0a1119;
}

.menu-toggle {
  color: #007ced !important;
  cursor: pointer;
}

.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 0.5s ease-out;
    color: #0a1119;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.3s;
}
.cookiealert a {
    text-decoration: underline;
}
.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
    box-shadow: none;
}

.site-footer {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  background-color: #2f4c73 !important;
  border-top: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
  padding: 0;
}

.footer-heading,
.footer-text p,
.footer-address p,
.footer-work-hours p {
  color: #fff;
}

.footer-list a {
  color: #fff;
}

.footer-list a:hover {
  color: #007ced;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 11px;
  margin-right: 8px;
  transition: background-color 0.3s ease;
}

.footer-list a:hover .footer-social-icon {
  background-color: #007ced;
}

.footer-bottom-bar {
  background-color: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
}

@media only screen and (min-width: 992px) {
  .the-footer {
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 70px;
    padding-right: 70px;
  }
}

.footer-bottom-bar p {
  color: #6c757d;
}

@media only screen and (max-width: 991px) {
  .page-container {
    padding: 40px 70px 60px;
  }
}

.page-with-title #page_container{
  padding-top: 0px !important;
}

.page-home #page_container{
  padding-top: 0px !important;
}

@media only screen and (min-width: 991px) {
  .non-resume-page .home-buttons{
    margin-top: 15%;
}
}

.page-title{
  border-top: 0;
  border-bottom: 2px solid #1e1e1e;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* Makes this the stacking context */
}

@media only screen and (max-width: 991px) {
.page-title {
    margin-right: -70px;
    margin-left: -70px;
    text-align: center;
  }
}

/* Owner-requested: taller top banner on the 4 inner pages that use
   .page-title (about/experience/services/contact -- homepage has no
   .page-title banner at all, so it's naturally excluded). Scoped to
   min-width:992px specifically to mirror main.css's own
   max-width:991px breakpoint for this same selector (main.css:5170,
   padding:30px 40px there) -- without the media guard, this being in
   custom.css (which loads after main.css) would win at every width,
   including mobile, and silently override that existing, separately-
   tuned mobile padding. This way mobile is untouched. */
@media only screen and (min-width: 992px) {
  .page-title {
    padding: 95px 70px;
  }
}

.page-title .page-subtitle{
	top: 35%;
}


/********************** General AKS **********************/
.btn-primary, .btn-secondary, button, input[type="button"], input[type="submit"], .wp-block-button .wp-block-button__link {
  	border-radius: 5px;
}

.btn-primary, .btn-secondary, button, input[type="button"], input[type="submit"], .wp-block-button .wp-block-button__link{
}

/* =============================================================================
Reusable button/link color variants (owner shorthand: bw/wb/nolink1) --
applied per-page on request rather than sitewide. These fully REPLACE
"btn btn-primary"/"btn btn-secondary" on an element (not stack alongside
them) -- they carry their own complete button chrome (copied from the
shared .btn-primary/.btn-secondary block in main.css) precisely so they
never share a selector with main.css/custom-color.css's .btn-primary/
.btn-secondary rules. Sharing a selector would mean fighting
custom-color.css's :hover rules (it loads last, so equal-specificity
:hover ties go to it, not these) -- full replacement sidesteps that
instead of relying on !important.
============================================================================= */

.btn-bw,
.btn-wb {
  display: inline-block;
  position: relative;
  padding: .8em 2.1em;
  margin-bottom: .75em;
  margin-right: .25em;
  font-size: 1em;
  line-height: 1.2;
  outline: 0;
  border-radius: 5px;
  text-decoration: none;
  font-family: 'Poppins', Helvetica, sans-serif;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 10px -8px rgba(0,0,0,.78);
}

/* bw: blue by default, flips to white on hover. Same color recipe as
   the #home hero buttons (custom.css "Home" section). !important throughout:
   applied to input[type="submit"] on contact.php, whose main.css/
   custom-color.css selectors (input[type="submit"], input[type="submit"]:hover)
   out-specificity a plain class selector (the attribute selector counts as
   much as a class), so without it these colors would silently lose on that
   one element type. */
.btn-bw {
  background-color: #007ced !important;
  border: 2px solid #007ced !important;
  color: #fff !important;
}

.btn-bw:hover,
.btn-bw:focus {
  background-color: #fff !important;
  border: 2px solid #007ced !important;
  color: #007ced !important;
  /* the global a:hover underline fix (further down this file) is
     !important, which beats this block's own plain (non-important)
     text-decoration:none from the shared .btn-bw,.btn-wb rule above --
     needs its own !important here to stay unaffected. */
  text-decoration: none !important;
  /* bootstrap.min.css's "button:focus{outline:-webkit-focus-ring-color auto 5px}"
     beats the plain ".btn-bw, .btn-wb{outline:0}" above on specificity alone
     (type+pseudo-class > single class) -- that's the ~5px ring that was
     reading as a hard black border on focus. Re-declaring it here, scoped
     to :focus, wins on specificity without needing !important, but adding
     it anyway to match this block's existing pattern. */
  outline: 0 !important;
}

/* wb: the inverse of bw -- white by default, flips to blue on hover. */
.btn-wb {
  background-color: #fff !important;
  border: 2px solid #007ced !important;
  color: #007ced !important;
}

.btn-wb:hover,
.btn-wb:focus {
  background-color: #007ced !important;
  border: 2px solid #007ced !important;
  color: #fff !important;
  outline: 0 !important;
  text-decoration: none !important;
}

/* nolink1: strips button chrome back down to a plain text link -- blue,
   no background/border/shadow, grows slightly on hover. Meant to
   replace "btn btn-primary"/"btn btn-secondary" entirely on an element
   (not stack alongside them), since it resets what those classes set. */
.nolink1 {
  display: inline-block;
  padding: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: #007ced;
  transition: transform 0.3s ease-in-out;
}

.nolink1:hover,
.nolink1:focus {
  background-color: transparent;
  color: #007ced;
  transform: scale(1.1);
  /* .nolink1 is applied to real <button> elements (services.php's
     toggles), which still match main.css's bare "button:hover,
     button:focus{border:2px solid #007ced}" (type+pseudo-class) --
     that beats a single class on hover/focus even though the base
     ".nolink1{border:0}" rule (also a single class) already wins at
     rest against the plain "button{border:...}" type selector. Same
     specificity trap as the outline one below, just a different
     property, and needing the fix in this :hover/:focus block
     specifically since the base rule doesn't carry over automatically. */
  border: 0 !important;
  outline: 0 !important;
  /* .nolink1 is applied to both <a> (index.php) and <button>
     (services.php) elements for the same visual treatment -- without
     this, only the <a> instances would pick up the global a:hover
     underline below, making the two inconsistent. */
  text-decoration: none !important;
}

.bootstrap-h2{
  font-size: 2rem !important;
  line-height: 1.7em;
}

/* !important here because .block-title h2 (2 classes' worth of
   specificity) further down this file would otherwise silently beat
   .bootstrap-h2 (1 class) wherever a .bootstrap-h2 heading happens to
   also sit inside a .block-title wrapper -- true on the Contact,
   Services, and Experience page intro headings, but not on Home/About's
   own intro headings, which aren't inside .block-title. Net effect
   before this fix: 3 of 5 "page intro" headings were stuck at 38px on
   EVERY screen size (not just mobile), inconsistent with the other 2
   at 32px/20px. This makes all 5 consistent, regardless of which
   wrapper they happen to sit in. */

/* .bootstrap-h2 uses 2rem, which tracks whatever the root <html>
   font-size currently is -- and that's set by three separate, unordered
   media queries further down this file (768px/1024px/600px breakpoints)
   that all apply at once on real phones, landing on 18px there (bigger
   than the 16px desktop default) purely by source-order tiebreak. Net
   effect: this heading rendered LARGER on phones (36px) than on desktop
   (32px), backwards from what anyone intended. Scoped override here
   sidesteps that cascade entirely rather than untangling it (which
   would touch other rem-based sizing sitewide) -- matches the plain
   mobile h2{font-size:20px} rule elsewhere in this file, keeping this
   heading consistent with the rest of the site's mobile heading scale
   (between h1's 22px and h3's 18px) instead of an arbitrary new size. */
@media (max-width: 768px) {
  .bootstrap-h2 {
    /* !important needed here too, same reason as the desktop rule
       above -- .block-title h2's higher specificity has no mobile
       override of its own, so its unconditional 38px would otherwise
       keep winning on mobile as well. */
    font-size: 20px !important;
  }
}

/* Restored -- this was NOT dead despite no bare <h2> remaining inside
   .block-title anymore. main.css builds a decorative underline (a
   full-width dark bar plus a short blue accent) specifically for
   ".block-title h2" via :before/:after pseudo-elements -- that
   selector matches ANY h2 in .block-title regardless of what other
   classes it also carries, so it still fires on the now-bootstrap-h2
   headings (Contact/Services/Experience/About-testimonials) even
   though no bare h2 exists anymore. This switches it back off, same
   as before .block-title h2's font-size rule was removed last round;
   h3 in .block-title was never targeted by that main.css rule in the
   first place, which is why the homepage's h3 section titles never
   showed this underline and didn't need suppressing. */
.block-title h2:before,
.block-title h2:after {
  display: none;
}

.aks-title-block {
  text-align: center;
}

.aks-title-block p {
  margin-bottom: 15px;
}

h3 {
  display: inline-block;
  position: relative;
  font-size: 32px;
  margin: 0 0 15px;
  z-index: 1;
  padding-bottom: 7px;
}

/* Mobile H1-H6 ladder, kept in proper descending order (desktop stays
   untouched, per owner's request). H3 has to be overridden here rather
   than in the main @media(max-width:768px) block above, since this is
   the rule it needs to beat on source order (same specificity, this
   file position wins). H1 (22px) and H2 (20px) are already set in that
   earlier block; H4/H5 previously had no mobile size at all (they just
   inherited their desktop sizes), so H1/H4 and H2/H5 were colliding on
   phones -- fixed here too, at the same time, to keep the whole ladder
   consistent in one place. H6 (16px) already sat correctly below this
   and didn't need a change. */
@media (max-width: 768px) {
  h3 { font-size: 19px; }
  h4 { font-size: 18px; }
  h5 { font-size: 17px; }
}

.breadcrumb {
  background-color: transparent;
  border-radius: 0;
  justify-content: center !important;
  padding-top: 0;
}

.page-title h1{
  margin-top: 3%;
}

.page-title-background-overlay {
  background-color: #0F2748;
  opacity: 0.83;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  inset: 0;
  position: absolute;
  filter: brightness( 91% ) contrast( 100% ) saturate( 177% ) blur( 0px ) hue-rotate( 0deg );
  z-index: 1; /* Pushes the overlay back, behind elements with a higher z-index (or default z-index) */
}

.page-title-content {
    position: relative; /* Must be relative to accept z-index */
    z-index: 5; /* A value higher than the overlay's z-index (which is 1) */
}

h1, h2, h3, h4, h5 {
  hyphens: none;  
  word-break: normal;  
  overflow-wrap: normal; 
}

.site-main-menu li.current-menu-item > a, .site-main-menu li.current-menu-parent > a, .site-main-menu li:hover > a {
  border-bottom: 2px solid #007ced;
}

@media only screen and (min-width: 991px) {
  .p-lg-50 {
    padding-top: 50px;
  }
  .p-lg-100 {
    padding-top: 100px;
  }
}

footer hr {
  border-top: 2px solid #222;
}

.section-cover {
    display: block;
    position: relative;
    background-color: #252525;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    padding: 65px 70px;
    margin-right: -70px;
    margin-left: -70px;
}

/************************************************* MODAL **************************************************/

.modal,body.modal-open {
	padding-right: 0!important
}

body.modal-open {
	overflow: auto
}

body.scrollable {
	overflow-y: auto
}

.modal-footer {
	display: flex;
	justify-content: flex-start;
	background-color: rgb(34, 34, 34);
	border-top: 1px solid #444;
}
.modal-content{
	z-index: 200;
}
.modal-content {
	border: 0;
	/*background-color: transparent;*/
	background-color: rgb(34, 34, 34);
}
.close{
	color: #d5d5d5;
    font-weight: 300;
}
.close:focus, .close:hover {
    color: #fff;
    text-decoration: none;
    opacity: .75;
}

.red{
	border: 2px solid #dc3545 !important;
}
.red:hover {
	color: #fff;
	background-color: #c82333 !important;
	border-color: #bd2130 !important;
}

/* ============================================================================= 
Animate on Scroll
============================================================================= */

/* Base hidden state and transition */
.section-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

/* Visible state */
.section-animate.visible {
  opacity: 1;
  transform: none;
}

/* Override for small screens (less than 768px) */
@media (max-width: 767.98px) {
  .section-animate {
    opacity: 1; /* Always visible */
    transform: none; /* Always in place */
    transition: none !important; /* Stop the animation! */
  }
  
  /* Ensure visible class doesn't conflict */
  .section-animate.visible {
    opacity: 1;
    transform: none;
  }
}

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

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  padding-top: 10px;
  padding-bottom: 20px;
  height: 70px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, all 0.3s ease;
  will-change: opacity;
}

.site-main-menu li a {
  color: #0a1119;
  font-size: 15px;
}

/* =============================================================================
Preloader
============================================================================= */

.preloader,
.preloader-portfolio {
  background-color: #fff;
}

.header.shrink {
  height: 60px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.header-content {
  /* margin-top: 5px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1460px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
  /* overflow: hidden; */
}

.header.shrink .header-content {
  margin-top: 0;
}

.logo-img, .logo-text {
  transition: transform 0.3s ease, font-size 0.3s ease;
}

.header.shrink .logo-img {
  transform: scale(0.8);
}

.header.shrink .logo-text {
  font-size: 18px;
}

@media only screen and (max-width: 991px) {
  .header.shrink .logo-text {
    line-height: 45px;
  }
}

.header.shrink .site-main-menu li a {
  font-size: 14px;
  padding: 10px 5px;
}

@media only screen and (min-width: 10px) {
  .header-content {
    background-color: transparent;
  }
}

@media only screen and (max-width: 991px) {
    .header-content {
        padding: 10px 20px 0px 30px;
    }
}

@media only screen and (max-width: 767px) {
  .header {
    /* width: 98% !important; */
    width: 100% !important;
  }
}

/* =============================================================================
Top Info Bar (location/hours/socials above the main nav)
============================================================================= */

#top-info-bar {
  display: none;
}

@media only screen and (min-width: 992px) {
  #top-info-bar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    height: 40px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  #top-info-bar.hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }

  .top-info-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 70px;
  }

  .top-info-items {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .top-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #0a1119;
  }

  .top-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f3f9ff;
    color: #0a1119;
    font-size: 12px;
    flex-shrink: 0;
  }

  .top-info-item strong {
    font-weight: 600;
    margin-right: 4px;
  }

  .top-info-hours {
    color: #0a1119;
  }

  .top-info-socials {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .top-info-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f3f9ff;
    color: #007ced;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .top-info-social-icon:hover {
    background-color: #007ced;
    color: #fff;
    text-decoration: none !important;
  }

  .header {
    top: 40px;
  }

  .header.shrink {
    top: 0;
  }

  body {
    padding-top: 110px;
  }
}

/* Mobile off-canvas nav: vendor default was a dark panel with dark-on-dark
   text (never converted during the light-theme pass). Flipping it white
   both matches live's mobile menu and fixes that legibility bug. */
@media only screen and (max-width: 991px) {
  .site-nav {
    background-color: #fff;
  }
}

.mobile-nav-info {
  display: none;
}

@media only screen and (max-width: 991px) {
  .mobile-nav-info {
    display: block;
    padding: 20px 30px;
    border-top: 1px solid #eee;
  }

  .mobile-nav-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #0a1119;
    margin-bottom: 18px;
  }

  .mobile-nav-info-item:last-child {
    margin-bottom: 0;
  }

  .mobile-nav-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f3f9ff;
    color: #0a1119;
    font-size: 13px;
    flex-shrink: 0;
  }

  .mobile-nav-info-item strong {
    display: block;
    font-weight: 600;
  }

  .mobile-nav-info-hours {
    color: #0a1119;
  }
}

/* =============================================================================
Home
============================================================================= */

/* Hero buttons ("Explore my Experience"/"Request a Consultation") --
   owner-requested blue look, piloted on the homepage before rolling out
   to other pages' buttons by hand. Scoped to #home so it doesn't touch
   the sitewide .btn-primary rules (main.css/custom-color.css). */
#home .btn-primary {
  background-color: #007ced;
  border: 2px solid #007ced;
  color: #fff;
}

#home .btn-primary:hover,
#home .btn-primary:focus {
  background-color: #fff;
  border: 2px solid #007ced;
  color: #007ced;
  text-decoration: none !important;
}

.home-social-icons {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.home-social-icons a {
  transition: background-color 0.3s ease;
}

/* This part aligns icons to center on smaller screens */
@media (max-width: 767px) {
  .home-social-icons {
    justify-content: center;
  }
}

.fa-lg {
  font-size: 1.5em;
}

.home-social-icons a:hover {
  color: #d5d5d5;
}

@media (max-width: 767px) {
  .hello-intro{
    text-align: center !important;
  }
}

.home-text h1{
  margin-bottom: 10px;
  line-height: 1.5em;
}

/* .hp-inner { */
  /* Set a viewing area size (adjust as needed) */
  /* width: 100%;  */
  /* height: 100%;  */
  /* This is the key: it clips the moving image */
  /* overflow: hidden;  */
  /* Establish a positioning context for the image */
  /* position: relative;  */
/* } */

/* .hp-inner img { */
  /* Allow the transform to take effect */
  /* will-change: transform;  */
  /* Set the image to fill the container and center it */
  /* position: absolute;  */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* object-fit: cover; *//* Ensures the image covers the area */
/* } */

/* Define the transition class used by the JS */
/* .hp-inner img.transition { */
  /* Apply a smooth transition effect only on the transform property */
  /* transition: transform 0.3s ease-out;  */
/* } */

.home-intro{
  hyphens: none;  
  word-break: normal;  
  overflow-wrap: normal; 
}

/* Cloud container: wraps nicely and centers */
.tag-cloud{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin-inline: auto;
  line-height: 1.2;
}

/* Each tag is a link for SEO/UX, but can be span if you prefer */
.tag{
  --w: 5; /* default weight if not set inline */
  --t: calc((var(--w) - 1) / 9); /* normalize 1..10 -> 0..1 */

  /* font-size scales between min and max using the weight */
  font-size: calc(var(--min-size) + (var(--max-size) - var(--min-size)) * var(--t));
  text-decoration: none;
  /* color: hsl(calc(210 + 80 * var(--t)), 90%, calc(70% - 15% * var(--t)));*/ /*hue/brightness by weight */
  color: hsl(calc(205 + 25 * var(--t)), 90%, calc(68% - 12% * var(--t))); /* new color logic — blue spectrum centered on #007CED */
  padding: 0.15em 0.35em;
  border-radius: 999px;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
  will-change: transform;
  position: relative;
}

/* subtle chip background */
.tag::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in oklab, currentColor 14%, transparent);
  z-index: -1;
  filter: blur(0.5px);
}

/* playful micro-rotation */
.tag:nth-child(4n){ transform: rotate(-1deg) }
.tag:nth-child(4n-1){ transform: rotate(0.6deg) }
.tag:nth-child(4n-2){ transform: rotate(-0.4deg) }
.tag:nth-child(4n-3){ transform: rotate(0.2deg) }

.tag:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.tag:hover{
  transform: scale(1.08);
  background: color-mix(in oklab, #222 20%, transparent);
  color: white;
  box-shadow: 0 6px 18px color-mix(in oklab, black 20%, currentColor 0%);
}

/* Optional: make really tiny tags skip rotation so they stay legible */
.tag[style*="--w: 1"],
.tag[style*="--w: 2"] { transform: none }

.fw-pricing .fw-default-row{
	font-size: 16px;
	line-height: 2.25em;
}

.fw-pricing .fw-package {
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.fw-pricing .fw-package-wrap.highlight-col .fw-package {
  border-color: #d5d5d5;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
}

.fw-pricing .fw-package:hover,
.fw-pricing .fw-package-wrap.highlight-col .fw-package:hover {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
}

/* Consulting-clients boxes (experience.php): same shadow as the
   homepage key-exp "Why choose me" tiles (.hover-card-reveal),
   scoped here so it doesn't touch the homepage's own #services
   .fw-package cards, which weren't part of this request. */
#consulting-clients .fw-package {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
  text-align: left;
}

/* The text-align:left above (owner-requested) also pulled the circular
   icon at the top of each card left along with it, since it inherited
   the same text-align. Owner wants the icon centered while the
   heading/bullets below it stay left-aligned. */
#consulting-clients .fw-package .fw-heading-row {
  text-align: center;
}

.lm-info-block {
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.lm-info-block-value {
  color: #0a1119;
}

/* Companies-I-worked-for carousel (shared markup: index.php + experience.php).
   Owner-requested (2026-09-23): bigger logos (main.css's own
   ".client-block img{max-width:80px}" was losing to its higher-specificity
   ".clients.owl-carousel .owl-item img{max-width:100px}" rule -- both
   raised here, in sync, so the visible cap is actually 130px not 100px)
   plus a visible company-name caption under each logo (name already
   existed as the <a title="...">, now echoed in a real <span> too). */
.clients.owl-carousel .client-block img,
.clients.owl-carousel .owl-item img {
  max-width: 130px;
}

.client-name {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  line-height: 1.3em;
  color: #6c757d;
  text-align: center;
}

/* Decorative side wave pattern (matches live's Group-260.png), owner-
   specified placements only: index.php's #about (home hero intro,
   right side) and about.php's #passion ("My Driving Force", left
   side) -- both plain-white sections, not one of the pale-blue
   full-bleed ones, but still given the SAME 100vw breakout treatment
   as those (#home/#services/etc. above) -- without it, these sections
   stay capped to the ~1460px centered content column, so the wave's
   right:-60px/left:-60px only pokes past that column's edge, landing
   deep inside the wide empty margin before the true viewport edge
   instead of bleeding toward it like live does. Background stays
   white (no background-color set here), so visually this is a no-op
   except for letting the wave reach the real edge. overflow:hidden
   keeps that bleed contained -- same reasoning as before, avoids the
   kind of horizontal-overflow/scrollbar issue already chased down
   once on this page. Hidden below 768px since it's purely decorative
   and these sections stack to one column on mobile. */
#about,
#passion {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

#about > .section-animate,
#passion > .section-animate {
  max-width: 1460px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

.side-wave-img {
  position: absolute;
  top: 0;
  max-width: 45%;
  height: auto;
  pointer-events: none;
  z-index: 0;
  display: none;
}

@media (min-width: 768px) {
  .side-wave-img {
    display: block;
  }
}

.side-wave-img.side-wave-right {
  right: -60px;
}

.side-wave-img.side-wave-left {
  left: -60px;
  transform: scaleX(-1);
}

/* =============================================================================
Alternating section backgrounds (matches live: hero/services/stats = pale
blue, companies/about/hover-tiles = white)
============================================================================= */

#home,
#services,
#interesting-figures {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #f3f9ff;
}

#home > .section-animate,
#services > .section-animate,
#interesting-figures > .section-animate {
  max-width: 1460px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

/* Same treatment on the secondary pages. #key-exp/#key-companies also
   exist on index.php (where they must stay white), so those two are
   scoped to body.page-experience to avoid colliding with the home page. */
#journey,
#philosophy,
#testimonials,
body.page-experience #key-exp,
body.page-experience #key-companies,
#profexperience,
#industries-served,
#contact {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #f3f9ff;
}

#journey > .section-animate,
#philosophy > .section-animate,
#testimonials > .section-animate,
body.page-experience #key-exp > .section-animate,
body.page-experience #key-companies > .section-animate,
#profexperience > .section-animate,
#industries-served > .section-animate,
#contact > .section-animate {
  max-width: 1460px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

/* Book-shape divider between #key-companies and #profexperience (experience.php)
   -- both are blue-background sections back to back, so this decorative
   white "pages" shape (ported from the live site's Elementor "book" shape
   divider, same SVG path) marks the seam between them. Anchored to
   #key-companies, which already has position:relative from the alternating-
   background rule above. */
.book-shape-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.book-shape-divider svg {
  display: block;
  width: 100%;
  height: 100px;
}

.book-shape-divider path {
  fill: #fff;
}

/* Alternating pale-blue rows inside services.php's #main-services block.
   These rows have no .section-animate wrapper (they sit inline in the
   normal padded content column), so instead of the 100vw breakout used
   elsewhere, a full-bleed ::before paints behind the row without touching
   its box model. */
#safetyaudit,
#bestpractice,
#staffrec {
  position: relative;
  z-index: 0;
}

#safetyaudit::before,
#bestpractice::before,
#staffrec::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #f3f9ff;
  z-index: -1;
}

/* =============================================================================
Page-title banner (inner-page hero: about/experience/services/contact)
============================================================================= */

.page-title h1,
.page-title .page-subtitle h4 {
  color: #fff;
}

.page-title .page-subtitle h4 {
  font-size: 16px;
}

.page-title .breadcrumb-item.active,
.page-title .breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}

/* =============================================================================
Testimonials (about.php) -- still had the vendor dark card styling
============================================================================= */

.testimonial-content {
  background-color: #fff !important;
  border: 1px solid #e5e5e5;
}

/* Same gap as #side-email on the contact page -- no overflow-wrap/
   word-break rule exists anywhere for testimonial text, so a long
   unbroken token (a firm name, etc.) can overflow this card's bounds
   on narrow phones. Preventive fix, not tied to one specific string. */
.testimonial-content,
.testimonial-text p,
.testimonial-author,
.testimonial-firm,
.card-text-back {
  overflow-wrap: break-word;
  word-break: break-word;
}

.testimonial-author {
  color: #0a1119;
}

.testimonial-firm {
  color: #6c757d;
}

.card-text-back {
  line-height: 25px;
}

/* ============================================================================= 
About
============================================================================= */

.ci-text p{
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Journey section (about.php) -- below Bootstrap's own md breakpoint
   (768px, the same one that makes the two .col-md-6 columns stack
   instead of sitting side by side), the second column starts hidden
   and is revealed by the .journey-toggle button. No !important here on
   purpose: the click handler's slideToggle() needs to be able to
   override this via an inline style. Left plain display:block/none
   (not d-none/d-md-block) for that same reason -- Bootstrap's display
   utilities are !important, which would block slideToggle from
   animating it open at all. */
@media (max-width: 767px) {
  #journey .experience-text .col-md-6:last-child {
    display: none;
  }
}

.readmore {
  color: #007ced;
  cursor: pointer;
}

.readmore:hover {
  color: #007ced;
  /* main.css's ".page-content a:hover, .entry-content a:hover, ..." (a
     leftover WordPress blog-content rule that incidentally matches
     everywhere, since .page-content wraps the whole body on every page
     here) out-specificities a plain single-class selector on
     text-decoration specifically -- color isn't touched by that rule,
     which is why only the underline half was silently losing. */
  text-decoration: underline !important;
}

/* Vendor default (main.css) was orange (#FF9800) on every plain <a> --
   never converted during the light-theme pass. Catches inline text
   links like contact.php's "experience"/"services", experience.php's
   "professional timeline", and the footer's "Snehil Singh" credit. */
a:hover {
  color: #007ced;
  text-decoration: underline !important;
}

/* Exceptions to the underline above -- nav links have their own
   border-bottom-based hover indicator (see .site-main-menu rules
   elsewhere) and don't want a second cue stacked on top of it, which
   on dark nav text was rendering as what looked like a stray black
   line under each item. */
.site-main-menu li a:hover,
.site-main-menu li a:focus {
  text-decoration: none !important;
}

@media (min-width: 991px) {
  .row-philosophy{
    margin-top: -2%;
  }
}

@media (min-width: 576px) {
  .w-sm-25 { width: 25% !important; }
  .w-sm-30 { width: 30% !important; }
  .w-sm-50 { width: 50% !important; }
  .w-sm-75 { width: 75% !important; }
  .w-md-50 { width: 50% !important; }
}

@media (min-width: 768px) {
  .w-md-25 { width: 25% !important; }
  .w-lg-95 { width: 95% !important; }
}

.testimonial-text p{
  hyphens: none;  
  word-break: normal;  
  overflow-wrap: normal;
}

/********************** About AKS **********************/
#about-page{
  background-image: url("../../assets/images/about/About-Ashok-Kumar-Singh.jpg");
}

p.testimonial-firm {
  margin: 0 !important;
}

/* ============================================================================= 
Experience
============================================================================= */

.timeline-item li{
  hyphens: none;  
  word-break: normal;  
  overflow-wrap: normal; 
}

.page-title .page-subtitle {
  position: initial;
}

.page-with-title .citem a:hover, .timeline-item .item-title a:hover{
  color: #fff;
}

.modal-header{
  border-bottom: 1px solid #333;
}

.timeline-item h5.item-period{
  float: right;
  color: #0a1119;
  background-color: #fff;
}

.timeline-item h5.item-period.current{
  background-color : #007ced;
  color: #fff;
}

.timeline-item:before,
.timeline-item:after {
  background-color: #9e9e9e;
}

.timeline-item .item-title {
  color: #666;
}

.timeline-item .item-company {
    margin-left: 0px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    opacity: 1;
}

.timeline-dot {
  position: absolute;
  left: 10px;
  /*top: 10px;*/
  top: 35px;
  width: 10px;
  height: 10px;
  background-color: #007ced;
  /*border: 2px solid #ffffff;*/
  border-radius: 50%;
  box-shadow: 0 0 0 2px #007ced;
  z-index: 2;
}
.timeline-dot.current {
  top: 10px;
  -webkit-box-shadow: 0 0 14px 4px rgba(0, 124, 237, 0.65), 0 0 0 4px #666, 0px 0px 15px rgb(213, 213, 213), 0px 0px 15px #007ced;;
  -moz-box-shadow: 0 0 14px 4px rgba(0, 124, 237, 0.65), 0 0 0 4px #666, 0px 0px 15px rgb(213, 213, 213), 0px 0px 15px #007ced;;
  box-shadow: 0 0 14px 4px rgba(0, 124, 237, 0.65), 0 0 0 4px #666, 0px 0px 15px rgb(213, 213, 213), 0px 0px 15px #007ced;
}

/********************** Experience AKS **********************/
#experience-page{
  background-image: url("../../assets/images/experience/ashok-kumar-singh-expertise.jpg");
}

.exp-ind-img, #passion-pic {
  border-radius: 1000px;
}

/* --- Base Container (No Change) --- */
.hover-card-reveal {
    position: relative;
    overflow: hidden;
    height: 350px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Increased shadow for dark mode visibility */
}

/* Below 768px, .card-back-layer's text can run taller than this card's
   fixed 350px, silently clipping the tail with no way to see it (mobile
   "hover" is really a tap, so there's no scroll affordance either).
   Let the card grow to fit instead -- tile heights can differ from each
   other on mobile as a result, which is an accepted trade-off. */
@media (max-width: 767px) {
  .hover-card-reveal {
    height: auto;
  }
}

/* --- The Front Layer (Image and Initial Title) --- */
.card-front-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;

    /* Crucial: This ensures the image is visible initially */
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Matches live's actual markup/CSS (Elementor's .meafe-member-body): the
   title sits in its own flat, semi-transparent band sized to its own
   content (padding + text height) and pinned to the tile's bottom edge --
   not a gradient climbing up the photo. .card-front-layer no longer needs
   flex/padding to position this now that the title positions itself. */
.card-title-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: rgba(22, 22, 22, 0.5);
    color: #fff;
}

/* 1. On Hover: Make the front layer disappear */
.hover-card-reveal:hover .card-front-layer {
    opacity: 0; 
}

/* --- The Back Layer --- */
.card-back-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: #fff;
    
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    
    /* FIX 2: Hide the back layer initially using opacity, keeping z-index low */
    opacity: 0; 
    z-index: 1; 
    transition: opacity 0.4s ease;
}

/* 2. On Hover: Make the back layer appear */
.hover-card-reveal:hover .card-back-layer {
    opacity: 1; 
}

.card-back-layer .card-title-back {
    color: #007ced;
}

.card-back-layer .card-body-back p {
    color: #0a1119;
}

/* Placed AFTER .card-back-layer's own base rule above on purpose --
   same specificity (plain class selector), so on a tie the LATER rule
   in the file wins regardless of the media query, even when the
   condition matches. An earlier attempt at this override (removed)
   sat before the base rule above and was silently beaten by it on
   every mobile load, leaving .card-back-layer stuck at
   position:absolute -- with .card-front-layer also absolute, neither
   child contributed to .hover-card-reveal's height:auto, so the whole
   card (including the front layer's photo/title) collapsed to 0
   height and vanished behind overflow:hidden. Taking this layer out
   of absolute positioning lets its real content height set the
   card's height instead (it stays invisible via opacity:0 until
   hover/tap, same as always); .card-front-layer stays absolute and
   covers the resulting taller area fully. */
@media (max-width: 767px) {
  .card-back-layer {
    position: relative;
    height: auto;
  }
}

/* ============================================================================= 
Contact
============================================================================= */
#map iframe {
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
}

.ftr_link {
  color: #0a1119;
  font-size: 20px;
}
.ftr_link:hover {
  color: #007ced;
}

/* Form fields still had the vendor's dark-theme default: a thick #555
   border meant for a dark background, plus near-white (#eee) typed-text
   color that's nearly illegible on our white input background -- a
   leftover missed during the sitewide light-theme pass, only obvious
   once you compare directly against the live site's subtle border. */
#contact .form-control {
  border: 1px solid #d5d5d5;
  color: #0a1119;
}

/* "Interested in a Strategic Collaboration?" (and any other in-page
   link to #contact_form) lands the form flush against the viewport
   top, which puts it behind the fixed header -- hiding the "Get in
   touch..." heading directly above the form. scroll-margin-top offsets
   where the browser stops the jump, reusing the same header-height
   values body already uses for its own top padding (70px mobile,
   110px desktop once the top info bar is factored in), plus a small
   buffer for the heading's own height. */
#contact_form {
  scroll-margin-top: 100px;
}

@media (min-width: 992px) {
  #contact_form {
    scroll-margin-top: 140px;
  }
}

#contact .ci-text p{
  line-height: 1.7em;
}

#contact div.ci-text p{
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* #side-email (contact.php's <h4><a> email link) isn't a <p>, so the
   two .ci-text p rules above never touch it -- and it's one unbroken
   30-char token, so on narrow phones it pushes .ci-text's table-cell
   wider than the viewport instead of wrapping. */
#side-email {
  overflow-wrap: break-word;
  word-break: break-word;
}

.btn-send.disabled, 
.btn-send[disabled] {
    /* Reduce opacity to make it look faded/disabled */
    opacity: 0.6 !important;
    
    /* Change cursor to indicate the action is forbidden */
    cursor: not-allowed !important;
}

/********************** Contact AKS **********************/
#contact-page {
  background-image: url("../../assets/images/contact/contact-ashok-kumar-singh.jpg");
}

/* FAQ accordion -- explicit, self-contained rules rather than relying on
   Bootstrap's .btn-link/.card defaults + main.css's catch-all "button{}"
   tag rule (that combo was producing unpredictable text colors, per the
   owner's report). Chevron rotation and the "active question" look both
   key off aria-expanded, which Bootstrap's own collapse JS already
   toggles -- no markup/JS changes needed for any of the 12 questions. */
#faq .accordion .card {
  border: none;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  background-color: #f3f9ff;
}

#faq .accordion .card:last-child {
  margin-bottom: 0;
}

#faq .card-header {
  background-color: transparent;
  border-bottom: none;
  padding: 0;
}

#faq .card-header .btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 20px 45px 20px 20px;
  text-align: left;
  color: #0a1119;
  font-weight: 500;
  text-decoration: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

#faq .card-header .btn:hover,
#faq .card-header .btn:focus {
  background-color: #e8f2ff;
  color: #0a1119;
  text-decoration: none;
  box-shadow: none;
}

/* Chevron, drawn with CSS (no icon-font dependency) -- points down at
   rest, flips to point up when aria-expanded="true". */
#faq .card-header .btn::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #007ced;
  border-bottom: 2px solid #007ced;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}

#faq .card-header .btn[aria-expanded="true"]::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* Active/expanded question: left accent bar instead of a text-color
   swap, so the "text turns white" bug has nothing left to happen to. */
#faq .card-header .btn[aria-expanded="true"] {
  padding-left: 16px;
  border-left: 4px solid #007ced;
  font-weight: 600;
  background-color: #e8f2ff;
}

#faq .card-body {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0 0 8px 8px;
  padding: 18px 20px;
  color: #0a1119;
}

/* ============================================================================= 
Achievements
============================================================================= */
@media (max-width: 767px) {
  article .img-thumbnail {
    width: 50%;
  }
}

@media (max-width: 992px) {
  article .img-thumbnail {
    width: 70%;
  }
}

@media (min-width: 992px) {
  article .post-thumbnail .img-thumbnail {
    width: 50%;
  }
}

.blog-card .category a{
  cursor: default;
}

.blog-card .media-block:hover img{
  filter: grayscale(100%);
}

.blog-card .media-block img {
  filter: grayscale(0%);
}

.blog-item img {
  width: 100%;
  height: 200px;
}

.blog-card .category span {
    position: relative;
    background: #fff;
    border-radius: 3px;
    padding: 3px 7px;
    line-height: 1.2em;
    font-size: 11px;
    background-color: #222;
    color: #f5f5f5;
}

article .post-content blockquote{
  margin-left: 0;
}

@media (max-width: 576px) {
  blockquote{
    /* border-left: 0; */
  }
}

/* ============================================================================= 
Services
============================================================================= */

#main-services p{
  hyphens: none;  
  word-break: normal;  
  overflow-wrap: normal; 
}

#service-page{
  background-image: url("../../assets/images/services/ashok-kumar-singh-services.jpg");
}

.faq-design-wrapper {
    position: relative;
}

.background-overlay-design {
    background-image: url("../../assets/images/side-design.png"); 
    background-repeat: no-repeat;
    background-size: contain; 
    opacity: 0.3;
    
    /* Position the element */
    position: absolute;
    
    /* Pin it to the top-right corner, adjust for the 'hanging' look */
    top: -50px; 
    right: -100px; 
    
    /* Adjust these dimensions to match the image size */
    width: 674px; 
    height: 620px;
    
    /* Ensure it stays behind all the text and accordion content */
    z-index: 0; 
    
    /* Performance optimization (will-change and transform for smooth rendering) */
    will-change: transform;
    transform: translateZ(0);
}

/* Contact page map — deferred load (assets/js/custom-global.js injects
   the real Google Maps iframe after window "load", so the embed's JS
   payload doesn't compete with the rest of the page for bandwidth on
   first paint). Plain neutral placeholder, visible only for the brief
   moment before the iframe is injected. */
.map-deferred {
  background-color: #f3f9ff;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}