/* ==========================================================================
   JC Financial Services — custom overrides
   (loaded AFTER easilon.css so these rules win)
   ========================================================================== */

/* --- Brand colors (in case any inline var needs it) --- */
:root {
  --jc-navy: #16265A;
  --jc-orange: #F47C20;
  --easilon-base: #F47C20;
  --easilon-base-rgb: 244, 124, 32;
}

/* --------------------------------------------------------------------------
   Overflow guards
   Every heading and paragraph on this site is admin-editable, so any of them
   can be handed content longer than the theme's placeholder — a long service
   name, an email address, an unbroken URL. The theme sizes its boxes for the
   demo copy and lets the rest spill out, which on a narrow viewport (or at
   high zoom, which CSS cannot tell apart) shows up as a horizontal scrollbar
   across the whole page.
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
}

/* Long words wrap instead of pushing their container wider. */
h1, h2, h3, h4, h5, h6,
p, li, td, th, dd, dt,
.sec-title__title,
.sec-title__tagline,
blockquote {
  overflow-wrap: break-word;
}

/* Emails, phone numbers and URLs are the usual unbreakable strings. */
a[href^="mailto:"],
a[href^="tel:"],
a[href^="http"] {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* An image should never be the thing that widens the page. Width only — a
   blanket height:auto would undo the fixed heights the theme relies on for
   avatars, partner logos and icons. */
img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   NAVBAR — keep the whole menu on ONE line, never wrap
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

  /* header row: logo | menu | actions — align on one line */
  .main-header__inner {
    flex-wrap: nowrap;
  }

  /* the menu itself never wraps */
  .main-menu .main-menu__list {
    flex-wrap: nowrap;
    align-items: center;
  }

  /* each top-level item text stays on one line */
  .main-menu .main-menu__list > li > a {
    white-space: nowrap;
  }

  /* tighter, even spacing between items so all fit */
  .main-menu .main-menu__list > li + li {
    margin-left: 26px;
  }
}

/* on slightly narrower large screens, tighten a bit more */
@media (min-width: 1200px) and (max-width: 1499px) {
  .main-menu .main-menu__list > li + li {
    margin-left: 20px;
  }
  .main-menu .main-menu__list > li > a {
    font-size: 15px;
  }
}

/* header right-side actions never squash the menu */
.main-header__right {
  flex-wrap: nowrap;
}
.main-header__phone {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Logo — round JC logo (already has its own white circle),
   so remove the header's white box and size by height.
   -------------------------------------------------------------------------- */

/* kill the white padded box behind the logo on the home/three header */
.main-header--three .main-header__logo,
.main-header__logo {
  background-color: transparent !important;
  padding: 8px 0 !important;
}

/* remove the little accent line under the logo box */
.main-header--three .main-header__logo::after,
.sticky-header--cloned.sticky-header--three .main-header__logo::after {
  display: none !important;
}

/* Round logo sized by height, never stretched. The height is a ceiling rather
   than a fixed value: on a narrow viewport (or at high browser zoom, which is
   the same thing to CSS) a rigid 123px logo forces the header taller than the
   menu beside it. max-height lets it shrink; max-width keeps it inside its
   column either way. */
.main-header__logo img {
  height: auto;
  max-height: 123px;
  max-width: 100%;
  width: auto !important;
  object-fit: contain;
}
.footer-widget__logo img {
  height: auto;
  max-height: 150px;
  max-width: 100%;
  width: auto !important;
  object-fit: contain;
}
.mobile-nav__content .logo-box img {
  height: auto;
  max-height: 74px;
  max-width: 100%;
  width: auto !important;
  object-fit: contain;
}

@media (max-width: 991px) {
  .main-header__logo img {
    max-height: 80px;
  }
}
@media (max-width: 575px) {
  .main-header__logo img {
    max-height: 62px;
  }
}

/* --------------------------------------------------------------------------
   Small brand polish
   -------------------------------------------------------------------------- */
/* active/hover menu item uses orange (already via var, this is a safety net) */
.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a {
  color: var(--jc-orange);
}

/* --------------------------------------------------------------------------
   Page banner slider (x-page-banner component)
   The base .page-header owns the vertical padding; with a slider inside, that
   padding has to move onto each slide so every slide is the same height and
   the fade has nothing to jump against.
   -------------------------------------------------------------------------- */
.page-header--slider {
  padding-top: 0;
  padding-bottom: 0;
}
.page-header__slide {
  position: relative;
  padding-top: 216px;
  padding-bottom: 222px;
}
@media (max-width: 575px) {
  .page-header__slide {
    padding-top: 176px;
    padding-bottom: 182px;
  }
}
.page-header__slide .container {
  position: relative;
  z-index: 2;
}
.page-header__tagline {
  margin-bottom: 10px;
  color: var(--jc-orange);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Slick renders its own wrapper divs; they must not collapse the slide. */
.page-header__slider .slick-list,
.page-header__slider .slick-track {
  height: 100%;
}
/* Dots sit over the banner, above the decorative border box. */
.page-header__slider .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 45px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-header__slider .slick-dots li {
  line-height: 0;
}
.page-header__slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.45);
  transition: background-color 300ms ease, transform 300ms ease;
}
.page-header__slider .slick-dots li.slick-active button {
  background-color: var(--jc-orange);
  transform: scale(1.3);
}
/* The border box is decoration only — never let it eat clicks on the dots. */
.page-header--slider .page-header__border-box {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Service detail pages: the sidebar nav.
   This used to narrow the sidebar to 2.5 columns and shrink the label to 17px
   to compensate. It did not compensate enough: at 992px that leaves ~106px of
   track for "Loan Against Property", which needs ~190px, so it wrapped to two
   lines — pushing the arrow out of line and making that one row taller than
   its neighbours, on every loan page. No legible font size fits that name in
   2.5 columns, so the sidebar keeps its full col-lg-3 and the label is pinned
   to one line instead.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* The theme pads for a 4-col sidebar (30px). In 3 cols that is too much. */
  .service-details .service-sidebar__nav li {
    padding-left: 18px;
    padding-right: 18px;
  }
  .service-details .service-sidebar__nav li:not(:last-child)::before {
    width: calc(100% - 36px);
  }
  .service-details .service-sidebar__nav li a {
    gap: 8px;
    font-size: 16px;
    white-space: nowrap;
  }
  /* The arrow is the one thing allowed to be squeezed out — never the name. */
  .service-details .service-sidebar__nav li a .service-sidebar__nav__icon {
    flex: 0 0 auto;
  }
  /* The accent bar is positioned against the old 30px padding. */
  .service-details .service-sidebar__nav li a::before {
    left: -18px;
  }
}

