/* ══════════════════════════════════════════════════════════
   DAILA INVESTMENTS — style-extra.css
   Additions & overrides on top of style.css
══════════════════════════════════════════════════════════ */

/* ── 1. STICKY NAVBAR (always visible) ── */
.daila-sticky-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030;
  background: #fff !important;
  box-shadow: 0 2px 20px rgba(46,27,140,.10) !important;
  transition: box-shadow .3s;
}
/* Override old hide-on-scroll behaviour */
.navbar.sticky-top { top: 0 !important; }

/* Feedback star link in nav */
.nav-feedback { color: var(--accent) !important; font-weight: 800 !important; }
.nav-feedback:hover { color: var(--primary) !important; }

/* ── 2. CAROUSEL HEIGHT — genuine size ── */
#header-carousel .carousel-item { min-height: 480px !important; }
#header-carousel .carousel-item img { height: 480px !important; object-fit: cover !important; filter: brightness(.28) !important; }
@media(max-width: 767px) {
  #header-carousel .carousel-item { min-height: 360px !important; }
  #header-carousel .carousel-item img { height: 360px !important; }
}

/* ── 3. STATS BAND — with heading & footer ── */
.band-header {
  text-align: center;
  padding: 44px 0 8px;
  position: relative; z-index: 2;
}
.band-header .bh-tag {
  display: inline-block;
  background: rgba(122,201,67,.18); color: var(--accent);
  font-size: .7rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  padding: 5px 16px; border-radius: 50px; margin-bottom: 10px;
}
.band-header h2 {
  font-family: 'Nunito', sans-serif; font-size: clamp(1.3rem,2.5vw,1.8rem);
  font-weight: 900; color: #fff; line-height: 1.25; margin: 0;
}
.band-header .bh-sub {
  font-size: .88rem; color: rgba(255,255,255,.45); margin-top: 8px;
}
.band-footer {
  text-align: center;
  padding: 10px 0 32px;
  font-size: .72rem; color: rgba(255,255,255,.28);
  position: relative; z-index: 2;
  letter-spacing: .4px;
}

/* MF band header/footer */
.mf-band .band-header h2 { color: #fff; }
.mf-band .band-footer { color: rgba(255,255,255,.25); }

/* ── 4. MF BAND — 4 columns ── */
.mf-band .row { display: flex; flex-wrap: wrap; }
.mf-band .mf-col { flex: 1 1 25%; min-width: 140px; }
@media(max-width:767px){
  .mf-band .mf-col { flex: 1 1 50%; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.07); }
  .mf-band .mf-col:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07) !important; }
  .mf-band .mf-col:last-child,.mf-band .mf-col:nth-last-child(2):nth-child(odd) { border-bottom:none; }
}

