/*--------------------------------------------------------------
  YouCap Brand Override
  Applies YouCap brand identity over the Easilon template.
  Load AFTER easilon.css — overrides :root variables only.
  Brand Guide v1.0 — June 2026
--------------------------------------------------------------*/

/* --- Google Fonts ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

/* --- CSS Variable Overrides --------------------------------- */
:root {
  /* Primary font → Merriweather (body / UI elements) */
  --easilon-font: "Merriweather", Georgia, serif;

  /* Accent colour: YouCap Amber #F59E0B replaces Easilon cyan */
  --easilon-base:        #F59E0B;
  --easilon-base-rgb:    245, 158, 11;

  /* Primary dark colour: YouCap Navy #0B2545 replaces Easilon blue-purple */
  --easilon-black:       #0B2545;
  --easilon-black-rgb:   11, 37, 69;

  /* Deep dark: keep close to primary */
  --easilon-black2:      #061830;
  --easilon-black2-rgb:  6, 24, 48;

  --easilon-black3:      #0D2E5A;
  --easilon-black3-rgb:  13, 46, 90;

  --easilon-black4:      #0B2545;
  --easilon-black4-rgb:  11, 37, 69;

  /* Body text: Neutral 3 */
  --easilon-text:        #6B7280;
  --easilon-text-rgb:    107, 114, 128;

  /* Muted grey (was A0A0C0) */
  --easilon-gray:        #9CA3AF;
  --easilon-gray-rgb:    156, 163, 175;

  /* White tints */
  --easilon-white:       #ffffff;
  --easilon-white-rgb:   255, 255, 255;

  --easilon-white2:      #F8FAFC;
  --easilon-white2-rgb:  248, 250, 252;

  --easilon-white3:      #E2E8F0;
  --easilon-white3-rgb:  226, 232, 240;

  /* Border */
  --easilon-border-color:     #E2E8F0;
  --easilon-border-color-rgb: 226, 232, 240;
}

/* --- Heading Font: Lora ------------------------------------ */
h1, h2, h3, h4, h5, h6,
.sec-title__title,
.sec-title__tagline,
.main-slider-one__title,
.main-slider-one__sub-title,
.team-card__name,
.testimonial-card__name,
.funfact-one__item__number,
.work-process-one__item__title,
.features-one__features__title,
.about-one__experience__year,
.about-one__experience__title,
.download-app-one .sec-title__title,
.footer-widget__title,
.quick-loan-one .sec-title__title {
  font-family: "Lora", Georgia, serif;
  letter-spacing: -0.01em;
}

/* --- YouCap Image Logo ------------------------------------- */
.youcap-logo-img,
.main-header__logo img.youcap-logo-img,
.sticky-header img.youcap-logo-img,
.mobile-nav__content img.youcap-logo-img,
footer img.youcap-logo-img {
  display: block;
  height: 45px !important;
  width: auto !important;
  max-width: none !important;
}

/* --- YouCap Text Logo (legacy, unused) --------------------- */
.youcap-logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}

.youcap-logo-text__name {
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--easilon-black);
}

.youcap-logo-text__name span {
  color: var(--easilon-base);
}

.youcap-logo-text__tagline {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--easilon-text);
  margin-top: 3px;
}

/* Dark background variant (footer, dark header) */
.youcap-logo-text--light .youcap-logo-text__name {
  color: #ffffff;
}

.youcap-logo-text--light .youcap-logo-text__tagline {
  color: rgba(255, 255, 255, 0.55);
}

/* --- Preloader: YouCap icon, larger spinner ----------------- */
.preloader {
  background-color: #0B2545; /* force navy even if var not resolved yet */
}
.preloader__image {
  background-size: 100px auto; /* was 60px — bigger icon on load */
}

/* --- Accent Colour Tweaks ---------------------------------- */
/* The amber accent on very light backgrounds needs a darker shade for text */
a:hover,
.main-menu__list > li > a:hover {
  color: #D97706; /* amber-600 — stronger on white */
}

/* Ensure amber buttons have legible dark text */
.easilon-btn {
  color: var(--easilon-black) !important;
}

