/* ============================================
   CLICKLINK TECHNOLOGIES
   SHARED SERVICE PAGES STYLESHEET
   ============================================ */

/* ── BREADCRUMB ── */
.breadcrumb-bar {
  background: #f8f9fb;
  border-bottom: 1px solid #dde4ef;
  padding: 10px clamp(20px,6vw,80px);
  font-size: 12px;
  color: #5a6a82;
}
.breadcrumb-bar a { color:#002d59; font-weight:600; }
.breadcrumb-bar a:hover { color:#e00611; }
.breadcrumb-bar span { margin:0 6px; }

/* ── SERVICE BANNER (animated CSS hero — no image required) ── */
.service-banner {
  position: relative;
  height: clamp(340px,52vh,480px);
  overflow: hidden;
  background: #001228;
}
/* hide missing/broken banner images */
.service-banner-img { display: none !important; }

/* animated gradient orbs */
.service-banner::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 160% 120% at 5% 70%, rgba(0,74,148,.7) 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 90% 10%, rgba(224,6,17,.25) 0%, transparent 50%),
    radial-gradient(ellipse 120% 100% at 55% 100%, rgba(0,18,40,.9) 0%, transparent 60%),
    linear-gradient(130deg, #001228 0%, #003270 50%, #001228 100%);
  animation: svcBgPulse 10s ease-in-out infinite alternate;
}
@keyframes svcBgPulse {
  0%   { opacity:.88; }
  100% { opacity:1; }
}

/* floating accent circle */
.service-banner::after {
  content: '';
  position: absolute; z-index: 1;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,100,200,.18) 0%, transparent 70%);
  bottom: -160px; right: -100px;
  animation: svcOrbFloat 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes svcOrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-35px,-25px) scale(1.08); }
  66%     { transform: translate(20px,-45px) scale(.95); }
}

