/* services.css — page specific tweaks (mobile-first) */

:root{
  --g1:#ff2bd6;
  --g2:#7c2cff;
  --g3:#00a6ff;
  --card:#0f1720;
  --muted:#9aa2b2;
  --glass: rgba(255,255,255,0.03);
}

/* Page hero compact */
.page-hero{
  padding:64px 0;
  background: linear-gradient(180deg, rgba(12,12,20,0.0), rgba(0,0,0,0.03));
}
.hero-inner-compact{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero-left{flex:1;min-width:240px}
.hero-right{flex:0 0 300px;display:flex;justify-content:center}
.service-visual-img{width:220px;filter:drop-shadow(0 20px 40px rgba(124,44,255,0.08))}

/* Services detail grid */
.service-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin-top:18px;
}
.svc{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:16px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.svc h3{margin-bottom:6px}
.svc p.muted{color:var(--muted);margin-bottom:8px}
.svc ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6}

/* Packages area */
.section-alt{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);}

.packages-wrap{display:flex;flex-direction:column;gap:14px;margin-top:16px}

/* Large package card */
.pkg-large{
  display:flex;gap:16px;align-items:stretch;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:16px;border-radius:12px;box-shadow:0 12px 50px rgba(0,0,0,0.5);
}
.pkg-left{flex:1}
.pkg-right{width:160px;display:flex;align-items:center;justify-content:center}
.pkg-head .pkg-tag{font-size:13px;color:var(--muted);margin-top:6px}
.pkg-feat{list-style:none;padding-left:0;color:var(--muted);margin-top:12px}
.pkg-cta-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.price .orig{color:rgba(255,255,255,0.45);font-weight:700;margin-right:8px}
.strike{text-decoration:line-through}
.price .now{font-weight:800}
.big{font-size:22px;background:linear-gradient(90deg,var(--g1),var(--g3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:10px;align-items:center}
.t-step{background:var(--glass);padding:10px;border-radius:10px;text-align:center}
.t-step strong{display:block;font-size:18px}

/* compare table */
.compare-wrap{margin-top:20px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:12px;border-radius:12px}
.compare-scroll{overflow:auto}
.compare-table{width:100%;border-collapse:collapse;min-width:720px}
.compare-table th, .compare-table td{padding:12px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03)}
.compare-table thead th{background:rgba(255,255,255,0.02);font-weight:700}

/* addons */
.addons{margin-top:18px}
.addon-grid{display:flex;gap:12px;flex-wrap:wrap}
.addon{background:var(--card);padding:12px;border-radius:10px;color:var(--muted)}

/* FAQ accordion */
.faq-acc{margin-top:18px;display:grid;gap:10px}
.faq-item{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:10px;padding:8px}
.acc-q{display:block;width:100%;text-align:left;background:none;border:0;color:#fff;font-size:16px;font-weight:700;padding:8px;cursor:pointer}
.acc-a{display:none;padding:10px 8px;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

/* contact-cta */
.contact-cta{padding:40px 0;background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}
.contact-cta-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cta-left{flex:1}
.cta-right{flex:0 0 420px}
@media(max-width:980px){ .cta-right{flex:1;width:100%} .pkg-right{display:none} .pkg-large{flex-direction:column} }

/* responsive smaller screens */
@media(max-width:820px){
  .hero-right{order:-1;margin-bottom:6px}
  .pkg-large{padding:12px}
  .compare-table{min-width:640px}
}
@media(max-width:480px){
  .service-visual-img{width:160px}
  .compare-table{min-width:520px}
  .pkg-cta-row{flex-direction:column;align-items:flex-start;gap:8px}
}

.sticky-cta{position:fixed;bottom:0;left:0;width:100%;background:linear-gradient(90deg,#7c2cff,#00a6ff);
color:#fff;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px;font-weight:600;z-index:9999;}
.sticky-cta .btn-primary{background:#fff;color:#111;padding:8px 14px;border-radius:8px;text-decoration:none;}

html{scroll-behavior:smooth;}
.btn-primary:hover{transform:scale(1.05);transition:.3s;}
.section-title{position:relative;display:inline-block;}
.section-title::after{content:'';position:absolute;left:0;bottom:-6px;width:40%;height:3px;
background:linear-gradient(90deg,#ff2bd6,#00a6ff);border-radius:2px;}
.reveal{opacity:0;transform:translateY(20px);transition:all .8s;}
.reveal.active{opacity:1;transform:translateY(0);}

/* ===== TEMP FIX: Ensure testimonials track and cards are visible ===== */
.testi-carousel { max-width: 100%; }       /* let carousel use available width */
.tc-track-wrap { width: 100%; }            /* ensure parent has width */
.tc-track { display:flex; gap:18px; }      /* flex row */
.testi-card { min-width: 100% !important; } /* each slide full width fallback */

/* ===== CUSTOM STYLING FOR SERVICES GRID (cool look + animations) ===== */

.service-detail-grid { gap:18px; }

/* service card base */
.svc{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:16px;
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.55);
  border: 1px solid rgba(255,255,255,0.03);
  overflow:hidden;
  transition: transform .28s ease, box-shadow .28s ease;
  transform-origin:center;
}

/* slight glass gradient edge */
.svc::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(124,44,255,0.03), rgba(0,166,255,0.02));
  pointer-events:none;
  border-radius:12px;
  mix-blend-mode:screen;
}

/* hover pop + glow */
.svc:hover{
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 28px 80px rgba(5,10,30,0.65), 0 6px 30px rgba(124,44,255,0.06);
}

/* small tilt by pointermove (JS adds --mx/--my) */
.svc { transform: translateZ(0) rotateX(var(--my,0deg)) rotateY(var(--mx,0deg)); }

/* header inside card */
.svc-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.svc-icon{
  width:44px;height:44px;border-radius:10px;display:inline-grid;place-items:center;
  font-size:20px;background:linear-gradient(90deg,var(--g2),var(--g3));box-shadow:0 12px 30px rgba(3,6,20,0.6);
  color:white;
  flex-shrink:0;
  transition: transform .28s ease;
}
.svc h3{margin:0;font-size:18px;line-height:1.1}

/* muted description + list */
.svc p.muted{margin:6px 0 10px;color:var(--muted)}
.svc ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6;font-size:14px}

/* small badge animation */
.svc .svc-icon:hover{transform:translateY(-4px) scale(1.04)}

/* pop-in keyframes for reveal */
@keyframes svcPop {
  0%{opacity:0; transform: translateY(18px) scale(.995)}
  60%{opacity:1; transform: translateY(-6px) scale(1.01)}
  100%{opacity:1; transform: translateY(0) scale(1)}
}
.svc.pop-in{animation: svcPop .62s cubic-bezier(.18,.9,.32,1) both}

/* responsive tweak */
@media(max-width:640px){
  .svc{padding:12px}
  .svc-icon{width:40px;height:40px;font-size:18px}
}

/* micro hover underline for titles */
.svc h3{position:relative}
.svc h3::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:3px;background:linear-gradient(90deg,var(--g1),var(--g3));border-radius:3px;transition:width .28s}
.svc:hover h3::after{width:48%}

/* ===== SERVICE SEARCH BAR STYLING ===== */
.service-search-wrap {
  margin: 20px 0 25px;
  display: flex;
  justify-content: center;
}

#serviceSearch {
  width: 100%;
  max-width: 420px;
  padding: 12px 16px;
  font-size: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 12px;
  outline: none;
  transition: 0.3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

#serviceSearch::placeholder {
  color: rgba(255,255,255,0.5);
}

#serviceSearch:focus {
  border-color: rgba(0,166,255,0.8);
  box-shadow: 0 0 12px rgba(0,166,255,0.4);
  transform: scale(1.03);
}

/* =======================
   ULTRA CONTACT SECTION 
   ======================= */
.yd-ultra-contact{
  position:relative;
  padding:90px 0;
  background:linear-gradient(180deg,rgba(10,10,16,0.92),rgba(5,5,12,0.94));
  overflow:hidden;
}

/* floating aurora background */
.ydc-aurora{
  position:absolute;
  inset:-20% -10% auto -10%;
  height:480px;
  filter:blur(46px);
  opacity:.75;
  pointer-events:none;
}
.ydc-aurora span{
  position:absolute;
  width:40%;
  height:40%;
  border-radius:50%;
  mix-blend-mode:screen;
}
.ydc-aurora span:nth-child(1){
  left:0; top:0;
  background:radial-gradient(circle,var(--g1),transparent 60%);
  animation:aurA 12s infinite ease-in-out;
}
.ydc-aurora span:nth-child(2){
  right:0; top:25%;
  background:radial-gradient(circle,var(--g2),transparent 60%);
  animation:aurB 14s infinite ease-in-out;
}
.ydc-aurora span:nth-child(3){
  left:20%; top:55%;
  background:radial-gradient(circle,var(--g3),transparent 60%);
  animation:aurC 16s infinite ease-in-out;
}

@keyframes aurA {0%{transform:translateY(0)}50%{transform:translateY(20px)}100%{transform:translateY(0)}}
@keyframes aurB {0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}
@keyframes aurC {0%{transform:translateX(0)}50%{transform:translateX(25px)}100%{transform:translateX(0)}}

/* Layout */
.ydc-inner{display:flex;align-items:center;gap:40px;position:relative;z-index:2;flex-wrap:wrap;}
.ydc-left{flex:1;min-width:300px;}
.ydc-right{flex:0 0 420px;min-width:300px;}

/* Text */
.ydc-title{
  font-size:34px;
  font-weight:700;
  background:linear-gradient(90deg,var(--g1),var(--g3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ydc-sub{
  color:var(--muted);
  margin:12px 0 18px;
  font-size:16px;
}
.ydc-points li{
  color:#d7ddff;
  margin:6px 0;
  font-size:15px;
}

/* Form Glass UI */
.ydc-form{
  background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  padding:20px;
  border-radius:16px;
  box-shadow:0 20px 70px rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
  animation:popUp .7s ease forwards;
  transform:translateY(20px);
  opacity:0;
}
@keyframes popUp{
  to{transform:none;opacity:1;}
}

/* input fields */
.ydc-field input,
.ydc-field select,
.ydc-field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05);
  color:#fff;
  font-size:15px;
  outline:none;
  transition:0.3s;
}
.ydc-field textarea{height:110px;resize:none;}

.ydc-field input:focus,
.ydc-field textarea:focus,
.ydc-field select:focus{
  border-color:var(--g3);
  box-shadow:0 0 14px rgba(0,166,255,0.4);
  transform:scale(1.02);
}

/* Buttons */
.ydc-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.ydc-btn{
  padding:12px 18px;
  border-radius:12px;
  font-weight:600;
  transition:0.3s;
}
.ydc-btn:hover{
  transform:translateY(-3px) scale(1.05);
}

/* Status text */
.ydc-status{
  margin-top:10px;
  color:#9ff;
  font-size:14px;
}

/* Responsive */
@media(max-width:820px){
  .ydc-inner{flex-direction:column;}
  .ydc-right{width:100%;}
}

.ydc-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

.ydc-field select option {
  background: #0b0e16 !important;
  color: #fff !important;
}

/* ===========================
   ULTRA COMPARISON TABLE
   =========================== */

.compare-wrap {
  margin-top: 40px;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(10,12,22,0.35));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 28px 80px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}

/* aurora glow behind */
.compare-wrap::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(circle at 30% 30%, rgba(124,44,255,0.25), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(0,166,255,0.25), transparent 60%);
  filter: blur(80px);
  opacity: 0.6;
  pointer-events: none;
}