.easilon-btn:hover {
  color: var(--easilon-white) !important;
  background-color: var(--easilon-black) !important;
  border-color: var(--easilon-black) !important;
}

/* Border-style button keeps navy text on hover */
.easilon-btn--border:hover {
  color: var(--easilon-white) !important;
  background-color: var(--easilon-black) !important;
}

/* White variant CTA (quick-loan section) stays readable */
.easilon-btn--white {
  color: var(--easilon-black) !important;
  background-color: var(--easilon-white) !important;
}

.easilon-btn--white:hover {
  color: var(--easilon-white) !important;
  background-color: var(--easilon-black) !important;
}

/* --- Hero Slider CTA Buttons: Inverted Text ----------------
   White text inactive, navy text on hover.
   Scoped to .main-slider-one so other page buttons are unchanged.
   ---------------------------------------------------------- */

/* Both CTAs: white text + white icon divider when inactive */
.main-slider-one .easilon-btn {
  color: #ffffff !important;
}
.main-slider-one .easilon-btn .easilon-btn__icon::after {
  background-color: rgba(255, 255, 255, 0.55) !important;
}

/* Solid CTA hover: navy text, keep amber background (don't go full navy) */
.main-slider-one .easilon-btn:hover {
  color: var(--easilon-black) !important;
  background-color: var(--easilon-base) !important;
}
.main-slider-one .easilon-btn:hover .easilon-btn__icon::after {
  background-color: var(--easilon-black) !important;
}

/* Border CTA: white border inactive for hero image contrast */
.main-slider-one .easilon-btn--border {
  border-color: rgba(255, 255, 255, 0.7) !important;
}
/* Border CTA hover: navy text, amber pseudo-element fill (transparent bg lets it show) */
.main-slider-one .easilon-btn--border:hover {
  color: var(--easilon-black) !important;
  background-color: transparent !important;
  border-color: var(--easilon-base) !important;
}
.main-slider-one .easilon-btn--border:hover .easilon-btn__icon::after {
  background-color: var(--easilon-black) !important;
}

/* --- Hero Slider Shapes: Scale to Section Height -----------
   height = 100% of the hero section's rendered height.
   width  = 75% of that height (aspect-ratio 3:4).
   Vertical anchors shifted to 0 so the full height aligns
   with the section top/bottom without overflow clipping.
   ---------------------------------------------------------- */
.main-slider-one .main-slider-one__shape-one,
.main-slider-one .main-slider-one__shape-two {
  width: 25% !important;
  height: auto !important;
}

/* --- Quick Loan One: fix button collision on desktop -----------
   The base theme positions every .quick-loan-one .easilon-btn
   absolutely at top:50% right:40px — stacking both CTAs on top of
   each other.  The wrapper takes over that absolute position and
   becomes a flex column; each button is reset to relative so it
   remains a normal flex item and picks up the gap spacing.
   ---------------------------------------------------------- */
@media (min-width: 992px) {
  /* Wrapper absorbs the absolute position */
  .quick-loan-one__btns {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }
  /* Pull buttons back into flex flow — static beats absolute via !important
     (base easilon.css has no !important on position, so this always wins).
     Direct-child selector avoids any ancestor-specificity ambiguity. */
  .quick-loan-one__btns > a {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
  }
}

/* --- Quick Loan One: money image sizing ---
   Constrain the replacement image to the same visual footprint
   as the original (≈280px wide) so it sits neatly above the
   bottom-right corner without overflowing the section.
   ---------------------------------------------------------- */
.quick-loan-one__money {
  width: 280px;
  max-width: 280px;
  height: auto;
  object-fit: contain;
}

/* -----------------------------------------------------------
   Services page: force card content to stack vertically at
   ALL viewport sizes (base template only does column on
   tablet/mobile, causing title + button to collide on desktop).
   ----------------------------------------------------------- */
.service-card__content {
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Expand service card button from icon-only (69px) to a proper text+icon button
   now that cards are stacked vertically rather than the original row layout. */
.service-card__btn {
  width: auto !important;
  height: auto !important;
  padding: 14px 24px !important;
  align-self: flex-start !important;
  margin-top: 8px;
}

.service-card__text {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin: 12px 16px 4px;
}