/* ============================================================
   IGX Site Manager - front-end fixes for irfangulzar.com
   Loaded after the main design stylesheet. Fixes:
   1. Heading/text contrast (the WP theme overrides design colors)
   2. Tighter section rhythm + smaller hero gap under the header
   3. Hero image equal to the left column, decor circles on top
   4. About portrait: no rectangle border/stroke, soft drop shadow
   5. Services dropdown in the header + sticky shrinking header
   6. Testimonials loop slider (pauses on hover, normal speed)
   ============================================================ */

/* ---------- 1. Contrast: headings and card titles ---------- */
h1, h2, h3, h4, h5, h6 { color: #f8fafc; }
.card h3, .proj-body h3, .price-card h3 { color: #f8fafc; }
.foot-grid h3 { color: #f8fafc; }
.faq-item summary { color: #f8fafc; }
.card p { color: #cbd5e1; }
.price-card .feat li { color: #cbd5e1; }
.section-light .card h3 { color: #0f172a; }
.section-light .card p { color: #475569; }

/* ---------- 2. Tighter rhythm ---------- */
section { padding: 62px 0; }
.hero { padding: 42px 0 54px; }
.trusted { padding: 34px 0; }

/* ---------- 3. Hero: image matches left column height ---------- */
.hero-pin .hero-grid { align-items: stretch; }
.hp-visual { display: flex; }
.hp-frame { flex: 1 1 auto; width: 100%; max-width: 460px; margin-left: auto; }
.hp-frame img { height: 100%; object-fit: cover; object-position: top center; }
.hero-media img { background: transparent; }
@media (max-width: 900px) {
  .hp-frame { margin: 6px auto 0; }
  .hp-frame img { height: 460px; }
}

/* ---------- 4. About portrait: kill the rectangle stroke ---------- */
.about-visual img {
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .45));
}

/* ---------- 5a. Services dropdown ---------- */
.nav-links li.has-dropdown { position: relative; }
.dd-caret { font-size: .68em; margin-left: 5px; color: var(--sky); }
.nav-links .dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 6px); min-width: 264px;
  background: #0b1226; border: 1px solid var(--border); border-radius: 14px;
  padding: 10px; list-style: none; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; z-index: 60;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-links .dropdown a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--muted-2); }
.nav-links .has-dropdown .dropdown a::after { content: none; display: none; }
.nav-links .dropdown a:hover { background: rgba(14, 165, 233, .1); color: #fff; }
.nav-links li.has-dropdown:hover .dropdown,
.nav-links li.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
@media (max-width: 900px) {
  .nav-links .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 0 16px; min-width: 0;
  }
  .nav-links .dropdown a { padding: 8px 4px; }
}

/* ---------- 5b. Sticky shrinking header ---------- */
.site-header .nav { transition: height .25s ease; }
.site-header .brand img { transition: height .25s ease; }
.site-header.scrolled .nav { height: 56px; }
.site-header.scrolled { background: rgba(2, 6, 23, .97); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.site-header.scrolled .brand img { height: 32px; }

/* ---------- 6. Testimonials loop slider ---------- */
.igx-t-slider {
  overflow: hidden; margin-top: 42px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.igx-t-track {
  display: flex; width: max-content;
  animation: igx-marquee 45s linear infinite;
}
.igx-t-slider:hover .igx-t-track { animation-play-state: paused; }
.igx-t-set { display: flex; gap: 22px; padding-right: 22px; }
.igx-t-card {
  width: 350px; max-width: 84vw; flex: 0 0 auto;
  background: #0b1226; border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 16px; padding: 26px; text-align: left;
}
.igx-t-card p { color: #cbd5e1; margin: 0; }
.igx-t-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.igx-t-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(14, 165, 233, .5); }
.igx-t-name { font-weight: 800; color: #fff; line-height: 1.25; }
.igx-t-role { color: #94a3b8; font-size: .88rem; line-height: 1.35; }
@keyframes igx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .igx-t-track { animation: none; } }