/* ==========================================
   Linkersdo Modular CSS v1.0 — Synchronized with index.css
   FILE: components.css
   PURPOSE: Logo text, social icons, tabs, FAQ, advertisement bar, services icons
   Used in: All pages
   Depends on: base.css (vars), layout.css (container/grid)
   ========================================== */
.logo-text {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  text-decoration: none;
  /*background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981);*/
  background: linear-gradient(
    90deg,
    #222f50 0%,   /* dark navy (L) */
    #35415e 65%,  /* mid tone */
    #0083ff 100%  /* bright blue (D) */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  letter-spacing: 1px;
  transition: transform .2s ease, opacity .2s ease;
  display: flex;
  align-items: center;
}

.logo-text:hover {
  transform: scale(1.05);
  opacity: .9
}

.logo-text {
  font: 900 clamp(36px, 4.5vw, 36px)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
  letter-spacing: .4px;
  color: #0f172a;
  text-decoration: none;
}

/* logo image */
.logo-text .logo-img {
  height: 106px;          /* adjust as needed */
  width: auto;
  display: block;
  object-fit: contain;
  margin-left: -34px;
  margin-right: -15px; /* pull text closer to image */
  margin-bottom: 20px;    /* optical alignment tweak */
}



.social-icons {
  display: flex;
  align-items: center;
  gap: 10px
}

.social-icons img {
  display: block;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .1))
}

.social-icons a:hover {
  transform: translateY(-1px)
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 36px;
  height: 46px;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-top: -25px;
}

.nav-toggle .bar {
  height: 3px;
  width: 100%;
  background: #0f172a;
  border-radius: 2px;
  transition: all .3s ease
}

/*=====================================================/*
/* Focused on FAQ's color picked from base.css*/
.faq {
  margin-top: 40px
}

.faq h2 {
  margin-bottom: 20px
}


.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 16px 0
}

.faq .faq-item {
  padding: 12px 14px;
  border-radius: 12px;
  margin: 10px 0;
  border: 1px solid #e5e7eb;
}

.faq .faq-item:nth-child(odd) {
  background: var(--faq-odd);
}

.faq .faq-item:nth-child(even) {
  background: var(--faq-even);
}

.faq-item button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.faq-item button:focus {
  outline: none
}

.faq-item p {
  margin: 10px 0 0;
  display: none;
  color: var(--muted)
}

.faq-item button span {
  transition: transform .3s ease
}

.faq-item.open button span {
  transform: rotate(45deg)
}

.faq-item.open p {
  display: block !important;
  margin-top: 10px;
  animation: faqFadeIn .3s ease
}


#services-overview .card .row {
  display: flex;
  align-items: center;
  gap: 12px
}

#services-overview .icon-wrap {
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  flex: 0 0 clamp(64px, 8vw, 96px);
  display: inline-flex;
  align-items: center;
  justify-content: center
}

#services-overview .service-icon-object {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .08));
  transition: transform .25s ease, filter .25s ease;
  will-change: transform
}

#services-overview .card:hover .service-icon-object {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .12))
}

.card .row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0
}

.card .row h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}