/* FAQ block sits flush against the paragraph above it — give it some air. */
.service-details__faq {
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Director signature (home, about section)
   The theme's own sign was 91x50 and the CSS lets an image size itself, so a
   larger replacement would render at its full pixel size and shove the row.
   Pin the height and let the width follow, so any signature file drops in.
   -------------------------------------------------------------------------- */
.about-three__director__sign {
  height: 50px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
}

/* The round director photo now shows the section's main image, which is a wide
   photo rather than the theme's square headshot. The theme sizes the circle
   55x55 but never set object-fit, so a wide source would squash to fit. */
.about-three__director__image {
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Footer newsletter
   The theme styles this as `input[type=text]`, but the field is type=email —
   so none of it applied and the input rendered as an unstyled default box with
   the arrow floating off to its right. Restate the theme's own rules against
   the type that is actually in the markup.
   -------------------------------------------------------------------------- */
.footer-widget__newsletter input[type="email"] {
  width: 100%;
  display: block;
  border: none;
  outline: none;
  height: 58px;
  background-color: var(--easilon-white, #ffffff);
  color: var(--easilon-text, #82828A);
  font-size: 14px;
  font-weight: 500;
  padding-left: 24px;
  padding-right: 56px;   /* room for the arrow that sits on top */
  transition: all 500ms ease;
}
.footer-widget__newsletter input[type="email"]:focus {
  color: var(--easilon-black2, #141414);
}

/* --------------------------------------------------------------------------
   Loan eligibility calculator — the label/value row
   The theme ships no rule at all for __count, and the value is written by JS as
   the slider moves: "Rs. 25,00,000" at rest, "Rs. 5,00,00,000" at the top of
   the loan-amount range. Unstyled, it wraps mid-number and the row grows taller
   mid-drag. The theme's own 40px gap is what runs it out of room, so that goes
   too — the value is the thing that must never break.
   -------------------------------------------------------------------------- */
.loan-eligibility__single__top {
  gap: 16px;
}
.loan-eligibility__single__title {
  min-width: 0;   /* let the label wrap before the number does */
}
.loan-eligibility__single__count {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  color: var(--jc-navy);
}

/* --------------------------------------------------------------------------
   Floating contact buttons (call + WhatsApp)
   Stacked on the right edge, above the back-to-top control (fixed at
   bottom:60px). Each collapses to a circle; the label expands on hover.
   -------------------------------------------------------------------------- */
:root {
  --jc-whatsapp: #25D366;
  --jc-call: #F47C20;
}

.jc-float {
  position: fixed;
  right: 24px;
  bottom: 120px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.jc-float__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  text-decoration: none;
  overflow: hidden;
  transition: gap 300ms ease, padding-right 300ms ease, box-shadow 300ms ease;
}
.jc-float__btn:hover,
.jc-float__btn:focus-visible {
  gap: 4px;
  padding-right: 22px;
}

.jc-float__btn--whatsapp {
  background-color: var(--jc-whatsapp);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.jc-float__btn--whatsapp:hover,
.jc-float__btn--whatsapp:focus-visible {
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.55);
}

.jc-float__btn--call {
  background-color: var(--jc-call);
  box-shadow: 0 6px 20px rgba(244, 124, 32, 0.4);
}
.jc-float__btn--call:hover,
.jc-float__btn--call:focus-visible {
  box-shadow: 0 8px 26px rgba(244, 124, 32, 0.55);
}

.jc-float__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
/* The WhatsApp glyph reads small at the same size as the phone glyph. */
.jc-float__btn--whatsapp .jc-float__icon {
  font-size: 30px;
}

/* Width-collapsed until hover, so the button reads as a circle. */
.jc-float__label {
  max-width: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  overflow: hidden;
  transition: max-width 300ms ease, opacity 200ms ease;
}
.jc-float__btn:hover .jc-float__label,
.jc-float__btn:focus-visible .jc-float__label {
  max-width: 160px;
  opacity: 1;
}

/* Expanding ring, to catch the eye without being obnoxious. */
.jc-float__pulse {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  opacity: 0.6;
  animation: jc-float-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.jc-float__btn--whatsapp .jc-float__pulse { background-color: var(--jc-whatsapp); }
.jc-float__btn--call     .jc-float__pulse { background-color: var(--jc-call); }
/* Offset the two rings so they do not throb in lockstep. */
.jc-float__btn--call .jc-float__pulse { animation-delay: 1.1s; }

@keyframes jc-float-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* Stop the ring while hovered — it fights the label expansion. */
.jc-float__btn:hover .jc-float__pulse {
  animation-play-state: paused;
  opacity: 0;
}

@media (max-width: 575px) {
  .jc-float {
    right: 16px;
    bottom: 90px;
    gap: 10px;
  }
  .jc-float__btn {
    height: 52px;
  }
  .jc-float__icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
  .jc-float__btn--whatsapp .jc-float__icon {
    font-size: 27px;
  }
  /* No hover on touch, so never reserve room for the label. */
  .jc-float__label {
    display: none;
  }
}

/* Respect users who have asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .jc-float__pulse {
    animation: none;
    opacity: 0;
  }
}


/* --------------------------------------------------------------------------
   Flash toasts (success / validation errors)
   Fixed top-right so they never fight the page banner for layout.
   -------------------------------------------------------------------------- */
.jc-toast {
  position: fixed;
  top: 110px;
  right: 24px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, calc(100vw - 48px));
  pointer-events: none; /* the container must not block the page */
}

.jc-toast__item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 10px;
  border-left: 4px solid;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(22, 38, 90, 0.18);
  color: var(--easilon-black, #16265A);
  font-size: 15px;
  line-height: 1.5;
  animation: jc-toast-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.jc-toast__item--leaving {
  animation: jc-toast-out 280ms ease forwards;
}

@keyframes jc-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes jc-toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

.jc-toast__item--success {
  border-left-color: #1E9E5A;
}
.jc-toast__item--error {
  border-left-color: #D93A3A;
}

.jc-toast__icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.4;
}
.jc-toast__item--success .jc-toast__icon { color: #1E9E5A; }
.jc-toast__item--error   .jc-toast__icon { color: #D93A3A; }

.jc-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}
.jc-toast__list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.jc-toast__list li + li {
  margin-top: 3px;
}

.jc-toast__close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8A93AC;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}
.jc-toast__close:hover {
  color: var(--easilon-black, #16265A);
  background-color: rgba(22, 38, 90, 0.07);
}

@media (max-width: 575px) {
  .jc-toast {
    top: 90px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jc-toast__item,
  .jc-toast__item--leaving {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Footer contact email
--------------------------------------------------------------*/
/* The address is long enough to wrap in the narrow footer column. */
.footer-widget__info li > a[href^="mailto:"] {
  white-space: nowrap;
  font-size: 12px;
  margin: 0 -9px;
    padding-top: 6px;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .footer-widget__info li > a[href^="mailto:"] {
    font-size: 13px;
  }
}