/* Title */
.compare-wrap h3 {
  font-size: 26px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* scroll wrapper */
.compare-scroll {
  overflow-x: auto;
  padding-bottom: 10px;
}

/* TABLE */
.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: #e8ecff;
  font-size: 15px;
  backdrop-filter: blur(4px);
}

/* HEADER */
.compare-table thead th {
  background: linear-gradient(90deg, rgba(124,44,255,0.25), rgba(0,166,255,0.25));
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  position: relative;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-shadow: 0 0 12px rgba(0,166,255,0.4);
}

/* Animated underline under header */
.compare-table thead th::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  border-radius: 3px;
  transition: width 0.3s, left 0.3s;
}

.compare-table thead th:hover::after {
  width: 70%;
  left: 15%;
}

/* ROWS */
.compare-table tbody tr {
  transition: 0.25s;
}

/* Glass rows + hover glow */
.compare-table tbody tr:hover {
  background: rgba(255,255,255,0.06);
  transform: scale(1.015);
  box-shadow: 0 8px 28px rgba(0,166,255,0.25);
}

.compare-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #dce2ff;
}

/* First column (Feature name) */
.compare-table tbody td:first-child {
  font-weight:600;
  color:#fff;
}

/* Beautiful neon border on scroll */
.compare-scroll::-webkit-scrollbar {
  height: 8px;
}
.compare-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--g2), var(--g3));
  border-radius: 4px;
}
.compare-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
}