/* ── 5. TESTIMONIALS SECTION ── */
.testimonials-section { background: var(--light); }
.t-avatar-wrap {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); flex-shrink: 0;
}
.t-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.t-avatar-fallback {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--hover));
  color: #fff; font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
}
.test-item .stars { color: #f5a623; font-size: 1rem; margin-bottom: 12px; }

/* ── 6. FEEDBACK LINK PILL ── */
.feedback-cta-bar {
  background: linear-gradient(90deg, var(--primary), var(--hover));
  padding: 12px 0; text-align: center;
}
.feedback-cta-bar a {
  color: #fff; font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: .88rem; display: inline-flex; align-items: center; gap: 8px;
}
.feedback-cta-bar a:hover { opacity: .85; }

/* ── 7. SERVICES PAGE — MF Account CTA ── */
.mf-cta-card {
  background: linear-gradient(135deg, var(--primary), var(--hover));
  border-radius: 16px; padding: 28px 32px; color: #fff; margin-bottom: 20px;
}
.mf-cta-card h4 { font-family: 'Nunito',sans-serif; font-weight:900; color:#fff; margin-bottom:8px; }
.mf-cta-card p  { color: rgba(255,255,255,.7); font-size:.88rem; margin-bottom:16px; }
.mf-cta-card a  {
  display:inline-block; background:#fff; color:var(--primary);
  padding:10px 24px; border-radius:10px; font-family:'Nunito',sans-serif;
  font-weight:800; font-size:.9rem; transition:.2s;
}
.mf-cta-card a:hover { background:var(--accent); color:#fff; }

/* ── 8. FEEDBACK PAGE ── */
.fb-card { background:#fff; border:1.5px solid var(--border); border-radius:18px; padding:32px; box-shadow:0 4px 24px rgba(46,27,140,.08); }
.fb-stars .star { font-size:2.4rem; cursor:pointer; color:#ddd; transition:.15s; user-select:none; }
.fb-stars .star.active,.fb-stars .star:hover { color:#f5a623; }
.ai-helper-btn {
  display:flex; align-items:center; gap:8px;
  background:rgba(46,27,140,.07); border:1.5px solid rgba(46,27,140,.15);
  color:var(--primary); padding:9px 18px; border-radius:10px;
  font-family:'Nunito',sans-serif; font-weight:700; font-size:.84rem;
  cursor:pointer; border:none; transition:.2s; width:100%; margin-bottom:12px;
}
.ai-helper-btn:hover { background:rgba(46,27,140,.12); }
.ai-spinner { width:16px;height:16px;border:2px solid rgba(46,27,140,.2);border-top:2px solid var(--primary);border-radius:50%;animation:spin .6s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 9. PAGE HEADER PADDING (no topbar) ── */
.page-header { padding-top: 52px !important; }

/* ── 10. BACK-TO-TOP display fix ── */
.back-to-top { display: none; align-items: center; justify-content: center; }
.back-to-top.show { display: flex !important; }

/* Modern homepage refresh */
.modern-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(circle at top left, rgba(122,201,67,.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(46,27,140,.14), transparent 28%),
    linear-gradient(180deg, #fbfbff 0%, #f3f6ff 100%);
}
.modern-hero::before {
  content: '';
  position: absolute;
  inset: auto auto 30px -80px;
  width: 220px;
  height: 220px;
  background: rgba(46,27,140,.07);
  border-radius: 50%;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(122,201,67,.12);
  color: var(--accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.modern-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 18px;
}
.hero-copy {
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
}
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 30px;
}
.hero-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hero-mini-card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(46,27,140,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(15,32,68,.06);
}
.hero-mini-card strong,
.hero-floating-card strong,
.metric-card strong,
.process-card h5,
.modern-service-card h4,
.action-item strong,
.modern-panel h5,
.modern-cta-shell h2,
.cta-contact-box a {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--dark);
}
.hero-mini-card span,
.hero-floating-card span,
.metric-label,
.process-card p,
.modern-service-card p,
.action-item span,
.modern-panel p,
.modern-cta-shell p {
  color: var(--muted);
}
.hero-visual {
  position: relative;
  min-height: 520px;
  padding: 40px 24px 24px;
}
.hero-visual-main {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 31, 75, .18);
}
.hero-visual-main img,
.modern-image-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-visual-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,31,75,.04), rgba(16,31,75,.18));
}
.hero-floating-card {
  position: absolute;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(46,27,140,.08);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 18px 45px rgba(15,32,68,.12);
  max-width: 240px;
}
.hero-floating-card span {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.hero-floating-top {
  top: 0;
  left: 0;
}
.hero-floating-bottom {
  right: 0;
  bottom: 0;
}
.modern-narrow {
  max-width: 640px;
}
.modern-service-card {
  height: 100%;
  padding: 30px 24px;
  background: #fff;
  border: 1px solid rgba(46,27,140,.08);
  border-radius: 22px;
  box-shadow: 0 14px 35px rgba(15,32,68,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.modern-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(15,32,68,.12);
  border-color: rgba(46,27,140,.16);
}
.modern-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(46,27,140,.08), rgba(122,201,67,.16));
  margin-bottom: 18px;
}
.modern-icon img {
  width: 36px;
  height: 36px;
}
.modern-service-card a {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-weight: 700;
  color: var(--primary);
}
.modern-dark-section,
.modern-cta-shell {
  background: linear-gradient(135deg, #160e45 0%, #231162 50%, #2e1b8c 100%);
  padding: 72px 0;
}
.modern-panel {
  height: 100%;
  padding: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  backdrop-filter: blur(12px);
}
.modern-panel-intro {
  background: rgba(255,255,255,.12);
}
.modern-panel h2,
.modern-panel h5,
.modern-panel p,
.modern-cta-shell h2,
.modern-cta-shell p,
.cta-contact-box span,
.sec-tag-dark {
  color: #fff;
}
.modern-panel p,
.modern-cta-shell p,
.cta-contact-box span {
  color: rgba(255,255,255,.72);
}
.sec-tag-dark {
  background: rgba(122,201,67,.18);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.process-card {
  height: 100%;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid rgba(46,27,140,.08);
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(15,32,68,.06);
}
.process-no {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--hover));
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 18px;
}
.metrics-wrap {
  padding: 72px 0;
  background: linear-gradient(180deg, #fff 0%, #f4f6ff 100%);
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.metric-card {
  padding: 26px 22px;
  background: #fff;
  border: 1px solid rgba(46,27,140,.08);
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(15,32,68,.06);
  text-align: center;
}
.metric-card strong {
  font-size: 2rem;
  margin-top: 8px;
  text-align: center;
}
.metric-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  text-align: center;
}
.mf-num,
.stat-num {
  text-align: center;
}
.t-avatar-wrap {
  width: 56px;
  height: 56px;
}
.modern-date {
  font-size: .85rem;
  color: var(--muted);
}
.modern-image-stack {
  min-height: 460px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,32,68,.12);
}
.action-list {
  display: grid;
  gap: 14px;
}
.action-item {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(46,27,140,.08);
  border-radius: 18px;
}
.modern-enquiry-box {
  padding: 30px;
  background: rgba(255,255,255,.08);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.cta-contact-box {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  margin-top: 22px;
}
.cta-contact-box a {
  color: #fff;
  font-size: 1.2rem;
}
@media (max-width: 991.98px) {
  .hero-mini-grid,
  .process-grid,
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-visual {
    min-height: auto;
    padding: 10px 0 90px;
  }
}
@media (max-width: 767.98px) {
  .modern-hero,
  .modern-dark-section,
  .modern-cta-shell,
  .metrics-wrap {
    padding: 56px 0;
  }
  .hero-mini-grid,
  .process-grid,
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  .hero-cta-group {
    flex-direction: column;
  }
  .hero-floating-card {
    position: static;
    max-width: none;
    margin-top: 16px;
  }
  .modern-image-stack {
    min-height: 320px;
  }
}


/* ── Stats Band icon (about page 8-counter layout) ── */
.stat-icon { font-size: 1.5rem; margin-bottom: 4px; }

/* ── Counter group section titles (index + about) ── */
.counter-group-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 6px 10px 6px 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--border);
}
.counter-group-icon { font-size: 1.1rem; }

/* about.html stats-band group titles (white on dark band) */
.stats-band .counter-group-title {
  color: rgba(255,255,255,.9);
  border-bottom-color: rgba(255,255,255,.2);
  margin-top: 18px;
  margin-bottom: 8px;
}
.stats-band .counter-group-title:first-of-type { margin-top: 0; }

/* ══════════════════════════════════════════════
   TESTIMONIAL CAROUSEL
══════════════════════════════════════════════ */
.testimonials-section { overflow: hidden; }
.ts-carousel { overflow: hidden; width: 100%; }
.ts-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ts-slide {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  padding: 0 10px;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .ts-slide { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 599px) {
  .ts-slide { flex: 0 0 100%; max-width: 100%; }
}
.ts-card {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  padding: 24px 22px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 20px rgba(30,42,94,.07);
  transition: box-shadow .3s;
}
.ts-card:hover { box-shadow: 0 8px 32px rgba(30,42,94,.13); }
.ts-quote-mark {
  font-size: 3.5rem;
  line-height: 1;
  color: #e8ecf4;
  font-family: Georgia, serif;
  position: absolute;
  top: 10px;
  right: 18px;
  pointer-events: none;
}
.ts-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.ts-star { font-size: 1rem; color: #e0e0e0; }
.ts-star.filled { color: #FFC107; }
.ts-text {
  font-size: .88rem;
  line-height: 1.65;
  color: #3a4560;
  flex: 1;
  /* Fixed height for exactly 6 lines */
  height: calc(1.65em * 6);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  margin-bottom: 18px;
}
.ts-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #eef0f7;
  /* Fixed height so all cards are same */
  min-height: 52px;
}
.ts-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #eef0f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1e2a5e,#2d1b8c);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-info { flex: 1; min-width: 0; }
.ts-name {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  color: #1e2a5e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-meta {
  display: block;
  font-size: .73rem;
  color: #6b7a99;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.ts-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #dde3f0;
  background: #fff;
  color: #1e2a5e;
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.ts-btn:hover { background: #1e2a5e; color: #fff; border-color: #1e2a5e; }
.ts-dots { display: flex; gap: 6px; align-items: center; }
.ts-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #dde3f0;
  cursor: pointer;
  padding: 0;
  transition: all .2s;
}
.ts-dot.active { background: #1e2a5e; width: 22px; border-radius: 4px; }