.service-banner-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(0,10,25,0.6) 0%,
    rgba(0,30,60,0.3) 55%,
    rgba(0,10,25,0.15) 100%
  );
}
.service-banner-content {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 clamp(20px,6vw,80px); z-index: 3;
}
.service-banner-inner { max-width:620px; width:100%; }
.service-banner-tag {
  display: inline-block;
  background: rgba(224,6,17,.18);
  border: 1px solid rgba(224,6,17,.5);
  color: #ff8088;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 16px; border-radius: 20px; margin-bottom: 16px;
}
.service-banner-title {
  color: #fff;
  font-size: clamp(24px,5vw,42px);
  font-weight: 800; line-height: 1.15; margin-bottom: 14px;
}
.service-banner-title span { color:#e00611; }
.service-banner-desc {
  color: rgba(255,255,255,.78);
  font-size: clamp(12px,1.5vw,14px);
  line-height: 1.8; margin-bottom: 26px;
  width: 100%; max-width: 100%;
}
.service-banner-btns { display:flex; gap:14px; flex-wrap:wrap; }
.svc-btn-primary {
  background: #e00611; color: #fff;
  padding: 12px 28px; border-radius: 8px;
  font-size: 13px; font-weight: 700; border: none;
  display: inline-block; font-family: 'Sora',sans-serif;
  transition: background .2s; cursor: pointer;
}
.svc-btn-primary:hover { background:#c0050e; }
.svc-btn-outline {
  background: transparent; color: #fff;
  padding: 12px 28px; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  border: 2px solid rgba(255,255,255,.45);
  display: inline-block; font-family: 'Sora',sans-serif;
  transition: all .2s; cursor: pointer;
}
.svc-btn-outline:hover { border-color:#fff; background:rgba(255,255,255,.1); }

/* ── SECTION COMMONS ── */
.svc-section { padding:clamp(40px,6vw,64px) clamp(20px,6vw,80px); }
.svc-section-light { background:#f0f4fa; }
.svc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,45,89,.07);
  border: 1px solid rgba(0,45,89,.15);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 10px;
}
.svc-pill-dot { width:6px; height:6px; border-radius:50%; background:#e00611; flex-shrink:0; }
.svc-pill span { font-size:10px; font-weight:700; color:#002d59; text-transform:uppercase; letter-spacing:1.5px; }

.svc-section-title {
  font-size: clamp(22px,4vw,30px);
  font-weight: 800; color: #002d59;
  line-height: 1.2; margin-bottom: 10px;
  width: 100%;
}
.svc-section-title span { color:#e00611; }

/* FIX: Description fully responsive */
.svc-section-text {
  font-size: clamp(13px,1.5vw,14px);
  color: #5a6a82;
  line-height: 1.85;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── INCLUDED CARDS ── */
.included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 18px;
  margin-top: 28px;
  width: 100%;
}
.included-card {
  background: #fff;
  border: 1.5px solid #dde4ef;
  border-radius: 14px;
  padding: 22px 20px;
  transition: all .25s;
  width: 100%;
}
.included-card:hover {
  border-color: #002d59;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,45,89,.09);
}
.included-card-icon {
  width: 44px; height: 44px;
  background: rgba(0,45,89,.07);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.included-card-icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: #002d59;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.included-card-title {
  font-size: 13px; font-weight: 700;
  color: #002d59; margin-bottom: 6px;
}
/* FIX: Card description responsive */
.included-card-desc {
  font-size: clamp(11px,1.2vw,12px);
  color: #5a6a82;
  line-height: 1.7;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── INFINITE SCROLL PROJECTS ── */
.projects-section {
  background: #f0f4fa;
  padding: clamp(40px,6vw,56px) 0;
}
.projects-section-header {
  padding: 0 clamp(20px,6vw,80px);
  margin-bottom: 28px;
}
.projects-scroll-outer { overflow:hidden; position:relative; }
.projects-scroll-outer::before,
.projects-scroll-outer::after {
  content:''; position:absolute; top:0; bottom:0;
  width:100px; z-index:2; pointer-events:none;
}
.projects-scroll-outer::before { left:0; background:linear-gradient(to right,#f0f4fa,transparent); }
.projects-scroll-outer::after  { right:0; background:linear-gradient(to left,#f0f4fa,transparent); }
.projects-scroll-track {
  display: flex; gap: 20px;
  width: max-content;
  animation: infiniteScroll 28s linear infinite;
}
.projects-scroll-track:hover { animation-play-state:paused; }
@keyframes infiniteScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.project-card {
  width: 280px; background: #fff;
  border-radius: 14px; overflow: hidden;
  border: 1.5px solid #dde4ef; flex-shrink: 0;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
}
.project-card:hover {
  box-shadow: 0 10px 28px rgba(0,45,89,.12);
  transform: translateY(-3px);
}
.project-card-img {
  height: 160px;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.project-card-img-overlay {
  width: 100%; padding: 10px 14px;
  background: linear-gradient(transparent,rgba(0,45,89,.75));
}
.project-card-cat {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(255,255,255,.85);
}
.project-card-body { padding:16px; }
.project-card-title {
  font-size: 13px; font-weight: 700;
  color: #002d59; margin-bottom: 6px;
}
.project-card-client {
  font-size: 11px; color: #5a6a82;
  display: flex; align-items: center; justify-content: space-between;
}
.project-card-link { font-size:11px; color:#e00611; font-weight:700; }

/* ── FAQ + FORM SECTION ── */
.faq-form-section {
  padding: clamp(40px,6vw,64px) clamp(20px,6vw,80px);
}
.faq-form-header { margin-bottom:32px; }
.faq-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* FAQ */
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item {
  border: 1.5px solid #dde4ef;
  border-radius: 12px; overflow: hidden;
  background: #fff; transition: border-color .2s;
}
.faq-item.open { border-color:#002d59; }
.faq-question {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 16px 18px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #002d59;
  gap: 12px; user-select: none;
}
.faq-question-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: #f0f4fa;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #002d59;
  flex-shrink: 0; transition: all .25s; line-height: 1;
}
.faq-item.open .faq-question-icon {
  background: #002d59; color: #fff; transform: rotate(45deg);
}
.faq-answer {
  display: none;
  padding: 14px 18px 16px;
  font-size: 12px; color: #5a6a82;
  line-height: 1.8;
  border-top: 1px solid #dde4ef;
}
.faq-item.open .faq-answer { display:block; }

/* ── CONTACT FORM ── */
.service-contact-form {
  background: #fff;
  border: 1.5px solid #dde4ef;
  border-radius: 16px;
  padding: clamp(20px,3vw,32px);
  position: sticky; top: 80px;
}
.scf-title {
  font-size: 18px; font-weight: 800;
  color: #002d59; margin-bottom: 5px;
}
.scf-subtitle {
  font-size: 12px; color: #5a6a82;
  margin-bottom: 20px; line-height: 1.6;
}
.scf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 12px;
}
.scf-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #dde4ef; border-radius: 8px;
  font-size: 13px; font-family: 'Sora',sans-serif;
  color: #1a1a2e; outline: none;
  transition: border-color .2s; background: #fff;
}
.scf-input:focus { border-color:#002d59; }
.scf-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #dde4ef; border-radius: 8px;
  font-size: 13px; font-family: 'Sora',sans-serif;
  color: #1a1a2e; outline: none; resize: none;
  height: 90px; margin-bottom: 16px;
  transition: border-color .2s; background: #fff;
}
.scf-textarea:focus { border-color:#002d59; }

/* ── CONTACT MODE SELECTOR ── */
.scf-mode-wrap { margin-bottom: 16px; }
.scf-mode-label {
  font-size: 10px; font-weight: 700; color: #5a6a82;
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 8px;
}
.scf-mode-opts {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.scf-mode-opt { cursor: pointer; }
.scf-mode-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.scf-mode-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700; font-family: 'Sora', sans-serif;
  border: 1.5px solid #dde4ef; background: #f8fafd; color: #5a6a82;
  cursor: pointer; transition: all .18s; white-space: nowrap;
  user-select: none;
}
.scf-mode-btn:hover { border-color: #002d59; color: #002d59; }
.scf-mode-opt input:checked + .scf-mode-btn {
  background: #002d59; color: #fff; border-color: #002d59;
}

/* ── SINGLE SUBMIT BUTTON ── */
.scf-btn {
  width: 100%;
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: 'Sora',sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background .2s, transform .1s;
  background: #e00611;
  color: #fff;
}
.scf-btn:hover  { background:#c0050e; }
.scf-btn:active { transform:scale(.98); }
.scf-btn.success { background:#16a34a; cursor:default; }
.scf-btn.success:hover { background:#16a34a; }

/* Success message */
.scf-success {
  display: none; text-align: center;
  padding: 20px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px; margin-top: 14px;
}
.scf-success.show  { display:block; }
.scf-success-icon  { font-size:36px; margin-bottom:8px; }
.scf-success-title { font-size:15px; font-weight:800; color:#16a34a; margin-bottom:6px; }
.scf-success-text  { font-size:12px; color:#5a6a82; line-height:1.6; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .faq-form-grid { gap:28px; }
  .included-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
}
@media (max-width:768px) {
  .service-banner { height:clamp(280px,55vw,360px); }
  .service-banner-desc { display:none; }
  .faq-form-grid { grid-template-columns:1fr; gap:28px; }
  .service-contact-form { position:static; }
  .scf-row { grid-template-columns:1fr; }
  .included-grid { grid-template-columns:1fr 1fr; }
  .scf-btns { flex-wrap:wrap; }
  .scf-btn { max-width:100%; flex:1 1 calc(50% - 5px); }
}
@media (max-width:480px) {
  .included-grid { grid-template-columns:1fr; }
  .svc-section { padding:36px 16px; }
  .projects-section-header { padding:0 16px; }
  .faq-form-section { padding:36px 16px; }
  .scf-btn { flex:1 1 100%; max-width:100%; }
}