/* Responsive */
@media(max-width: 600px) {
  .compare-wrap {
    padding: 16px;
  }
}

/* ===========================
   ULTRA ADD-ONS & RETAINERS
   =========================== */

.addons {
  margin-top: 22px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(8,10,16,0.38));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 24px 60px rgba(2,6,23,0.6);
  position: relative;
  overflow: visible;
  backdrop-filter: blur(8px);
}

/* subtle aurora glow behind addons */
.addons::before{
  content:"";
  position:absolute;
  inset:-18% -8% auto -8%;
  height:160px;
  background: radial-gradient(circle at 10% 30%, rgba(124,44,255,0.14), transparent 40%),
              radial-gradient(circle at 85% 40%, rgba(0,166,255,0.12), transparent 40%);
  filter: blur(36px);
  pointer-events:none;
  z-index:0;
}

/* heading */
.addons h3{
  position:relative;
  z-index:2;
  font-size:20px;
  margin:0 0 12px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
}

/* grid */
.addon-grid{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}

/* each addon card */
.addon{
  flex: 1 1 220px;
  min-width:180px;
  background: linear-gradient(180deg, rgba(11,14,22,0.6), rgba(8,10,16,0.45));
  border: 1px solid rgba(255,255,255,0.04);
  padding:12px 14px;
  border-radius:12px;
  color: #eaf0ff;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  transition: transform .28s cubic-bezier(.18,.9,.32,1), box-shadow .28s;
  box-shadow: 0 8px 30px rgba(2,6,23,0.5);
  cursor:default;
  overflow:hidden;
}

/* left icon circle */
.addon::before{
  content: "✨";
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:10px;
  flex-shrink:0;
  font-size:18px;
  background: linear-gradient(90deg, rgba(124,44,255,0.16), rgba(0,166,255,0.12));
  box-shadow: 0 12px 36px rgba(124,44,255,0.06);
  color:#fff;
}

/* price badge on right */
.addon::after{
  content: attr(data-price);
  margin-left:auto;
  background: linear-gradient(90deg, var(--g2), var(--g3));
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(0,166,255,0.12);
}

/* hover */
.addon:hover{
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 36px 100px rgba(3,6,30,0.7), 0 8px 36px rgba(124,44,255,0.06);
}

/* subtle shimmer on text */
.addon span{
  display:block;
  color: #dfe8ff;
  font-weight:600;
  letter-spacing:0.2px;
}

/* smaller description line (if any) */
.addon small{
  display:block;
  color:var(--muted);
  font-weight:500;
  font-size:13px;
  margin-top:4px;
}

/* responsive */
@media(max-width:860px){
  .addon-grid{gap:10px}
  .addon{flex:1 1 45%}
}
@media(max-width:480px){
  .addon{flex:1 1 100%}
  .addon::before{width:40px;height:40px;font-size:16px}
  .addon::after{padding:6px 8px;font-size:12px}
}


/* ====== Success Popup Animation ====== */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.4s ease forwards;
}

.popup-inner {
  background: linear-gradient(145deg, rgba(18,18,30,0.95), rgba(10,10,18,0.9));
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,166,255,0.25), 0 0 20px rgba(124,44,255,0.4);
  transform: scale(0.8);
  opacity: 0;
  animation: popupIn 0.45s ease forwards;
}

.popup-icon {
  font-size: 44px;
  margin-bottom: 10px;
  animation: bounceIcon 1s ease infinite alternate;
}

/* Keyframes */
@keyframes popupIn {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bounceIcon {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@keyframes fadeIn {
  from { background: rgba(0,0,0,0); }
  to { background: rgba(0,0,0,0.6); }
}

/* Auto fade-out animation */
.popup.fadeOut {
  animation: fadeOut 0.4s ease forwards;
}
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}